HTML 5 cheatsheet

HTML 5: Forms

8 common HTML 5 tasks.

Build a form

Label every control. The for attribute matches the input's id.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Subscribe</button>
</form>

Choose an input type

The right type gives mobile users the right keyboard and built-in validation.

<input type="email">
<input type="tel">
<input type="url">
<input type="number" min="0" max="10">
<input type="date">
<input type="password" autocomplete="current-password">

Validate in the browser

Constrain input with built-in attributes. Always validate on the server too.

<input name="age" type="number" required min="18" max="120">
<input name="code" pattern="[A-Z]{3}" title="Three capital letters">

Add a dropdown

Offer a list of choices in a dropdown.

<label for="size">Size</label>
<select id="size" name="size">
  <option value="s">Small</option>
  <option value="m" selected>Medium</option>
</select>

Add radio buttons and checkboxes

Radio buttons that share a name allow one choice.

<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="checkbox" name="terms" required> I agree</label>

Add a multi-line field

Let users write longer text.

<textarea name="message" rows="5" maxlength="500"></textarea>

Group related fields

Group controls with a caption, which screen readers announce.

<fieldset>
  <legend>Shipping address</legend>
  <!-- inputs -->
</fieldset>

Accept a file upload

A form that uploads files needs the multipart encoding.

<form method="post" enctype="multipart/form-data">
  <input type="file" name="photo" accept="image/*">
</form>