Form Input Types

Code

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

Explanation

HTML5 adds native input types like email, date, range, and color that trigger appropriate keyboards and built-in validation. The required attribute enforces input, and accept/multiple control file selection. datalist provides autocomplete suggestions without a full select dropdown.

More HTML5 Snippets