Input Types

The <input> element changes completely depending on its type. The right type gives users a suitable control — a date picker, a colour picker, a numeric keypad on phones — and gives you free validation. This lesson tours all of them.

Text-like inputs

<p><label for="t1">Text</label> <input id="t1" type="text" name="title"></p>
<p><label for="t2">Email</label> <input id="t2" type="email" name="email" placeholder="you@example.com"></p>
<p><label for="t3">Password</label> <input id="t3" type="password" name="pw" autocomplete="current-password"></p>
<p><label for="t4">Phone</label> <input id="t4" type="tel" name="phone"></p>
<p><label for="t5">Website</label> <input id="t5" type="url" name="site" placeholder="https://"></p>
<p><label for="t6">Search</label> <input id="t6" type="search" name="q"></p>

Result

type	Behaviour
`text`	Default single-line text
`email`	Validates email format; phones show an @ key
`password`	Hides characters; password managers recognise it
`tel`	Phone keypad on mobile (no format validation — phone formats vary)
`url`	Validates a URL; keyboard with "/" and ".com"
`search`	Search field, often with a clear button

Numbers and ranges

number shows a numeric field with spin buttons and validates min, max and step. range shows a slider — fine when the exact value doesn't matter much. For things like card numbers or postcodes that are digits but not quantities, use type="text" with inputmode="numeric" instead (lesson 28).

Dates and times

Browsers show a native picker, and the submitted value is always in a standard format (2026-10-06, 14:30) regardless of how it's displayed to the user. step="900" on the time input means 15-minute increments.

Choices: checkboxes and radio buttons

<fieldset>
  <legend>Toppings</legend>
  <label><input type="checkbox" name="topping" value="cheese" checked> Cheese</label>
  <label><input type="checkbox" name="topping" value="olives"> Olives</label>
</fieldset>
<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s"> Small</label>
  <label><input type="radio" name="size" value="m" checked> Medium</label>
  <label><input type="radio" name="size" value="l"> Large</label>
</fieldset>

Result

Colour, file and hidden

color opens a colour picker and submits a hex value.
file lets users choose files. accept filters the file picker, multiple allows several, and capture can open the camera on phones. The form needs method="post" and enctype="multipart/form-data" to upload files.
hidden sends a value the user doesn't see — like a tracking source or an ID. Users can still inspect and change it, so never trust it for security.

Buttons as inputs

type="submit", type="reset", type="button" and type="image" create buttons. The <button> element is more flexible — it can contain HTML like icons — and is generally preferred (lesson 31).

Unsupported types fall back to text

If a browser doesn't recognise a type, it shows a plain text field. That makes the specialised types safe to use: older browsers still work, just without the extras.

Choosing the right type

You want…	Use
An email address	`type="email"`
A quantity or amount	`type="number"`
A credit card, postcode or one-time code	`type="text"` + `inputmode="numeric"` + `autocomplete`
A birthday or booking date	`type="date"`
One choice from 2–5 options	Radio buttons
One choice from many options	`<select>` (lesson 30)
Yes/no or several independent options	Checkboxes

Try it yourself

<form>
  <h3>Book a table</h3>
  <p><label for="b-date">Date</label> <input id="b-date" type="date" name="date" required></p>
  <p><label for="b-time">Time</label> <input id="b-time" type="time" name="time" min="12:00" max="22:00" step="1800" required></p>
  <p><label for="b-guests">Guests</label> <input id="b-guests" type="number" name="guests" min="1" max="8" value="2"></p>
  <p><label><input type="checkbox" name="outdoor"> Outdoor seating</label></p>
  <button type="submit">Book</button>
</form>

Result

PreviousForms NextForm Attributes