In HTML, multiple types of inputs can be used in forms to capture different kinds of user data. Here are the most common input types:
Input types |
Description |
---|---|
Text |
Text (type="text"): Single-line text input. |
Password |
Password (type="password"): Hides the entered text. |
|
Email (type="email"): Ensures email format validation. |
Select |
Select (dropdown) for selecting options |
Textarea |
Textarea for multi-line text input |
Radio |
Radio (type="radio"): Single-choice selection from a group. |
Checkbox |
Checkbox (type="checkbox"): For multiple-choice selections. |
Number |
Number (type="number"): For numeric input, with min and max attributes. |
Range |
Range (type="range"): Input for numeric values via a slider. |
Submit |
Submit (type="submit"): A button that submits the form data. |
Reset |
Reset (type="reset"): A button that resets the form fields to their default values. |
File |
File (type="file"): Input for file uploads. |
Text (type="text"): Single-line text input.
Try it yourself
Password (type="password"): Hides the entered text.
Try it yourself
Email (type="email"): Ensures email format validation.
Try it yourself
Select (dropdown) (<select>) for selecting options
Try it yourself
Textarea (<textarea>) for multi-line text input
Try it yourself
Radio (type="radio"): Single-choice selection from a group.
Try it yourself
Checkbox (type="checkbox"): For multiple-choice selections.
Try it yourself
Number (type="number"): For numeric input, with min and max attributes.
Try it yourself
Range (type="range"): Input for numeric values via a slider.
Try it yourself
Submit (type="submit"): A button that submits the form data.
Reset (type="reset"): A button that resets the form fields to their default values.
Input types
|
Description
|
---|---|
Tel
|
Tel (type="tel"): Input for phone numbers (no built-in validation).
|
Color
|
Color (type="color"): Input for selecting a color.
|
Search
|
Search (type="search"): Input for search queries.
|
URL
|
URL (type="url"): Input for URLs.
|
Hidden
|
Hidden (type="hidden"): Hidden input field for including data in form submissions without showing it to the user.
|
Image
|
Image (type="image"): A submit button that includes an image.
|
Date
|
Date (type="date"): Input for selecting a date.
|
Month
|
Month (type="month"): Input for selecting a month and year.
|
Week
|
Week (type="week"): Input for selecting a week.
|
Time
|
Time (type="time"): Input for selecting time.
|
Datetime-local
|
Datetime-local (type="datetime-local"): Input for selecting both date and time.
|
Tel (type="tel"): Input for phone numbers (no built-in validation).
Try it yourself
Color (type="color"): Input for selecting a color.
Try it yourself
Date (type="date"): Input for selecting a date.
Try it yourself
Month (type="month"): Input for selecting a month and year.
Try it yourself
Week (type="week"): Input for selecting a week.
Try it yourself
Time (type="time"): Input for selecting time.
Datetime-local (type="datetime-local"): Input for selecting both date and time.
Try it yourself
Image (type="image"): A submit button that includes an image.
Try it yourself
Search (type="search"): Input for search queries.
Try it yourself
URL (type="url"): Input for URLs.
Try it yourself
Hidden (type="hidden"): Hidden input field for including data in form submissions without showing it to the user.
Try it yourself
Try it yourself