Goal
You’ll be able to choose the correct input type for a given kind of data, and understand how built-in HTML validation attributes reduce the need for custom validation code.
Learn
The <input> element’s type attribute does much more than change visual appearance — it changes real browser behavior, including which on-screen keyboard mobile devices show, and what built-in validation the browser performs automatically:
type="text"— plain text, no special validation.type="email"— validates a basic email-like format automatically, and mobile devices show an @ symbol on the keyboard.type="number"— restricts input to numeric values, often with up/down stepper controls.type="tel"— no format validation (phone formats vary too widely globally), but mobile devices show a numeric phone keypad.type="password"— masks the input visually as the user types.
Beyond type, several attributes add further built-in validation with zero JavaScript required:
<input type="email" required> <input type="text" minlength="3" maxlength="20"> <input type="number" min="1" max="100"> <input type="text" pattern="[A-Za-z]+">
required prevents form submission until the field has a value. minlength/maxlength constrain text length. min/max constrain numeric range. pattern takes a regular expression for custom format validation. All of these trigger the browser’s own built-in validation messages automatically, without needing custom JavaScript for these common cases.
Decision Task
A form needs a phone number field. Before reading on: should this use type=”tel” with a strict pattern enforcing one specific format, or a looser approach — and why does phone number formatting specifically complicate this choice?
Show Answer
type=”tel” is correct for the mobile keyboard benefit, but a strict pattern enforcing one specific format is usually a mistake — phone number formats vary enormously across countries and personal preference (dashes, spaces, parentheses, country codes), so tel intentionally has no built-in format validation by default, leaving format flexibility up to the developer’s judgment rather than assuming one universal format.
Common Mistake
Using type=”text” for every input regardless of actual data type, missing out on both the mobile keyboard optimization and the free built-in validation that more specific types and attributes provide. This isn’t just a missed convenience — it means reimplementing validation logic in JavaScript that the browser would have handled automatically with the correct type and attributes.
Practice Questions
1. Write an input for an age field that only accepts numbers between 18 and 100.
Show Answer
<input type="number" min="18" max="100">
2. Why does type=”email” reduce the amount of custom validation code a developer needs to write?
Show Answer
The browser automatically validates a basic email-like format and blocks submission if it’s not met, without needing custom JavaScript for that common case.
3. A username field must be between 3 and 15 characters. Write the input attributes enforcing this.
Show Answer
minlength="3" maxlength="15" added to the input.
4. True or False: type=”tel” automatically validates that the entered value is a correctly formatted phone number.
Show Answer
False — tel intentionally has no built-in format validation, since valid phone formats vary too widely globally; it mainly affects which mobile keyboard is shown.
5. What does the required attribute do specifically?
Show Answer
Prevents the form from being submitted until that field has a value, triggering the browser’s built-in validation message if left empty.
Try It Yourself
Without looking back, write an input for a coupon code field that must be exactly uppercase letters, required, using the pattern attribute.
Show Answer
<input type="text" pattern="[A-Z]+" required> — pattern takes a regular expression; [A-Z]+ means one or more uppercase letters only.
Quick Check
1. Does the input type attribute only affect visual appearance?
Show Answer
No — it also affects mobile keyboard type shown and built-in browser validation behavior.
2. What does the required attribute enforce?
Show Answer
The field must have a value before the form can be submitted.
3. What attribute constrains a number input’s allowed range?
Show Answer
min and max.
4. Why doesn’t type=”tel” enforce a specific phone number format by default?
Show Answer
Because valid phone number formats vary too widely across countries and conventions to enforce one universal pattern.
5. What does the pattern attribute accept as its value?
Show Answer
A regular expression defining the required text format.