An official website of the United States government
Here’s how you know
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
Expand or close the following content.Button - Reset <input type="reset">
Output
Code
<div><inputtype="reset"></div>
Expand or close the following content.Button - Submit <input type="submit">
Output
Code
<div><inputtype="submit"></div>
Expand or close the following content.Checkbox <input type="checkbox">
Output
Label to describe all checkbox options:
Code
<div><p>Label to describe all checkbox options:</p><label><inputtype="checkbox">Checkbox 1</label><label><inputtype="checkbox">Checkbox 2</label><label><inputtype="checkbox">Checkbox 3</label></div>
Expand or close the following content.Fieldset <fieldset>
Output
Code
<fieldset><legend>Fieldset with Legend</legend></fieldset>
Expand or close the following content.Input - Color <input type="color">
Expand or close the following content.Input - Time <input type="time">
Output
Code
<div><label>Time:</label><inputtype="time"></div>
Expand or close the following content.Input - URL <input type="url">
Output
Code
<div><label>URL:</label><inputtype="url"></div>
Expand or close the following content.Radio Buttons <input type="radio">
Output
Label to describe all radio buttons:
Code
<div><p>Label to describe all radio buttons:</p><label><inputtype="radio">Radio 1</label><label><inputtype="radio">Radio 2</label><label><inputtype="radio">Radio 3</label></div>
Expand or close the following content.Select Menu <select>
Expand or close the following content.Text Area Input <textarea>
Output
This is helper text using the .help-block class.
Code
<div><label>Text Area:</label><br><textareaplaceholder="Placeholder text"></textarea><pclass="help-block">This is helper text using the <code>.help-block</code> class.</p></div>
Form Code Patterns
Expand or close the following content.Basic Feedback Form <form>
