HTML Input Types
1. Introduction
HTML5 expanded the <input> element to over 20 types — each providing built-in validation, appropriate mobile keyboards, and better user experience without any JavaScript. Choosing the right input type is one of the highest-impact accessibility and UX improvements you can make. This lesson covers every commonly used input type with practical examples.
2. Concept
Input Types by Category
| Category | Types | Key Behaviour |
|---|---|---|
| Text | text, email, password, search, url, tel | Keyboard hints on mobile; email validates format |
| Numeric | number, range | Numeric keyboard; min/max/step attributes |
| Date/Time | date, time, datetime-local, month, week | Native date pickers in most browsers |
| Selection | checkbox, radio | Boolean/grouped selection |
| File/Media | file, color | File picker or colour swatch UI |
| Hidden/Submit | hidden, submit, reset, button, image | No UI (hidden); or form submission triggers |
Note: The
type attribute tells the browser how to validate and present the input. Older browsers that do not recognise a type fall back to type="text", so functionality degrades gracefully.Tip: Always use
type="email" for email fields, not type="text". Mobile keyboards will show an @-symbol keyboard, and the browser enforces basic email format validation automatically.Warning: The
type="number" input strips leading zeros and can behave unexpectedly with postal codes and phone numbers. Use type="text" with inputmode="numeric" and pattern="[0-9]*" for those instead.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Types Demo</title>
</head>
<body>
<form action="/demo" method="post">
<label for="username">Username (text)</label>
<input type="text" id="username" name="username">
<label for="user-email">Email</label>
<input type="email" id="user-email" name="email">
<label for="pass">Password</label>
<input type="password" id="pass" name="password" minlength="8">
<label for="age">Age</label>
<input type="number" id="age" name="age" min="16" max="120" step="1">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
<label for="fav-color">Favourite Colour</label>
<input type="color" id="fav-color" name="color" value="#3b82f6">
<label for="volume">Volume: <output id="vol-out">50</output></label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"
oninput="document.getElementById('vol-out').textContent = this.value">
<label>
<input type="checkbox" name="newsletter" value="yes">
Subscribe to newsletter
</label>
<fieldset>
<legend>Preferred contact</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>
<label for="upload">Upload CV</label>
<input type="file" id="upload" name="cv" accept=".pdf,.doc,.docx">
<button type="submit">Submit</button>
</form>
</body>
</html>
4. How It Works
Step 1 — Text-Based Types
type="email" triggers format validation (requires @ and domain). type="password" masks characters. type="search" may show a clear button in some browsers.
Step 2 — Range and Number
min, max, and step constrain numeric inputs. The range renders as a slider. The <output> element displays the live slider value when wired via oninput.
Step 3 — Checkboxes and Radio Buttons
Checkboxes are independent boolean controls. Radio buttons sharing the same name form a group — only one can be selected at a time. The submitted value is from the value attribute of the selected radio.
Step 4 — File Input and accept
type="file" opens the OS file picker. The accept attribute filters what file types the picker shows. Add multiple to allow selecting several files at once.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
</head>
<body>
<h1>Apply for Software Engineer</h1>
<form action="/apply" method="post" enctype="multipart/form-data">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full_name" autocomplete="name" required>
<label for="app-email">Email Address</label>
<input type="email" id="app-email" name="email" autocomplete="email" required>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" autocomplete="tel" pattern="[+0-9\s\-]{7,20}">
<label for="website">Portfolio / GitHub URL</label>
<input type="url" id="website" name="portfolio">
<label for="start-date">Earliest Start Date</label>
<input type="date" id="start-date" name="start_date" min="2025-04-01">
<label for="salary">Expected Annual Salary (£)</label>
<input type="number" id="salary" name="salary" min="30000" max="200000" step="1000">
<fieldset>
<legend>Work Type Preference</legend>
<label><input type="radio" name="work_type" value="remote" required> Remote</label>
<label><input type="radio" name="work_type" value="hybrid"> Hybrid</label>
<label><input type="radio" name="work_type" value="onsite"> On-site</label>
</fieldset>
<label for="cv-upload">Upload CV (PDF or Word)</label>
<input type="file" id="cv-upload" name="cv" accept=".pdf,.doc,.docx" required>
<button type="submit">Submit Application</button>
</form>
</body>
</html>
6. Common Mistakes
❌ Using type=”text” for phone numbers — no numeric keyboard on mobile
<input type="text" name="phone">✓ Use type=”tel” for the numeric phone keyboard on mobile
<input type="tel" name="phone" autocomplete="tel">❌ Radio buttons with different name values in the same group
<input type="radio" name="size-small" value="small"> Small
<input type="radio" name="size-large" value="large"> Large✓ Radio buttons in the same group share the same name
<input type="radio" name="size" value="small"> Small
<input type="radio" name="size" value="large"> Large7. Try It Yourself
8. Quick Reference
| type | Best For | Key Extra Attributes |
|---|---|---|
text |
General single-line text | maxlength, pattern, autocomplete |
email |
Email addresses | Built-in @ format validation |
password |
Secret values | minlength, autocomplete="current-password" |
number |
True numeric values | min, max, step |
date |
Calendar date selection | min, max |
file |
File uploads | accept, multiple |
checkbox |
Boolean toggle | checked, value |
radio |
Mutually exclusive choices | Shared name, unique value |