Detailed explanation
HTML5 introduced input types that describe the kind of data a form expects, rather than treating every value as plain text. Important examples are email, url, tel, search, number, range, color, date, time, datetime-local, month, and week. Older types such as text, password, checkbox, radio, file, hidden, submit, reset, button, and image are also useful, but were not introduced by HTML5. In an interview, naming the types is a starting point; explaining their behaviour and choosing them appropriately demonstrates practical understanding.
For contact details, email performs basic email-format checking, while url checks for a valid absolute URL. Neither proves that an address exists or that a website is reachable. The tel type represents telephone numbers but does not enforce a universal phone-number format because formats differ internationally. Search behaves much like text, although browsers may provide search-specific styling or a clear control. On mobile devices, these types can suggest suitable keyboards, but the exact keyboard depends on the browser and operating system.
For numeric data, number supports constraints such as min, max, and step; for example, <input type="number" min="1" max="10"> expects a number within that range. Range usually renders a slider and suits approximate choices such as volume. Color provides a colour-selection interface. Date and time types offer specialised entry controls: date captures a calendar date, time captures a time of day, and datetime-local captures both without a time zone. Month and week represent a month or an ISO week. Their interface and support vary across browsers, and displayed formatting can differ from the underlying value format.
Under the hood, the browser uses the type and attributes such as required, pattern, min, max, and step to apply relevant constraint-validation rules. An empty email field remains valid unless required is present; <input type="email" required> checks both presence and basic syntax during normal interactive submission. Unsupported types generally fall back to text. These features reduce custom JavaScript, but they do not replace server-side validation because requests can bypass browser checks. Always provide an associated label and a name when the value should be submitted.
Key points to remember
- HTML5 types include email, url, tel, search, number, range, color, date, time, datetime-local, month, and week.
- Checkbox, radio, text, and password predate HTML5.
- Types provide semantic meaning, specialised controls, and possible mobile-keyboard improvements.
- Validation depends on the type and applicable attributes; tel does not automatically validate phone-number formats.
- Browser support varies, and all submitted data still requires server-side validation.
Common mistakes candidates make
- Claiming that every HTML5 input type automatically validates its contents or always shows a specific keyboard.
- Using number for phone numbers, PIN codes, or identifiers where leading zeros and formatting matter.
- Assuming browser validation guarantees trustworthy data or that datetime-local includes a time zone.
Likely follow-up questions
What is the difference between number and range?
Number is appropriate when users need to enter an exact numeric value, such as a quantity. Range usually provides a slider for selecting within bounds, making it better for approximate settings such as volume.
How would you handle a phone-number field?
Use type="tel" because a phone number is an identifier, not a quantity for arithmetic. Add clear format guidance and, where appropriate, a pattern constraint, then validate and normalise the value on the server.
What happens when a browser does not support an input type?
An unrecognised input type generally falls back to a text field. The specialised picker and type-specific validation may be unavailable, so essential functionality should not depend solely on them.
Interview tip: Group the types by purpose, illustrate two with short HTML examples, and finish by noting browser differences and the need for server-side validation.