Skip to content
HTML5

Form Input Types

Use native HTML5 input types, validation, and datalist.

#forms#input-types

Code

html5
<form>
  <label>Email: <input type="email" required></label>
  <label>URL: <input type="url"></label>
  <label>Number: <input type="number" min="0" max="100" step="5"></label>
  <label>Date: <input type="date"></label>
  <label>Time: <input type="time"></label>
  <label>Range: <input type="range" min="0" max="10" value="5"></label>
  <label>Color: <input type="color"></label>
  <label>Search: <input type="search"></label>
  <label>File: <input type="file" accept="image/*" multiple></label>

  <label>Datalist (suggestions):
    <input list="browsers" name="browser">
  </label>
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
  </datalist>

  <button type="submit">Submit</button>
</form>