diff options
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 72 |
1 files changed, 36 insertions, 36 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index ba69ce2d8..99f0d9a63 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,6 +1,7 @@ --- layout: docs title: Forms +description: Examples and usage guidelines for from controls, form layouts, and custom forms. group: components --- @@ -59,28 +60,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a ` </div> <fieldset class="form-group"> <legend>Radio buttons</legend> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + <div class="form-check"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + <div class="form-check"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> - <div class="radio disabled"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + <div class="form-check disabled"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> - <div class="checkbox"> - <label> - <input type="checkbox"> Check me out + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Check me out </label> </div> <button type="submit" class="btn btn-primary">Submit</button> @@ -150,10 +152,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an <tr> <td class="text-nowrap"> {% markdown %} -`.radio`<br> -`.radio-inline`<br> -`.checkbox`<br> -`.checkbox-inline` +`.form-check`<br> +`.form-check-inline` {% endmarkdown %} </td> <td class="text-nowrap"> @@ -192,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty <div class="form-group row"> <label for="example-url-input" class="col-xs-2 col-form-label">URL</label> <div class="col-xs-10"> - <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input"> + <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input"> </div> </div> <div class="form-group row"> @@ -340,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms ### Using the Grid -For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. +For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements. @@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e ## Static controls -When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`. +When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below). {% example html %} <form> <div class="form-group row"> <label class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <p class="form-control-static">[email protected]</p> + <p class="form-control-static mb-0">[email protected]</p> </div> </div> <div class="form-group row"> @@ -585,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi {% callout warning %} #### Caveat about link functionality of `<a>` -By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](../buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. +By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. {% endcallout %} {% callout danger %} @@ -704,47 +704,47 @@ Here are some examples of the aforementioned classes in action. 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 `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute. +Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute. {% endcallout %} {% endcomment %} {% example html %} <div class="form-group has-success"> - <label class="col-form-label" for="inputSuccess1">Input with success</label> + <label class="form-control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control form-control-success" id="inputSuccess1"> <div class="form-control-feedback">Success! You've done it.</div> <small class="form-text text-muted">Example help text that remains unchanged.</small> </div> <div class="form-group has-warning"> - <label class="col-form-label" for="inputWarning1">Input with warning</label> + <label class="form-control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control form-control-warning" id="inputWarning1"> <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> <small class="form-text text-muted">Example help text that remains unchanged.</small> </div> <div class="form-group has-danger"> - <label class="col-form-label" for="inputDanger1">Input with danger</label> + <label class="form-control-label" for="inputDanger1">Input with danger</label> <input type="text" class="form-control form-control-danger" id="inputDanger1"> - <div class="form-control-feedback">Shit, that username's taken. Try another?</div> + <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> <small class="form-text text-muted">Example help text that remains unchanged.</small> </div> {% endexample %} {% example html %} -<div class="checkbox has-success"> - <label> - <input type="checkbox" id="checkboxSuccess" value="option1"> +<div class="form-check has-success"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div> -<div class="checkbox has-warning"> - <label> - <input type="checkbox" id="checkboxWarning" value="option1"> +<div class="form-check has-warning"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1"> Checkbox with warning </label> </div> -<div class="checkbox has-danger"> - <label> - <input type="checkbox" id="checkboxDanger" value="option1"> +<div class="form-check has-danger"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1"> Checkbox with danger </label> </div> @@ -846,7 +846,7 @@ Add other states to your custom forms with our validation classes. <span class="custom-control-description">Check this custom checkbox</span> </label> </div> -<div class="form-group has-danger m-b-0"> +<div class="form-group has-danger mb-0"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> |