Input HarborISSUE #5 of 46

input types · number · range · date · time

FormaVSCaptain Invalid Input

Forma saysNumber and date inputs — number, range, date, time, datetime-local — give native pickers and numeric controls.

type="number" gives a spinner and numeric keyboard with min, max, step. type="range" is a slider for the same. date, time, and datetime-local pop a native picker so users never type a date in the wrong format.

These save you from building custom widgets and from parsing messy free-text dates. The submitted value is always a clean, predictable format.

Power-ups you unlock

number → spinner + min/max/step · range → slider
date / time / datetime-local → native pickers
Native pickers guarantee a clean value format
min/max/step constrain and validate input

Captain Invalid Input attacks — common mistakes

Using text inputs for dates and parsing endless formats
Forgetting step on number (decimals may be rejected)
Assuming date input UI looks the same in every browser

Boss battleAdd a number input (min 0, max 10, step 2), a range slider, and a date picker. Note how each constrains its value.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>qty <input type="number" min="0" max="10" step="2" value="0"></label></p>
    <p><label>vol <input type="range" min="0" max="100"></label></p>
    <p><label>day <input type="date"></label></p>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Input Types · Text · Password · Email · Url Input Types · Checkbox · Radio · File ›