Bootstrap and HTML Forms

HTML form using barebones HTML code, note the lack of style and difficulty navigating and reading the form.

Listing 9.1 - A basic HTML form














The same form, using some Bootstrap classes - form-group and form-control, and wrapping the form control in a <div>

Listing 9.2 - Wrapping a form control in a <div>


Bootstrap can also create horizontal forms, but many added classes as well as grid setup is necesssary to achieve the horizontal layout.

Listing 9.3 - A horizontal form


For a form with few elements, such as a login form, an "inline" form can be used.

Listing 9.4 - An Inline Form


An inline form can be set up with the .sr_only class for the labels, to effectively hide them by setting them to a 1px by 1px size. This allows the use of the placeholder values as labels, reducing the required screen width, but allowing the form to be accessible for use with a screen reader.

Listing 9.5 - An Inline Form with Hidden Labels


(End of examples of form styles.)