Home › HTML Masterclass › Forms & Inputs
Module 7: Modern InputsIntermediate

29. Modern HTML5 Inputs (date, time, color, range, file)

Calendar picker, colour picker, slider bar and file uploader

Real-life analogy

A colour picker is like a paint box, and a range slider is like a fan regulator that can be turned from 1 to 5!

Explanation

Modern interactive input types of HTML5:

type="date": Opens a built-in calendar popup.
type="time": Opens a clock and AM/PM popup.
type="color": Opens a digital colour palette.
type="range": A slider bar (with min, max).
type="file": Uploading a photo/PDF from the computer.

Golden rules

  • Always set min and max on a range input.

Common mistake

Adding a heavy JavaScript plugin for a calendar, when type='date' is already built into HTML5.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px; font-size: 13px;">
  <form>
    <label>Choose a favourite colour:</label><br>
    <input type="color" value="#10b981" style="margin: 4px 0 10px 0;"><br>

    <label>Volume slider (0 to 100):</label><br>
    <input type="range" min="0" max="100" value="70" style="margin: 4px 0 10px 0;"><br>

    <label>Date of birth calendar:</label><br>
    <input type="date" style="padding: 4px; border: 1px solid #cbd5e1; border-radius: 4px;">
  </form>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which input type is used to let a user pick a colour on a website?

  1. type="palette"
  2. type="color"
  3. type="paint"
  4. type="rgb"
Show answer

Answer: type="color"

type='color' opens the browser's built-in colour picker.

← All 38 lessons