Module 6: Forms · Lesson 3 of 7
HTML Input Types: email, number, date, password, tel
All lessons in Module 6
Goal: Choose the input type that fits each kind of answer.
Learn
One <input> becomes a whole range of controls through its type attribute. Picking the right type costs nothing and buys you a lot. Phones show a matching keyboard, browsers add pickers, and some basic checks run by themselves.
| type | What you get |
|---|---|
text | Plain single-line text (the default) |
email | A keyboard with @, and a check for a real-looking address |
password | Hidden characters |
number | Number keyboard and up/down arrows; min and max set limits |
date | A calendar picker |
tel | A phone keypad |
A browser that doesn't know a type falls back to text without a word. Trying a better type can't break the form. The full list is in the type attribute section of the HTML standard (opens in a new tab).
The short version
- The
typeof an<input>decides its keyboard, its picker and its built-in checks. - A type the browser doesn't recognise, misspelled or new, falls back to
textwith no error message. - Use
type="number"for quantities you count or measure, withminandmaxas limits. type="tel"changes the keyboard and nothing more. It never checks the phone number format.
Example
<form>
<label for="pw">Password</label>
<input type="password" id="pw" name="pw">
<label for="day">Pick a day</label>
<input type="date" id="day" name="day">
<button>Save</button>
</form>Your task
Every box in the party RSVP form is a plain text box. Give each one a better type:
- Make the email box
type="email". - Make the guests box
type="number", withmin="1"andmax="5". - Make the arrival box
type="date".
Now type hello in the email box and click Send RSVP. The browser should object.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<label for="phone">Phone</label>
<input type="number" id="phone" name="phone">Right
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">Nobody adds up phone numbers, and a number input adds spin arrows and rejects the plus signs and spaces people type in them.
Wrong
<input type="e-mail" id="email" name="email">Right
<input type="email" id="email" name="email">With a typo in the type you get a plain text box, and the @ keyboard and the address check vanish with no warning at all.
Go deeper
A date input shows its picker in the visitor's own language and date format. A British user may see 14/03/2026 and an American 03/14/2026. The value sent is always in one format, YYYY-MM-DD from the ISO 8601 date standard (opens in a new tab), so the server receives 2026-03-14 in both cases. Write min and max for dates in that format too: min="2026-01-01".
Number inputs hide a rule. step defaults to 1, so a value like 2.5 counts as invalid. Add step="0.5" or step="any" when decimals are allowed.
If you want a different on-screen keyboard and no change in behaviour, use the lighter inputmode attribute. Its values include numeric, decimal, email and tel.
Pair each type with an autocomplete value, such as type="email" autocomplete="email" or type="tel" autocomplete="tel". Phones can then fill the field in one tap, and the form gets done noticeably faster. To compare types, attributes and autocomplete values side by side, try HTMLInput, a generator for accessible input fields (opens in a new tab).
Frequently asked questions
What input types are there in HTML?
The HTML standard lists 22 values for type. Text-like ones are text, email, password, search, tel and url. For numbers and time there are number, range, date, time, datetime-local, month and week. The rest are color, checkbox, radio, file, hidden, submit, reset, button and image. The input reference describes each one in a line or two.
How do I make an input accept only numbers in HTML?
It depends on whether the number is an amount. For amounts, use type="number" with min and max, plus step for decimals (step="0.01" suits prices). Digit codes such as a PIN or a postal code are not amounts. Give them type="text" with inputmode="numeric" for a number keypad, and a pattern to check the format, as in the form validation lesson.
Does type="email" check that an email address really exists?
No. The browser checks only the shape: some text, an @, then a domain, as in [email protected]. Whether the mailbox exists, or is spelled right, it has no way of knowing. Sites that need a real address send a confirmation email with a link. The official rules for email address syntax (opens in a new tab) are far looser than most people expect. Still, the built-in check catches obvious slips like a missing @.