Forms & User Input›Core· 40 min read

Input Types

One tag, many superpowers. Changing the input type gives you email keyboards, date pickers, sliders and more — for free.

What you will learn

Use the most common input types
Pick the right type for the right data
Make a field required

The type attribute changes everything

The same <input> tag behaves completely differently depending on its type. On phones it even changes the on-screen keyboard.

type	What the user gets
`text`	Plain single-line text
`email`	Text + email keyboard + checks for @
`password`	Hidden dots
`number`	Numbers only, with up/down arrows
`date`	A calendar date picker
`tel`	Phone keypad on mobile
`color`	A colour picker
`range`	A slider
`checkbox`	A single on/off tick box
`radio`	Pick one from a group
`file`	A file upload button

Try each one — especially on a phone

<form>
  <label>Name <input type="text" name="name"></label><br><br>
  <label>Email <input type="email" name="email"></label><br><br>
  <label>Age <input type="number" name="age" min="1" max="120"></label><br><br>
  <label>Birthday <input type="date" name="dob"></label><br><br>
  <label>Favourite colour <input type="color" name="colour"></label><br><br>
  <label>Volume <input type="range" name="vol" min="0" max="100"></label>
</form>

Live preview

Every line is the same <input> tag — only the type changes, and the browser gives you a different control for free: a plain text box, an email box, a number box with up/down arrows (min/max set its limits), a calendar date picker, a colour swatch you can click, and a slider for the range. On a phone the keyboard even changes to match each type.

Note: Output: A stacked form where each field looks different: a text box, an email box, a number spinner, a date picker, a colour swatch, and a draggable slider.

Making a field required

Often you want to force the visitor to fill a field in before they can submit. You do that by adding the single word required to the input. The little form below makes the email field compulsory:

Press Submit while empty to see the warning

<form>
  <label>Email (required) <input type="email" name="email" required></label>
  <button type="submit">Submit</button>
</form>

Live preview

Adding the single word required to the input means the browser will refuse to submit the form until that field is filled in — no JavaScript needed. Because the type is email, it also checks the value looks like a real email address.

Note: Output: If you press Submit while the box is empty, the browser pops up a “Please fill out this field” message and blocks the submission.

Q. Which input type shows a calendar picker?

Answer: type="date" gives a native date picker. type="time" exists too, but for a time of day, not a calendar date.

✍️ Practice

Build a form using at least five different input types.
Make two fields required and test the browser warning by submitting empty.

🏠 Homework

Design an event-registration form: name, email, number of guests, event date, and a required terms checkbox.