HTML · The document layer
Why does the input type matter?
Short answer
Choose the input type that matches the data, such as email, tel, url, number, date or checkbox. The type drives mobile keyboards, built-in validation and assistive technology behaviour.
Using type=text for everything throws away free browser behaviour. The right type can show a numeric keypad, validate an address or expose a date picker without extra JavaScript.
<input type="email" name="email" autocomplete="email" required />
<input type="tel" name="phone" autocomplete="tel" />
<input type="url" name="website" />
<input type="number" name="quantity" min="1" max="10" />
<input type="date" name="start" />
<input type="checkbox" name="terms" />
<input type="radio" name="plan" value="pro" />What each type buys you
- email gives basic shape validation and an email keyboard
- tel gives a phone keypad but does not validate the format, which varies by country
- number is for numeric values, not for things like ZIP codes or card numbers
- date and time types expose native pickers and value formats
- checkbox and radio provide native checked state and grouping
- file provides a secure file picker that cannot be prefilled
Some types such as number and date have inconsistent UI across browsers. Test the experience, and use inputmode when you want a keyboard hint without the constraints of a specific type.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1When would you use inputmode instead of type=number?
- 2Why is type=tel not validated automatically?
- 3Why should a card number not use type=number?
- 4Which input type should a file upload use?
Say it in the interview
The input type is a signal to the browser about the kind of data expected. It changes the mobile keyboard, enables built-in validation, and exposes the right semantics to assistive technology. I use email, tel, url, date and checkbox where they fit, but I avoid number for values like phone numbers or card numbers because formatting and leading zeros can break. When I only want a keyboard hint, I use inputmode.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.