Forms

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to collect and transmit information from users in a pre-defined format.

Design and coding

Basic use

Use forms with form controls. Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Appearance
Correct use

Compliance point(s):

Context for the form:
  • Before including any entry fields for the form, provide a one line statement about what this form is used for in the following format:
    • Use this form to
  • This assures the user that the form they are filling out is the correct form
Buttons:
  • When placing a Submit and Clear button at the end of the form, do not place them next to each other
  • Their functions are the direct opposite of one another, and this could cause unwanted user error due to proximity of placement
Progress bar:
  • When the form is spread over multiple screens/pages, provide a progress bar to let the user know at what stage in the completion process they are at
Source code
<form role="form" method="get" action="#">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile" />
  </div>
  <div class="checkbox">
    <label><input type="checkbox" /> Check me out</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Labels

Use labels (a title) to make it clear as to what type of information a user is to enter within an input field.

Appearance
Alignment option 1 − Placed on top


Alignment option 2 − Aligned right

Alignment option 3 − Aligned left
Correct use

Compliance point(s):

  • Shorten label text to the essential minimum
  • Use sentence case for example, "First name" not "First Name"
  • Use labels at all times
    • Screen readers have trouble with forms if a label is not included for every input
    • To hide the label, use the .wb-inv class
  • Use recognized standard abbreviations, and test abbreviations with non-expert users
  • Make a statement rather than asking a question
    • For example, use "Child’s name" instead of "What is the name of the child?"
  • Use unique label text on any given page to meet accessibility standards
  • Place "(required)" at the end of the field label if information is required. Refer to: Form validation

Alignment option 1 design:

  • Place the label above the input field. Further to Web form design: Filling in the blanks, this is the recommended layout
    • This layout allows users to capture both labels and input fields with a single eye movement. While this is the simplest of layouts, users can process the information ten times faster than if the information is left-aligned. This is shown in "Alignment option 3 − Left aligned". This solution uses more vertical space, but does not impact the user experience. If this does not suit your specific layout needs "Alignment option 2 − Right aligned" is also OK to use

Alignment option 2 design:

  • Place the form objects side-by-side only if there is a need to reduce vertical space
    • Right align side-by-side labels to the form objects. This solution is preferred over left aligned labels. Eye tracking studies show that it creates a clear association between label and field. This reduces the number of fixations the user has (the eye jumping from spot to spot) by nearly half. As a result, the reduced eye moments and clear association reduce eye strain, and improve cognition. This translates to a 50% faster form completion rate
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use a colon at the end of an input field label
  • Do not use abbreviations, unless absolutely necessary for space reasons
  • Do not abbreviate a critical word. For example, use "Restricted Acct" not "Rstr Account"

Alignment option 3 design:

  • Do not left-align a label from the input field, for the reasons cited above
Source code
//Alignment option 1 − Placed  on top
<form role="form">
   <div class="form-group">
     <label for="label-1-1">Label 1</label>
       <input type="text" size="10" id="label-1-1" name="label-1-1" class="form-control" />
   </div>
   <div class="form-group">
     <label for="label-2-1">Label 2</label>
       <input type="password" size="10" id="label-2-1" name="label-2-1" class="form-control" />
    </div>
</form>

//Alignment option 2 − Aligned right
<form action="#" method="get" role="form" class="form-horizontal">
<div class="form-group"> <label class="col-sm-4 control-label" for="label-1-2">Label 1</label> <div class="col-md-8"> <input type="text" class="form-control" name="label-1-2" id="label-1-2" size="10"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="label-2-2">Label 2</label> <div class="col-md-8"> <input type="password" class="form-control" name="label-2-2" id="label-2-2" size="10"> </div> </div> </form>

Inputs

Use text-based input fields (most common form control). This includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Appearance
Input field
Input field with a Search button
Correct use

Compliance point(s):

  • Use to create a simple text box that allows for the input of a single line of text
  • Declare the type properly − to fully style the input field
  • Wrap .input-group-btn around the buttons in input groups
    • This is required, as default browser styles cannot be overridden
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not mix form groups directly with input groups
    • Instead, nest the input group inside of the form group
