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
Listing 9.2 - Wrapping a form control in a
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