HTML Input Types

Understand the topic

The input type selects an appropriate control and may enable browser validation or a suitable mobile keyboard. Common types include text, email, password, search, url, tel, number, date, checkbox, radio, range, color, and file. Browser presentation varies. A tel input does not enforce a universal telephone format, and a password field hides characters without encrypting the connection.

Worked example

<p><label for="contact-email">Email</label><br><input id="contact-email" type="email" name="email"></p>
<p><label for="seats">Seats</label><br><input id="seats" type="number" name="seats" min="1" max="6" step="1" value="1"></p>
<p><label for="day">Preferred day</label><br><input id="day" type="date" name="day"></p>

The number control restricts ordinary valid values to one through six in whole steps. Date display follows browser locale, while its submitted value uses a standardized format.

Practice

Choose an input type for a telephone number and explain why number is usually unsuitable.

<input type="tel" name="phone" autocomplete="tel">
Phone numbers are identifiers, can start with zero, and may contain + or separators; they are not quantities for arithmetic.

Common mistake

Do not use type="number" for postal codes, payment card numbers, or identifiers merely because they contain digits.

HTML documentation