Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

  • Special Publication:  Public Website Visual Style Guide
  • August 2015

Forms

When customizing or creating new web forms use the form templates below to make sure they meet federal accessibility guidelines.

HTML Tags, Styled

Button - Reset <input type="reset">

Output

Code

<div>
<input type="reset">
</div>

Button - Submit <input type="submit">

Output

Code

<div>
<input type="submit">
</div>

Checkbox <input type="checkbox">

Output

Label to describe all checkbox options:

Code

<div>
<p>Label to describe all checkbox options:</p>
<label><input type="checkbox">Checkbox 1</label>
<label><input type="checkbox">Checkbox 2</label>
<label><input type="checkbox">Checkbox 3</label>
</div>

Fieldset <fieldset>

Output
Fieldset with Legend

Code

<fieldset>
<legend>Fieldset with Legend</legend>
</fieldset>

Input - Color <input type="color">

Output

Code

<div>
<label>Color:</label>
<input type="color">
</div>

Input - Date <input type="date">

Output

Code

<div>
<label>Date:</label>
<input type="date">
</div>

Input - Date/Time <input type="datetime">

Output

Code

<div>
<label>Local Date & Time:</label>
<input type="datetime-local">
</div>

Input - Date/Time - Local <input type="datetime-local">

Output

Code

<div>
<label>Local Date & Time:</label>
<input type="datetime-local">
</div>

Input - Email <input type="email">

Output

Code

<div>
<label>Email:</label>
<input type="email">
</div>

Input - File <input type="file">

Output

Code

<div>
<label>File:</label>
<input type="file">
</div>

Input - Image <input type="image">

Output

Code

<div>
<label>Image:</label>
<input type="image">
</div>

Input - Month <input type="month">

Output

Code

<div>
<label>Month:</label>
<input type="month">
</div>

Input - Number <input type="number">

Output

Code

<div>
<label>Number:</label>
<input type="number">
</div>

Input - Password <input type="password">

Output

Code

<div>
<label>Password:</label>
<input type="password">
</div>

Input - Range <input type="range">

Output

Code

<div>
<label>Range:</label>
<input type="range">
</div>

Input - Search <input type="search">

Output

Code

<div>
<label>Search:</label>
<input type="search">
</div>

Input - Telephone <input type="tel">

Output

Code

<div>
<label>Telephone:</label>
<input type="tel">
</div>

Input - Time <input type="time">

Output

Code

<div>
<label>Time:</label>
<input type="time">
</div>

Input - URL <input type="url">

Output

Code

<div>
<label>URL:</label>
<input type="url">
</div>

Radio Buttons <input type="radio">

Output

Label to describe all radio buttons:

Code

<div>
<p>Label to describe all radio buttons:</p>
<label><input type="radio">Radio 1</label>
<label><input type="radio">Radio 2</label>
<label><input type="radio">Radio 3</label>
</div>

Select Menu <select>

Output

Code

<div>
<label>Label:</label>
<select class="chosen-select">
<optgroup label="Optgroup Label">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
</select>
</div>

Text Area Input <textarea>

Output

This is helper text using the .help-block class.

Code

<div>
<label>Text Area:</label><br>
<textarea placeholder="Placeholder text"></textarea>
<p class="help-block">This is helper text using the <code>.help-block</code> class.</p>
</div>

Form Code Patterns

Basic Feedback Form <form>

Output


Code

<form>
<div class="form-field-required">
<label for="n_first">Name</label>
<input type="text" class="input-small" id="n_first" placeholder="First" required="required"> <input type="text" class="input-tiny" id="n_middle" placeholder="M.I."> <input type="text" class="input-small" id="n_family" placeholder="Last" required="">
</div>
<div>
<label for="org">Organization</label>
<input type="text" class="input-medium" id="org">
</div>
<div class="form-field-required">
<label for="email">Email</label>
<input type="email" class="input-medium" id="email" required="">
</div>
<div class="form-field-required">
<label for="comment">Message</label>
<textarea class="input-xl" id="comment" required=""></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Search Form <form role="search">

Output

Code

<div class="search-bar">

<form role="search">

<input type="search" placeholder="Enter Search">

<input type="submit" value="Search">

</form>

</div>

Helper Classes

Listed alphabetically by class name.

Form Helper Classes
Class Description
.checkbox-inline Displays checkboxes horizontally
.form-field-required Use for required form fields; places a red asterisk after the input label
.help-block For displaying helper text near a form element
.input-xl Sets the width of an input field to 100% of the width of its container
.input-large Sets the width of an input field to 75% of the width of its container
.input-medium Sets the width of an input field to 50% of the width of its container
.input-small Sets the width of an input field to 25% of the width of its container
.input-tiny Sets the width of an input field to 12% of the width of its container
.input-nano Sets the width of an input field to 6% of the width of its container
.radio-inline Displays radio buttons horizontally