Forms

HTML 5 added the new forms-element, which Bootstrap uses to style forms. Inside the form element, we can add form-group divs. Each of these form-group divs contain a label and an input. Bootstrap makes with the applied styles a beautiful looking form. See and play with the following example to get an impression:

Example

<form role="form">

	<div class="form-group">
		<label for="docDescriptionInput">Description</label>
		<input type="text" class="form-control" id="docDescriptionInput" placeholder="Description">
	</div>

	<div class="form-group">
		<label for="documentToUpload">Document to upload</label>
		<input type="file" id="documentToUpload">
		<p class="help-block">Click on browse to select the document.</p>
	</div>

	<div class="checkbox">
		<label><input type="checkbox"> Archive document</label>
	</div>

	<button type="submit" class="btn btn-default">Upload</button>

</form>

Play with example »

For the inputs you can use the common input-types like text, checkbox, button, as well as the new HTML5 types like date, email, range etc. If you didn’t play with the new HTML5 types, give them a try!

Form Captions

The form was already good, but don’t you think the word ‘document’ was overused? How about a caption for the form? Let’s add one with the <legend>-tag! The new form will then start llike this:

Example

<form role="form">
	<legend>Document-Upload</legend>

	<!--... rest of the form ...-->
</form>

Play with example »

Horizontal forms

For small devices vertical forms are fine, but for larger devices you want to use the space better with horizontal labels and inputs. By setting the css-class form-horizontal on the form-element, we turn the form-group divs into grid rows, which in turn allows us to set column-classes on the labels and the inputs to define the width of them.

Example

<form class="form-horizontal" role="form">

	<div class="form-group">
		<label class="col-xs-3" for="usernameInput">User</label>
		<input class="col-xs-8" type="text" class="form-control" id="usernameInput" placeholder="User">
	</div>
	<!--... rest of the form ...-->
</form>

Play with example »

Validation feedback

Depending on your requirements we must give the users feedback about their inputs. Bootstrap predefines three states for form-elements (i.e. inputs), which should be sufficient for most use-cases:

  • Success (class has-success)
  • Warning (class has-warning)
  • Error (class has-error)

Note that only elements are affected, which have either the control-label-, the form-control- or the help-block-class defined! This states sets the color of the elements either green, yellow or red.

The following example shows each state on the inputs:

Example

<form role="form">

	<div class="form-group has-success">
		<label for="successInput">Success</label>
		<input type="text" class="form-control" id="successInput">
	</div>

	<div class="form-group has-warning">
		<label for="warningInput">Warning</label>
		<input type="text" class="form-control" id="warningInput">
	</div>

	<div class="form-group has-error">
		<label for="errorInput">Error</label>
		<input type="text" class="form-control" id="errorInput">
	</div>

</form>

Play with example »

Feedback Icons on text-inputs
Additionally you can add a corresponding icon to the text-inputs, when you add the has-feedback class on the form-group-div. Additionally you need to set the glyphicon-classes and the form-control-feedback class on the corresponding span-element. Have a look on the next example to fully understand it.

Example

<form role="form">

	<div class="form-group has-success has-feedback">
		<label for="successInput">Success</label>
		<input type="text" class="form-control" id="successInput">
		<span class="glyphicon glyphicon-ok form-control-feedback"></span>
	</div>
	<!--... rest of the form ...-->
</form>

Play with example »