kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Merge pull request #15581 from twbs/inline-form-with-visible-labels

Browse source 
Add example of using .form-inline with visible <label>s
This commit is contained in:
Chris Rebert 2015-01-16 08:20:41 -08:00
commit 2eaa7e0e1c
1 changed files with 36 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
docs/_includes/css/forms.html
View file

@ -65,15 +65,43 @@
<h4>Always add labels</h4> <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> <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>
<div class="bs-example" data-example-id="simple-form-inline"> <div class="bs-example" data-example-id="simple-form-inline">
<form class="form-inline"> <form class="form-inline">
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label> <label for="exampleInputName2">Name</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label> <label for="exampleInputEmail2">Email</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</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="jane.doe@example.com">
</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="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>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@ -86,12 +114,12 @@
{% highlight html %} {% highlight html %}
<form class="form-inline"> <form class="form-inline">
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label> <label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label> <label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <label>