HTML Input Types Reference
The <input> element's type attribute determines the appearance and behavior of the input field. HTML provides 20+ input types covering text, numeric, date, selection, button, and other scenarios.
Text Input Types
Text input types are used to collect various forms of textual information:
type="text"— Default type, single-line text inputtype="password"— Password input, characters are maskedtype="email"— Email address, auto-validates format, mobile keyboards show @type="tel"— Telephone number, mobile keyboards show numeric keypadtype="url"— URL input, auto-validates URL formattype="search"— Search box, some browsers show a clear button
Example
HTML
<form>
<label>Username: <input type="text" name="username" placeholder="Enter username"></label><br>
<label>Password: <input type="password" name="password" placeholder="At least 6 characters"></label><br>
<label>Email: <input type="email" name="email" placeholder="you@example.com"></label><br>
<label>Phone: <input type="tel" name="phone" placeholder="13800138000"></label><br>
<label>Website: <input type="url" name="website" placeholder="https://"></label><br>
<label>Search: <input type="search" name="q" placeholder="Search keywords"></label>
</form>
Numeric Input Types
Numeric input types let users select or enter numbers and color values:
type="number"— Number input, can restrictmin,max,steptype="range"— Slider selector, returns a numeric valuetype="color"— Color picker, returns a hexadecimal color value
Example
HTML
<form>
<label>Quantity (1-10): <input type="number" name="qty" min="1" max="10" value="1"></label><br>
<label>Volume: <input type="range" name="volume" min="0" max="100" value="50"></label><br>
<label>Theme Color: <input type="color" name="theme" value="#ff6600"></label>
</form>
<!-- range and number sync (requires JS) -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
const slider = document.getElementById('slider');
const num = document.getElementById('numDisplay');
slider.addEventListener('input', () => num.value = slider.value);
num.addEventListener('input', () => slider.value = num.value);
</script>
Date and Time Input Types
Date and time input types let users quickly pick dates through a calendar or time picker:
type="date"— Date picker (year-month-day)type="time"— Time picker (hour:minute)type="datetime-local"— Local date + timetype="month"— Month picker (year-month)type="week"— Week picker (year-week)
Example
HTML
<form>
<label>Date: <input type="date" name="date"></label><br>
<label>Time: <input type="time" name="time"></label><br>
<label>Date + Time: <input type="datetime-local" name="datetime"></label><br>
<label>Month: <input type="month" name="month"></label><br>
<label>Week: <input type="week" name="week"></label>
</form>
Selection Input Types
Selection input types let users pick from multiple options:
type="checkbox"— Checkbox, allows multiple selectionstype="radio"— Radio button, only one can be selected pernamegrouptype="file"— File upload, useacceptto restrict file types
Example
HTML
<form>
<p>Hobbies (multiple selections allowed):</p>
<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="music"> Music</label>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
<p>Gender (single selection):</p>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<p>Upload avatar (images only):</p>
<input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>
Button Input Types
Button input types are used to trigger form actions:
type="submit"— Submit button, sends form data to the servertype="reset"— Reset button, restores form controls to their initial valuestype="button"— Generic button, requires JavaScript to be functionaltype="image"— Image button, functions like submit but uses an image instead of text
Example
HTML
<form action="/submit" method="post">
<label>Name: <input type="text" name="name"></label><br>
<!-- Submit button -->
<input type="submit" value="Submit Form">
<!-- Reset button -->
<input type="reset" value="Reset">
<!-- Generic button -->
<input type="button" value="Click Me" onclick="alert('Hello!')">
<!-- Image button -->
<input type="image" src="btn-submit.png" alt="Submit">
</form>
Hidden and Special Inputs
type="hidden" fields are not displayed on the page but are submitted with the form. They are commonly used for passing metadata such as user IDs and CSRF tokens:
Example
HTML
<form action="/update-profile" method="post">
<!-- Invisible to users, but submitted with the form -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">
<label>Nickname: <input type="text" name="nickname"></label>
<input type="submit" value="Save">
</form>
💡 Note: Hidden inputs are commonly used to pass user IDs, tokens, and other data that users don't need to see. However, this data is still visible to users (view the source code). Therefore, never use hidden fields to store sensitive information — real security validation should be done server-side.
Complete Input Type Reference Table
| Type | Description | Common Attributes |
|---|---|---|
text |
Single-line text | placeholder, maxlength, pattern |
password |
Password (masked display) | placeholder, maxlength |
email |
Email address | placeholder, multiple |
tel |
Telephone number | placeholder, pattern |
url |
URL / web address | placeholder |
search |
Search box | placeholder |
number |
Numeric input | min, max, step |
range |
Range slider | min, max, step |
color |
Color picker | — |
date |
Date picker | min, max, step |
time |
Time picker | min, max, step |
datetime-local |
Local date + time | min, max |
month |
Month picker | min, max |
week |
Week picker | min, max |
checkbox |
Checkbox (multi-select) | checked |
radio |
Radio button | checked |
file |
File upload | accept, multiple |
submit |
Submit button | value, formaction |
reset |
Reset button | value |
button |
Generic button | value, onclick |
image |
Image button | src, alt |
hidden |
Hidden field | value |
❓ FAQ
Q Why use
email, tel, url types instead of just text?A Semantic input types offer three benefits: 1) Mobile devices show context-appropriate keyboards (
email shows @ symbol, tel shows numeric keypad); 2) Browsers auto-validate format (e.g., email must contain @); 3) Screen readers tell users "this is an email field," improving accessibility. While text works, using the correct type provides a better user experience.Q What about
date type inconsistency across browsers?A This is a known issue with HTML5 date pickers — Chrome, Firefox, and Safari each have different UIs. Solutions: 1) Accept differences and rely on native browser experience; 2) Use a JavaScript date library (like flatpickr) for unified UI; 3) Use
text type with JavaScript validation for full customization. Recommendation: if design consistency matters, use option 2 or 3; for native experience, use option 1.Q What's the difference between
number and range? When should I use each?A
number is for precise numeric input — users can type exact values, ideal for quantities, ages, prices. range is a slider — users can only slide within a range, ideal for volume, brightness, ratings where precision isn't critical. Both support min, max, step to limit range. Common pattern: use range for rough adjustment, number for fine-tuning, and link them together.Q Is
hidden type secure? Can users see it?A
hidden inputs don't appear on the page, but users can see their values via "View Source" or DevTools. Never store passwords, API keys, or sensitive info in hidden. Its proper use is passing user IDs, CSRF tokens, session identifiers, and other metadata. Security principle: never trust any client-side data — real security validation must happen server-side.📖 Summary
<input type="— >has 20+ types, categorized by use: text, numeric, date, selection, button, and hidden- Text types: text, password, email, tel, url, search
- Numeric types: number (precise), range (slider), color (color picker)
- Date types: date, time, datetime-local, month, week
- Selection types: checkbox (multi-select), radio (single-select), file (upload)
- Button types: submit, reset, button (generic), image
- Special: hidden (hidden field for passing metadata)
📝 Exercises
- Registration Form: Create a "Sign Up" form containing 5+ input types:
text(username),email,password,date(birthday),radio(gender),checkbox(hobbies),file(avatar upload),submit, andreset. - Range Sync: Create a range slider and a number input that sync their values in real time. Range: 0—100, step: 5.