HTML Basic Tutorial
HTML Media
HTML Advanced Tutorial
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