diff options
| author | Chris Rebert <[email protected]> | 2015-01-16 08:20:41 -0800 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-01-16 08:20:41 -0800 |
| commit | 2eaa7e0e1c67e2ed38ce69840d6ed0a251a0b976 (patch) | |
| tree | d7721e56343b160829ab72e50da898e58d0ecc1e /docs/_includes | |
| parent | f9ef6d2471b046d49f9d758265a88a5042aabfed (diff) | |
| parent | 2fa70f37da8b250db1fc0a6d8dc4d5aba61bf0df (diff) | |
| download | bootstrap-2eaa7e0e1c67e2ed38ce69840d6ed0a251a0b976.tar.xz bootstrap-2eaa7e0e1c67e2ed38ce69840d6ed0a251a0b976.zip | |
Merge pull request #15581 from twbs/inline-form-with-visible-labels
Add example of using .form-inline with visible <label>s
Diffstat (limited to 'docs/_includes')
| -rw-r--r-- | docs/_includes/css/forms.html | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 184350114..614b43f92 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -65,15 +65,43 @@ <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 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="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> @@ -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> |