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
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">
< for="defaultCheck1" label><input id="defaultCheck1" type="checkbox" value="">Option 1</label>
</div>
// Inline checkboxes:
<div class="checkbox-inline">
< for="inlineCheck1" label><input id="inlineCheck1" 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">
< for="radio1" label><input id="radio1" type="radio" name="optradio">Option 1</label>
</div>
// Inline radio buttons:
<div class="radio-inline">
< for="inlineRadio1" label><input id="inlineRadio1" 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
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">
< for="remember1" label><input id="remember1" 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">
< for="remember2" label><input id="remember2" 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">
< for="unchecked" label>
<input id="unchecked" 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
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: