HTML Input Types: text, email, password, number, date, checkbox, radio and More

The <input> element creates many different controls. Its type attribute decides which one. Choosing the right type gives users the right keyboard on phones, built-in pickers, and free validation.

Text-like inputs#

<p><label>Name <input type="text" name="name"></label></p>
<p><label>Email <input type="email" name="email"></label></p>
<p><label>Password <input type="password" name="password"></label></p>
<p><label>Phone <input type="tel" name="phone"></label></p>
<p><label>Website <input type="url" name="site"></label></p>
<p><label>Search <input type="search" name="q"></label></p>

(In these examples the <input> is placed inside its <label>, which also connects them. The next lesson covers both styles.)

Useful attributes#

<input type="text" name="city" value="Pune" placeholder="Your city" maxlength="40">

Numbers and ranges#

<p><label>Tickets <input type="number" name="tickets" min="1" max="10" step="1" value="1"></label></p>
<p><label>Volume <input type="range" name="volume" min="0" max="100" value="40"></label></p>

• number shows up and down buttons, and min, max and step limit the values.
• range shows a slider. Use it when the exact value is not important.

Do not use type="number" for things that are not really amounts, such as phone numbers, PIN codes or card numbers. Use type="text" with inputmode="numeric" to get a number keyboard without number behaviour such as removing leading zeros.

Dates, times and colours#

<p><label>Date <input type="date" name="date"></label></p>
<p><label>Time <input type="time" name="time"></label></p>
<p><label>Date and time <input type="datetime-local" name="when"></label></p>
<p><label>Month <input type="month" name="month"></label></p>
<p><label>Colour <input type="color" name="colour" value="#2f5fe0"></label></p>

Browsers show their own pickers for these types, so they look different in each browser. The submitted value always uses a fixed format, such as 2026-11-14 for a date, whatever the user's display format is.

Checkboxes and radio buttons#

<p>Toppings:</p>
<label><input type="checkbox" name="topping" value="cheese" checked> Cheese</label>
<label><input type="checkbox" name="topping" value="olives"> Olives</label>

<p>Size:</p>
<label><input type="radio" name="size" value="small"> Small</label>
<label><input type="radio" name="size" value="medium" checked> Medium</label>
<label><input type="radio" name="size" value="large"> Large</label>

• Checkboxes are independent: tick any number.
• Radio buttons with the same name form a group: only one can be selected.
• value is what gets submitted. Without it, a ticked box sends the value on.
• checked selects an option at the start.

Files and hidden values#

<label>Upload your CV <input type="file" name="cv" accept=".pdf,.docx"></label>
<input type="hidden" name="source" value="careers-page">

• file opens the system file picker. accept suggests file types and multiple allows several files. To upload files, the form needs method="post" and enctype="multipart/form-data".
• hidden sends a value the user cannot see or change in the page. It is still visible in the page source, so it is not for secrets.

Practice#

<form action="/book" method="post">
  <p><label>Date <input type="date" name="date"></label></p>
  <p><label>Time <input type="time" name="time"></label></p>
  <p><label>People <input type="number" name="people" min="1" max="12" value="2"></label></p>
  <p>
    <label><input type="radio" name="seating" value="indoor" checked> Indoor</label>
    <label><input type="radio" name="seating" value="outdoor"> Outdoor</label>
  </p>
  <button type="submit">Book</button>
</form>

Key takeaway#