Mozilla Design System

Forms

Use meaningful markup like lists and paragrapgs to give forms a logical structure. A form control should almost always be paired with a useful label.

Text input

Text

HTML


<label for="text">Text</label>
<input type="text" name="text" id="text">

Input with placeholder

Field placeholders should show an example of the expected input, such as suggested search terms or a demonstration of a correctly formatted email address. The placeholder attribute should not be used as a substitute for a label.

E-mail

HTML


<label for="email">E-mail</label>
<input type="email" name="email" id="email" placeholder="you@example.com">

Text area

HTML


<label for="textarea">Text area</label>
<textarea name="textarea" id="textarea" row="4" cols="60"></textarea>

Radio buttons

Radio buttons represent a set of options where only one may be selected.

Radio one Radio two

HTML


<label for="radio1"><input type="radio" name="radio" id="radio1"> Radio one</label>
<label for="radio2"><input type="radio" name="radio" id="radio2"> Radio two</label>

Checkboxes

Checkboxes represent a set of options where multiple selections are allowed.

Also use a checkbox for a binary choice (such as a yes or no question) rather than two radio buttons. A radio button, once activated, cannot be deactivated, whereas a single checkbox behaves as a switch to let a user toggle between the two states (you can uncheck a checked checkbox).

Checkbox

HTML


<label for="check"><input type="checkbox" name="check" id="check"> Checkbox</label>

Select

HTML


<label for="select">Select</label>
<select name="select" id="select">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
</select>

Fieldset with legend

Use fieldset to group related fields together. Include a legend as a title.

Your name

Given name Family name

HTML


<fieldset>
<legend>Your name</legend>
<p>
<label for="name-given">Given name</label> <input type="text" id="name-given" name="givenname">
<label for="name-family">Family name</label> <input type="text" id="name-family" name="familyname">
</p>
</fieldset>