Code
// Input field:
<input type="text" class="form-control" placeholder="(placeholder text)" />

// Input field with a Search button:
<label for="btngrp-search2" class="wb-inv">Search</label>
  <div class="input-group">
    <input type="text" class="form-control" id="btngrp-search2" placeholder="(placeholder text)" />
    <span class="input-group-btn">
     <button class="btn btn-default" type="button">Search</button>
    </span>
  </div>

Textarea

Use textareas so users can insert multiple lines of text within a form.

Appearance
Correct use

Compliance point(s):

  • Use .form-control to create a free-form space that allows the user to type in content
  • Change the rows="*" attribute to reflect the default number of rows to display
  • Limit the number of rows to suit the amount of information that the recipient(s) desires
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use when users need to enter a specific, pre-defined answer
Code
<textarea class="form-control" rows="3"></textarea>

Checkboxes

Use checkboxes so users can select one or several options.

Appearance
Default checkboxes

Inline checkboxes
Correct use

Compliance point(s):

  • Use .checkbox so users can choose one or more predefined set of options
  • Use .checkbox-inline to make checkboxes appear on the same line
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use if there is a need for users to enter a detailed answer
Code
// Default checkboxes:
<div class="checkbox">
   <label><input type="checkbox" value="">Option 1</label>
</div>

// Inline checkboxes:
<div class="checkbox-inline">
   <label><input type="checkbox" value="">Option 1</label>
</div>

Radio buttons

Use radio buttons so users can select only one of several options.

Appearance
Radio buttons

Inline radio buttons
Correct use

Compliance point(s):

  • Use .radio so users can only choose one predefined set of options
  • Use .radio-inline to a make radio buttons appear on the same line
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use if there is a need for users to select more than one option
Code
// Radio buttons:
<div class="radio">
   <label><input type="radio" name="optradio">Option 1</label>
</div>

// Inline radio buttons:
<div class="radio-inline">
   <label><input type="radio" name="optradio">Option 1</label>
</div>

Selects

Use so users can select only one of several options from within a list. A single item in a dropdown list, or multiple options can display at once.

Appearance
Dropdown list with single option view

Dropdown list with multi-option view
Correct use

Compliance point(s):

  • Use .form-control to create a selection list, from which the user can select a single option
  • Add multiple to show multiple options at once
  • Place the most likely select option as the default dropdown text
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use for non-related items
Code
// Dropdown list with single option view:
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

// Dropdown list with multi-option view:
<select multiple="multiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Enhanced use

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes a .form-group to behave as a grid row. So there is no need for .row.

Appearance
Source code
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
	<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
	<div class="col-sm-10">
		<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
	</div>
  </div>
 <div class="form-group">
	<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
	<div class="col-sm-10">
		<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
	</div>
  </div>
  <div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<div class="checkbox">
			<label><input type="checkbox" /> Remember me</label>
		</div>
	</div>
  </div>
  <div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<button type="submit" class="btn btn-default">Sign in</button>
	</div>
  </div>
</form>

Inline form

Use the inline form, and set a width on the form controls. For a compact layout, add .form-inline for left-aligned and inline-block controls. Inputs, selects, and textareas are 100% wide by default in Bootstrap.

Appearance
Source code
<form class="form-inline" role="form" method="get" action="#">
  <div class="form-group">
	<label class="wb-inv" for="exampleInputEmail2">Email address</label>
	<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
  </div>
  <div class="form-group">
	<label class="wb-inv" for="exampleInputPassword2">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
  </div>
  <div class="checkbox">
	<label><input type="checkbox" /> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Static control

Use when there is a need to place a read-only field in the form, use readonly="readonly".

Appearance
Source code
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
	<label for="emailReadonly" class="col-sm-2 control-label">Email</label>
	<div class="col-sm-10">
		<input type="email" readonly="readonly" id="emailReadonly" value="email@example.com" />
	</div>
  </div>
</form>

Disabled state

Use to to prevent user input, and to trigger a slightly different look. Add disabled="disabled" to an input field.

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Link functionality of <a> is not impacted. This class only changes the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility: While Bootstrap applies these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Apply disabled="disabled" to all the fields contained within the disabled fieldset to fix the issue in these browsers.

