diff options
Diffstat (limited to 'docs/_includes/css')
| -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> |