Toggle navigation

Blocks

Forms

Forms should be clear and simple. Only ask for information you absolutely need.

  • They should be organized in a logical manner.
  • Provide clear instructions about what information is desired.
  • If you ask for optional information, mark the labels of optional fields with '(optional)'
  • Do not mark mandatory fields with asterisks.

Read the official Bootstrap documentation for forms.

Default form

Example block-level help text here.

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

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.

If you use helper text below an input, make sure you add an aria-describedby on the input so the helper text is annouced.

Use the WAI-ARIA role="form".

A form landmark should also have a label to help users understand the purpose of the form (e.g. login or contact ).

View the W3C Form Landmark example.

If you use helper text below an input, make sure you add an aria-describedby on the input so the helper text is annouced.

Example:

<label for="email-address">Email address:</label>
<input type="email" name="email-address" id="email-address" aria-describedby="helper-email-address">
<span id="helper-email-address">Must be a valid email address. Example: user@domain.com</span>

Top of page

Horizontal form

Your email will be used to log in. 
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="em12" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="em12">
            <span class="help-block">Your email will be used to log in.</span>
        </div>
    </div>
    <div class="form-group">
        <label for="n12" class="col-sm-2 control-label required">Name</label>
        <div class="col-sm-10">
            <input required aria-required="true" type="text" class="form-control" id="n12">
        </div>
    </div>
    <div class="form-group">
        <label for="ci12" class="col-sm-2 control-label required">City</label>
        <div class="col-sm-10">
            <input required aria-required="true" type="email" class="form-control" id="ci12">
        </div>
    </div>
    <div class="form-group">
        <label for="si12" class="col-sm-2 control-label required">State</label>
        <div class="col-sm-10">
            <select required aria-required="true" id="si12" class="form-control">
                <option>AL</option>
                <option>AK</option>
                <option>AZ</option>
                <option>AR</option>
                <option>CA</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Shipping</label>
        <div class="col-sm-10">
            <div class="radio">
                <label><input type="radio" name="opr2" id="opr21" value="option1" checked>UPS</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="opr2" id="opr22" value="option2">FedEx</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="opr2" id="opr23" value="option3">USPS</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Send me notifications via email
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Single select</label>
        <div class="col-sm-10">
            <select id="single" class="form-control">
                <optgroup label="Alaskan/Hawaiian Time Zone">
                    <option value="AK">Alaska</option>
                    <option value="HI">Hawaii</option>
                </optgroup>
                <optgroup label="Pacific Time Zone">
                    <option value="CA">California</option>
                    <option value="NV">Nevada</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                </optgroup>
                <optgroup label="Mountain Time Zone">
                    <option value="AZ">Arizona</option>
                    <option value="CO">Colorado</option>
                </optgroup>
                <optgroup label="Central Time Zone">
                    <option value="AL">Alabama</option>
                    <option value="AR">Arkansas</option>
                    <option value="IL">Illinois</option>
                </optgroup>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Multiselect</label>
        <div class="col-sm-10">
            <select id="multiple" class="form-control" multiple>
                <optgroup label="Alaskan/Hawaiian Time Zone">
                    <option value="AK">Alaska</option>
                    <option value="HI">Hawaii</option>
                </optgroup>
                <optgroup label="Pacific Time Zone">
                    <option value="CA">California</option>
                    <option value="NV">Nevada</option>
                    <option value="OR">Oregon</option>
                    <option value="WA">Washington</option>
                </optgroup>
                <optgroup label="Mountain Time Zone">
                    <option value="AZ">Arizona</option>
                    <option value="CO">Colorado</option>
                </optgroup>
                <optgroup label="Central Time Zone">
                    <option value="AL">Alabama</option>
                    <option value="AR">Arkansas</option>
                    <option value="IL">Illinois</option>
                </optgroup>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-charcoal pull-right ">Submit</button>
        </div>
    </div>
</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 (which doesn't have to be a <form>). Doing so changes form-groups to behave as grid rows, so no need for row.

Use the WAI-ARIA role="form".

A form landmark should also have a label to help users understand the purpose of the form (e.g. login or contact ).

View the W3C Form Landmark example.

If you use helper text below an input, make sure you add an aria-describedby on the input so the helper text is annouced.

Example:

<label for="email-address">Email address:</label>
<input type="email" name="email-address" id="email-address" aria-describedby="helper-email-address">
<span id="helper-email-address">Must be a valid email address. Example: user@domain.com</span>

Top of page

Inline form

<form class="form-inline" role="search" aria-label="Course">
    <div class="form-group">
        <label for="CourseSearchTypeList" class="sr-only">Course level</label>
        <select class="form-control" id="CourseSearchTypeList">
            <option value="allcourses">Select course level...</option>
            <option value="undergraduate">Undergraduate</option>
            <option value="postgraduate">Postgraduate (taught)</option>
            <option value="researchdegree">Postgraduate (research)</option>
            <option value="foundationcourse">Foundation course</option>
            <option value="foundationdegree">Foundation degree</option>
            <option value="professionalshort">Professional/Short course</option>
            <option value="internationalpathways">International Preparation</option>
            <option value="partners">Courses with partner colleges</option>
        </select>
    </div>
    <div class="form-group">
        <label for="CourseSearchTerm" class="sr-only">Course search keywords</label>
        <input type="text" class="form-control" id="CourseSearchTerm" placeholder="Search by keyword">
    </div>
    <input type="submit" value="GO" class="btn btn-pink text-uppercase">
</form>

Add form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Use the WAI-ARIA role="search" when the form is used for search functionality.

Be sure to include an aria-label that describes the scope of the search (i.e., site, course, notes, etc.).

Don't use words like 'Go' or 'Submit' for search button text, when the word Search is better.

If you use helper text below an input, make sure you add an aria-describedby on the input so the helper text is annouced.

Example:

<label for="email-address">Email address:</label>
<input type="email" name="email-address" id="email-address" aria-describedby="helper-email-address">
<span id="helper-email-address">Must be a valid email address. Example: user@domain.com</span>

Top of page

Search form

Search enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.

<form class="form-inline" role="search" aria-label="Site">
    <div class="form-group">
        <label for="txtSearch" class="sr-only">Search for:</label>
        <div class="input-group">
            <input type="text" id="txtSearch" class="form-control" placeholder="Search">
            <span class="input-group-btn">
                <input type="submit" name="btnGo" value="Search" class="btn btn-charcoal">
            </span>
        </div>
    </div>
</form>

Use an input-group to group <input>s together.

Use the WAI-ARIA role="search" when the form is used for search functionality.

A form landmark should also have a label to help users understand the purpose of the form (e.g. login or contact ).

View the W3C Form Landmark example.

Don't use words like 'Go' or 'Submit' for search button text, when the word Search is better.

If you use helper text below an input, make sure you add an aria-describedby on the input so the helper text is annouced.

Example:

<label for="email-address">Email address:</label>
<input type="email" name="email-address" id="email-address" aria-describedby="helper-email-address">
<span id="helper-email-address">Must be a valid email address. Example: user@domain.com</span>

Top of page

Changelog

Added Updates Current version Accessibility Status
31 August 2016 N/A 1.0.0 Accessible Current

Top of page