Appearance
Source code
<form role="form" method="get" action="#">
  <fieldset disabled="disabled">
	<div class="form-group">
		<label for="disabledTextInput">Disabled input</label>
		<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" />
	</div>
	<div class="form-group">
		<label for="disabledSelect">Disabled select menu</label>
		<select id="disabledSelect" class="form-control">
			<option>Disabled select</option>
		</select>
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox" /> Can't check this</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Set height

Use to create larger or smaller form controls that match button sizes with the classes .input-lg or .input-sm. Medium is the default size.

Appearance
Source code
<label for="form-input-lg" class="wb-inv"><code>input-lg</code> class on an input element</label>
<input name="text2" type="text" class="form-control input-lg mrgn-bttm-md" id="form-input-lg" placeholder="input-lg" />

<label for="form-input-md" class="wb-inv">Default input element</label>
<input type="text" class="form-control mrgn-bttm-md" id="form-input-md" placeholder="Default input" />

<label for="form-input-sm" class="wb-inv"><code>input-sm</code> class on an input element</label>
<input class="form-control input-sm mrgn-bttm-md" type="text" id="form-input-sm" placeholder="input-sm" />


<label for="form-select-lg" class="wb-inv"><code>input-lg</code> class on a select element</label>
   <select class="form-control input-lg mrgn-bttm-md" id="form-select-lg">
      <option value="">.input-lg</option>
</select>

<label for="form-select-md" class="wb-inv">Default select element</label>
   <select class="form-control mrgn-bttm-md" id="form-select-md">
      <option value="">Default select</option>
   </select>

<label for="form-select-sm" class="wb-inv"><code>input-sm</code> class on a select element</label>
   <select class="form-control input-sm mrgn-bttm-md" id="form-select-sm">
      <option value="">.input-sm</option>
   </select>

Set width

Use to wrap inputs in grid columns such as .col-xs-4 or .col-xs-8 (or any custom parent element) to easily enforce desired widths.

Appearance
Source code
<div class="row">
  <div class="col-xs-4">
	<label for="form-input-col-xs-4" class="wb-inv"><code>col-xs-4</code> class on the parent element</label>
	<input type="text" class="form-control" id="form-input-col-xs-4" placeholder="col-xs-4" />
  </div>
  <div class="col-xs-8">
	<label for="form-input-col-xs-8" class="wb-inv"><code>col-xs-8</code> class on the parent element</label>
	<input type="text" class="form-control" id="form-input-col-xs-8" placeholder="col-xs-8" />
  </div>
</div>

Fieldsets Borders

By default a single fieldset/legend has no top border. Each fieldset after the first fieldset/legend well have a border to sperate the two fieldsets. This can be changed by using .legend-brdr-bttm class on the <fieldset> to create a border under each <legend>.

Appearance
Identification Information
Contact Information
Source code
<form class="form-horizontal" role="form" method="get" action="#">
<fieldset class="legend-brdr-bttm">
	<legend>Identification Information</legend>
	<div class="form-group">
		<label for="inputFullName" class="col-sm-4 control-label">Full Name</label>
		<div class="col-sm-8">
		<input type="text" class="form-control" id="inputFullName" placeholder="Full Name" />
		</div>
	</div>
	<div class="form-group">
		<label for="dob" class="col-sm-4 control-label">Date of Birth<span  class="datepicker-format"> (YYYY-MM-DD)</span></label>
		<div class="col-sm-8">
		<input class="form-control" id="dob" name="dob" type="date" />
		</div>
	</div>
</fieldset>
<fieldset class="legend-brdr-bttm">
	<legend>Contact Information</legend>
	<div class="form-group">
		<label for="tel1" class="col-sm-4 control-label">Telephone number</label>
		<div class="col-sm-8">
		<input class="form-control" id="tel1" name="tel1" type="tel" />
		</div>
	</div>
	<div class="form-group">
		<label for="inputEmail3" class="col-sm-4 control-label">Email</label>
		<div class="col-sm-8">
		<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
		</div>
	</div>
</fieldset>
<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<button type="submit" class="btn btn-default">Sign in</button>
	</div>
</div>
</form>

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: