lucaslencinas-zz / telefonia

Proyecto de Gestion de Solicitudes de Telefonia
0 stars 0 forks source link

Elementos de HTML #4

Closed lucaslencinas-zz closed 8 years ago

lucaslencinas-zz commented 8 years ago

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a

). Doing so changes .form-groups to behave as grid rows, so no need for .row. Email Password Remember me

Supported controls

Examples of standard form controls supported in an example form layout. Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Type declaration required

Inputs will only be fully styled if their type is properly declared.

Input groups

To add integrated text or buttons before and/or after any text-based , check out the input group component. Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

Checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent

Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled

Inline checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line. 1 2 3

1 2 3

Checkboxes and radios without label text

Should you have no text within the

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

For

Static control

When you need to place plain text next to a form label within a form, use the .form-control-static class on a

. Email

email@example.com Password

email@example.com

Email

email@example.com Password

email@example.com

Focus state

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus. Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control. Disabled state

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Disabled fieldsets

Add the disabled attribute to a

to disable all the controls within the
at once. Caveat about link functionality of

By default, browsers will treat all native form controls (,

Readonly state

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Help text

Block level help text for form controls. Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control. Input with help text A block of help text that breaks onto a new line and may extend beyond one line.

... A block of help text that breaks onto a new line and may extend beyond one line.

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles. Conveying validation state to assistive technologies and colorblind users

Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's

A block of help text that breaks onto a new line and may extend beyond one line.

With optional icons

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Feedback icons only work with textual elements. Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon. Conveying the icon's meaning to assistive technologies

To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual

Although the following examples already mention the validation state of their respective form controls in the

(success)
(warning)
(error)
@
(success)

Optional icons in horizontal and inline forms Input with success (success) Input group with success @ (success)

(success)
@
(success)

Input with success (success)

Input group with success @ (success)

(success)
@
(success)

Optional icons with hidden .sr-only labels

If you use the .sr-only class to hide a form control's

(success)
@
(success)

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. Height sizing

Create taller or shorter form controls that match button sizes.

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm. Large label Small label

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.