HTML Input Types Explained with Examples

HTML input types change how an input field works: text, email, password, number, date, color, range, file, checkbox, radio and more. See every type with examples.

Why HTML input types matter

The <input> element can become many different controls just by changing its type attribute. It is like one tool with many heads: the same handle can be a screwdriver, a hammer or a spanner.

Choosing the right type gives users a better experience for free. On phones, type="email" shows a keyboard with the @ key, and type="tel" shows a number pad. Some types also check the value for you, and others show a date picker or colour picker. If a browser doesn't know a type, it simply shows a normal text box, so it is always safe to use them.

HTML input types summary table

Type	What it is for	What the user sees
text	Short, single-line text like a name	A plain text box (this is the default)
email	An email address	Text box; checks for a valid email; @ keyboard on phones
password	A password	Text box that hides characters as dots
number	A number, like a quantity	Box with up and down arrows; number keyboard
tel	A phone number	Text box with a phone keypad on mobile
url	A web address	Text box that checks for a full URL like https://...
search	A search query	Text box, often with a clear (x) button
date	A date	A calendar date picker
time	A time of day	A time picker
datetime-local	A date and time together	A combined date and time picker
color	A colour	A colour picker swatch
range	A rough value on a scale	A slider
file	Uploading files	A "Choose file" button
checkbox	Yes/no or several choices	A small square to tick
radio	One choice from a group	A small circle to select
hidden	Data the user doesn't need to see	Nothing at all

Text-like input types: email, password, tel, url and search

These all look like normal text boxes, but each one helps in its own way.

<form action="/register" method="post">
  <p>
    <label for="username">Username</label><br>
    <input type="text" id="username" name="username">
  </p>
  <p>
    <label for="user-email">Email</label><br>
    <input type="email" id="user-email" name="email">
  </p>
  <p>
    <label for="user-password">Password</label><br>
    <input type="password" id="user-password" name="password">
  </p>
  <p>
    <label for="phone">Phone number</label><br>
    <input type="tel" id="phone" name="phone">
  </p>
  <p>
    <label for="website">Your website</label><br>
    <input type="url" id="website" name="website">
  </p>
  <p>
    <button type="submit">Create account</button>
  </p>
</form>

Try typing "hello" in the email field and clicking the button. The browser stops you and asks for an "@". The password field hides what you type. On a phone, the email, phone and website fields each show a different keyboard. Note that tel does not check the format, because phone numbers differ so much between countries.

Number, date, time, color and range

These types give users special controls instead of a plain text box. Use min, max and step to set limits.

<form action="/book-table" method="post">
  <p>
    <label for="guests">Number of guests</label><br>
    <input type="number" id="guests" name="guests" min="1" max="12" value="2">
  </p>
  <p>
    <label for="booking-date">Date</label><br>
    <input type="date" id="booking-date" name="date" min="2026-01-01">
  </p>
  <p>
    <label for="booking-time">Time</label><br>
    <input type="time" id="booking-time" name="time" min="12:00" max="22:00" step="900">
  </p>
  <p>
    <label for="napkin">Napkin colour (for parties)</label><br>
    <input type="color" id="napkin" name="napkin_colour" value="#2e8b57">
  </p>
  <p>
    <label for="spice">Spice level</label><br>
    <input type="range" id="spice" name="spice" min="0" max="5" value="2">
  </p>
  <p>
    <button type="submit">Book a table</button>
  </p>
</form>

The guest field has arrows and accepts 1 to 12. The date and time fields open pickers; step="900" means 900 seconds, so times go up in 15-minute steps. The colour field shows a green swatch that opens a colour picker. The range field is a slider from 0 to 5.

Note: Use type="number" only for real amounts, like a quantity or age. For things made of digits that you don't do maths with, such as card numbers or postcodes, use type="text" with inputmode="numeric". This shows a number keyboard without the arrows.

Common mistake: Using range when the exact value matters. A slider is hard to set precisely and doesn't show the number. Use it only when a rough value is fine, like volume or spice level.

File, hidden, checkbox and radio inputs

A file input lets users upload files. Add accept to suggest file types and multiple to allow more than one file. To send files, the form needs method="post" and enctype="multipart/form-data".

A hidden input sends a value the user doesn't see or change, such as an order number. Don't use it for secrets: anyone can see it in the page source.

Checkboxes are for "tick all that apply". Radio buttons are for "pick exactly one". You will learn to group them properly in the next lesson.

<form action="/apply" method="post" enctype="multipart/form-data">
  <input type="hidden" name="job_id" value="JOB-2041">

  <p>
    <label for="cv">Upload your CV (PDF or Word)</label><br>
    <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx">
  </p>

  <p>
    <input type="checkbox" id="remote" name="remote" value="yes">
    <label for="remote">I am open to remote work</label>
  </p>

  <p>
    <input type="radio" id="full-time" name="hours" value="full-time">
    <label for="full-time">Full time</label>
    <input type="radio" id="part-time" name="hours" value="part-time">
    <label for="part-time">Part time</label>
  </p>

  <p>
    <button type="submit">Apply now</button>
  </p>
</form>

You will see a file button, one checkbox and two radio buttons. Because both radio buttons share name="hours", choosing one un-selects the other. The hidden job_id is not visible but is sent with the form.

Practice exercise

Create a "Create your profile" form with these fields: display name (text), email, birthday (date), favourite colour (color), profile photo (file, images only) and a checkbox "Show my profile publicly". Give every field a label and a name.

Hint: For images only, use accept="image/*". Remember the enctype on the form when you upload files.

Key takeaways

• The type attribute turns <input> into many different controls.
• The right type gives better mobile keyboards and free checks, such as email and url.
• Use min, max and step with number, date, time and range.
• File uploads need method="post" and enctype="multipart/form-data".
• Unknown types fall back to a normal text box, so they are always safe to use.