HTML Input Types
HTML Input Types
The <input> element in HTML supports different types to collect specific kinds of user data. The type attribute defines the behavior of the input field.
Common Input Types
| Type | Description | Example |
|---|---|---|
text |
Single-line text input | <input type="text" name="username"> |
password |
Hidden text for passwords | <input type="password" name="pwd"> |
email |
Email address with validation | <input type="email" name="email"> |
number |
Numeric input | <input type="number" name="age" min="1" max="100"> |
tel |
Telephone number | <input type="tel" name="phone"> |
url |
URL input | <input type="url" name="website"> |
date |
Date picker | <input type="date" name="dob"> |
time |
Time picker | <input type="time" name="appt"> |
color |
Color picker | <input type="color" name="favcolor"> |
checkbox |
Select multiple options | <input type="checkbox" name="hobby" value="reading"> |
radio |
Select one option | <input type="radio" name="gender" value="male"> |
file |
File upload | <input type="file" name="upload"> |
submit |
Submit form | <input type="submit" value="Submit"> |
reset |
Reset form fields | <input type="reset" value="Reset"> |
hidden |
Hidden field | <input type="hidden" name="userid" value="123"> |
range |
Slider input | <input type="range" min="0" max="100"> |
search |
Search input | <input type="search" name="query"> |
month |
Month selector | <input type="month" name="birthmonth"> |
week |
Week selector | <input type="week" name="weeknum"> |
datetime-local |
Date and time | <input type="datetime-local" name="appointment"> |
Example HTML Form Using Multiple Input Types
Key Points
-
Use the appropriate input type to improve user experience and validation.
-
HTML5 input types like
email,date,color,range, etc., enable native browser controls. -
Combined with attributes like
required,min,max,pattern, they improve form accuracy and accessibility.
