diff options
Diffstat (limited to 'docs/_includes/css/forms.html')
| -rw-r--r-- | docs/_includes/css/forms.html | 135 |
1 files changed, 122 insertions, 13 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 054922703..7737ae909 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -56,24 +56,52 @@ <h2 id="forms-inline">Inline form</h2> - <p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> + <p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code><form></code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <div class="bs-callout bs-callout-danger" id="callout-inline-form-width"> - <h4>Requires custom widths</h4> + <h4>May require custom widths</h4> <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p> </div> <div class="bs-callout bs-callout-warning" id="callout-inline-form-labels"> <h4>Always add labels</h4> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p> </div> + <div class="bs-example" data-example-id="simple-form-inline"> <form class="form-inline"> <div class="form-group"> - <label class="sr-only" for="exampleInputEmail2">Email address</label> - <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> + <label for="exampleInputName2">Name</label> + <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> + </div> + <div class="form-group"> + <label for="exampleInputEmail2">Email</label> + <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> </div> + <button type="submit" class="btn btn-default">Send invitation</button> + </form> + </div><!-- /example --> +{% highlight html %} +<form class="form-inline"> + <div class="form-group"> + <label for="exampleInputName2">Name</label> + <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> + </div> + <div class="form-group"> + <label for="exampleInputEmail2">Email</label> + <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]"> + </div> + <button type="submit" class="btn btn-default">Send invitation</button> +</form> +{% endhighlight %} + + <div class="bs-example" data-example-id="simple-form-inline"> + <form class="form-inline"> <div class="form-group"> - <label class="sr-only" for="exampleInputPassword2">Password</label> - <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> + <label class="sr-only" for="exampleInputEmail3">Email address</label> + <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> + </div> + <div class="form-group"> + <label class="sr-only" for="exampleInputPassword3">Password</label> + <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> @@ -86,12 +114,12 @@ {% highlight html %} <form class="form-inline"> <div class="form-group"> - <label class="sr-only" for="exampleInputEmail2">Email address</label> - <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> + <label class="sr-only" for="exampleInputEmail3">Email address</label> + <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> </div> <div class="form-group"> - <label class="sr-only" for="exampleInputPassword2">Password</label> - <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> + <label class="sr-only" for="exampleInputPassword3">Password</label> + <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> @@ -130,7 +158,7 @@ {% endhighlight %} <h2 id="forms-horizontal">Horizontal form</h2> - <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> + <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form (which doesn't have to be a <code><form></code>). Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> <div class="bs-example" data-example-id="simple-horizontal-form"> <form class="form-horizontal"> <div class="form-group"> @@ -500,7 +528,7 @@ <h2 id="forms-control-disabled">Disabled state</h2> - <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p> + <p>Add the <code>disabled</code> boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a <code>not-allowed</code> cursor.</p> <div class="bs-example" data-example-id="text-form-control-disabled"> <form> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> @@ -570,7 +598,7 @@ <h2 id="forms-control-readonly">Readonly state</h2> - <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p> + <p>Add the <code>readonly</code> 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.</p> <div class="bs-example" data-example-id="readonly-text-form-control"> <form> <input class="form-control" type="text" placeholder="Readonly input here…" readonly> @@ -701,6 +729,15 @@ <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> + <div class="form-group has-success has-feedback"> + <label class="control-label" for="inputGroupSuccess1">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> + </div> </form> </div> {% highlight html %} @@ -722,6 +759,15 @@ <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> +<div class="form-group has-success has-feedback"> + <label class="control-label" for="inputGroupSuccess1">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> +</div> {% endhighlight %} <h4>Optional icons in horizontal and inline forms</h4> @@ -735,6 +781,17 @@ <span id="inputSuccess3Status" class="sr-only">(success)</span> </div> </div> + <div class="form-group has-success has-feedback"> + <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label> + <div class="col-sm-9"> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess2Status" class="sr-only">(success)</span> + </div> + </div> </form> </div> {% highlight html %} @@ -747,6 +804,17 @@ <span id="inputSuccess3Status" class="sr-only">(success)</span> </div> </div> + <div class="form-group has-success has-feedback"> + <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label> + <div class="col-sm-9"> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess2Status" class="sr-only">(success)</span> + </div> + </div> </form> {% endhighlight %} @@ -759,6 +827,18 @@ <span id="inputSuccess4Status" class="sr-only">(success)</span> </div> </form> + <br> + <form class="form-inline"> + <div class="form-group has-success has-feedback"> + <label class="control-label" for="inputGroupSuccess3">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess3Status" class="sr-only">(success)</span> + </div> + </form> </div> {% highlight html %} <form class="form-inline"> @@ -769,6 +849,17 @@ <span id="inputSuccess4Status" class="sr-only">(success)</span> </div> </form> +<form class="form-inline"> + <div class="form-group has-success has-feedback"> + <label class="control-label" for="inputGroupSuccess3">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess3Status" class="sr-only">(success)</span> + </div> +</form> {% endhighlight %} <h4>Optional icons with hidden <code>.sr-only</code> labels</h4> @@ -780,6 +871,15 @@ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess5Status" class="sr-only">(success)</span> </div> + <div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess4Status" class="sr-only">(success)</span> + </div> </div> {% highlight html %} <div class="form-group has-success has-feedback"> @@ -788,6 +888,15 @@ <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess5Status" class="sr-only">(success)</span> </div> +<div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label> + <div class="input-group"> + <span class="input-group-addon">@</span> + <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status"> + </div> + <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> + <span id="inputGroupSuccess4Status" class="sr-only">(success)</span> +</div> {% endhighlight %} |