diff options
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 118 |
1 files changed, 84 insertions, 34 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index 88bd37dc2..52230fa54 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -1,7 +1,7 @@ --- layout: docs title: Forms -description: Examples and usage guidelines for from controls, form layouts, and custom forms. +description: Examples and usage guidelines for form controls, form layouts, and custom forms. group: components --- @@ -261,11 +261,11 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o {% example html %} <form> <div class="form-group"> - <label for="formGroupExampleInput">Example label</label> + <label class="form-control-label" for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> - <label for="formGroupExampleInput2">Another label</label> + <label class="form-control-label" for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> @@ -331,7 +331,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]({{ 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. +For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/) 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. @@ -350,31 +350,33 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> - <fieldset class="form-group row"> - <legend class="col-form-legend col-sm-2">Radios</legend> - <div class="col-sm-10"> - <div class="form-check"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> - Option one is this and that—be sure to include why it's great - </label> - </div> - <div class="form-check"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> - Option two can be something else and selecting it will deselect option one - </label> - </div> - <div class="form-check disabled"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> - Option three is disabled - </label> + <fieldset class="form-group"> + <div class="row"> + <legend class="col-form-legend col-sm-2">Radios</legend> + <div class="col-sm-10"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great + </label> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one + </label> + </div> + <div class="form-check disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> </div> </div> </fieldset> <div class="form-group row"> - <label class="col-sm-2">Checkbox</label> + <div class="col-sm-2">Checkbox</div> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> @@ -392,6 +394,55 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall </div> {% endexample %} +More complex layouts can also be created with the grid system. + +{% example html %} +<div class="container"> + <form> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputEmail4" class="col-form-label">Email</label> + <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> + </div> + <div class="form-group col-md-6"> + <label for="inputPassword4" class="col-form-label">Password</label> + <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> + </div> + </div> + <div class="form-group"> + <label for="inputAddress" class="col-form-label">Address</label> + <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> + </div> + <div class="form-group"> + <label for="inputAddress2" class="col-form-label">Address 2</label> + <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> + </div> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputCity" class="col-form-label">City</label> + <input type="text" class="form-control" id="inputCity"> + </div> + <div class="form-group col-md-4"> + <label for="inputState" class="col-form-label">State</label> + <select id="inputState" class="form-control">Choose</select> + </div> + <div class="form-group col-md-2"> + <label for="inputZip" class="col-form-label">Zip</label> + <input type="text" class="form-control" id="inputZip"> + </div> + </div> + <div class="form-group"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Check me out + </label> + </div> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> +</div> +{% endexample %} + Grid-based form layouts also support large and small inputs. {% example html %} @@ -413,7 +464,6 @@ Grid-based form layouts also support large and small inputs. </div> {% endexample %} - ## Checkboxes and radios Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. @@ -519,14 +569,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 an element of your choice. +If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding. {% example html %} <form> <div class="form-group row"> - <label class="col-sm-2 col-form-label">Email</label> + <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <p class="form-control-static">[email protected]</p> + <input type="text" readonly class="form-control-static" id="staticEmail" value="[email protected]"> </div> </div> <div class="form-group row"> @@ -541,8 +591,8 @@ When you need to place plain text next to a form label within a form, use the `. {% example html %} <form class="form-inline"> <div class="form-group"> - <label class="sr-only">Email</label> - <p class="form-control-static">[email protected]</p> + <label for="staticEmail2" class="sr-only">Email</label> + <input type="text" readonly class="form-control-static" id="staticEmail2" value="[email protected]"> </div> <div class="form-group mx-sm-3"> <label for="inputPassword2" class="sr-only">Password</label> @@ -554,7 +604,7 @@ When you need to place plain text next to a form label within a form, use the `. ## Disabled states -Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor. +Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter. {% highlight html %} <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> @@ -674,8 +724,8 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>` {% example html %} <form class="form-inline"> <div class="form-group"> - <label for="inputPassword4">Password</label> - <input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"> + <label for="inputPassword6">Password</label> + <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"> <small id="passwordHelpInline" class="text-muted"> Must be 8-20 characters long. </small> |