Forms

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

Text input 

<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.

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

Radio Buttons

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

<label for="radio-1">
  <input type="radio" name="radios" id="radio-1"> Option 1
</label>
<label for="radio-2">
  <input type="radio" name="radios" id="radio-2"> Option 2
</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).

<label for="checkbox-1">
  <input type="checkbox" name="checkboxes" id="checkbox-1"> Option 1
</label>
<label for="checkbox-2">
  <input type="checkbox" name="checkboxes" id="checkbox-2"> Option 2
</label>

Select 

<label for="language">
  Language</label>
<select name="language" id="language">
  <option value="en-US">English (US)</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
  <option value="es-ES">Español</option>
  <option value="ja">日本語</option>
</select>

Textarea 

<label for="textarea">
  Text area</label>
<textarea name="textarea" id="textarea" rows="3" cols="40"></textarea>

Fieldset with legend

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

Your name 

<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>