Individual form controls are automatically assigned to some global styles. All settings for .form-control
the class <input>
, <textarea>
and the <select>
elements will be set by default to the Width property width: 100%;
. The label
best arrangement can be obtained by wrapping the element with the previously mentioned controls .form-group
.
1, inline form
Adding a class to an <form>
element .form-inline
makes its contents left-aligned and behaves as a inline-block
level control. applies only when the viewport (viewport) is at least 768px wide (the viewport width is smaller, it collapses the form).
(1) You may need to set the width manually
In Bootstrap, the input box and the Radio/Multi box control are set to width by default width: 100%;
. In inline forms, we set the width of these elements to width: auto;
, so that multiple controls can be arranged on the same line. Depending on your layout needs, some additional custom components may be required.
(2) Be sure to add label
tags
If you do not set a label for each input control label
, the screen reader will not recognize it correctly. For these inline forms, you can label
hide them by setting the .sr-only
class. There are also assistive technologies that provide alternative options for label labels, such as aria-label
, aria-labelledby
or title
attributes. If none of these exist, screen readers may take the use of placeholder
attributes and, if present, use placeholders instead of other tokens, but be aware that this method is not appropriate.
Code<formclass="Form-inline"> <divclass="Form-group"> <labelclass="sr-only" for="ExampleInputEmail3">email address</label> <input type="Email"class="Form-control"Id="ExampleInputEmail3"Placeholder="Enter Email"> </div> <divclass="Form-group"> <labelclass="sr-only" for="ExampleInputPassword3">Password</label> <input type="Password"class="Form-control"Id="ExampleInputPassword3"Placeholder="Password"> </div> <divclass="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="Submit"class="btn Btn-default">signinch</button></form>
2, horizontally arranged forms
.form-horizontal
you can label
lay out labels and control groups horizontally by adding classes to your form and using the Bootstrap preset raster class together. Doing so will change .form-group
the behavior so that it behaves as a row in the grid system, so there is no need to add additional .row
.
Code<formclass="Form-horizontal"> <divclass="Form-group"> <label for="InputEmail3"class="col-sm-2 Control-label">Email</label> <divclass="col-sm-10"> <input type="Email"class="Form-control"Id="InputEmail3"Placeholder="Email"> </div> </div> <divclass="Form-group"> <label for="InputPassword3"class="col-sm-2 Control-label">Password</label> <divclass="col-sm-10"> <input type="Password"class="Form-control"Id="InputPassword3"Placeholder="Password"> </div> </div> <divclass="Form-group"> <divclass="col-sm-offset-2 col-sm-10"> <divclass="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <divclass="Form-group"> <divclass="col-sm-offset-2 col-sm-10"> <button type="Submit"class="btn Btn-default">signinch</button> </div> </div></form>
3, supported controls
Support for almost all form controls
Specific details of how to use, you can log in to view the Help document
bootstrap--Global CSS style form