HTML5 Input type
May 03, 2021 HTML5
Table of contents
HTML5's new Input type
You should have understood the HTML form input types in this web site's HTML tutorial, and in this section, we'll cover some of the new form types in HTML5!
HTML5 has several new form input types. These new features provide better input control and validation.
This chapter provides a comprehensive overview of these new input types:
- color
- date
- Datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- Url
- week
Note: Not all major browsers support new input types, but you can already use them in all major browsers. Even if not supported, it can still appear as a regular text field.
Input type: color
The color type used in the input field is primarily used to select colors, as follows:
Select a color from the color picker:
Try it out . . .
Input type: date
The date type allows you to select a date from a date selector.
Input type: datetime
The datetime type allows you to select a date (UTC time).
Define a date and time controller (local time):
Try it out . . .
Input type: datetime-local
The datetime-local type allows you to select a date and time (no time zone).
Define a date and time (no time zone):
Try it out . . .
Input type: email
The e-mail type is used for input fields that should contain e-mail addresses.
When you submit a form, the value of the email field is automatically verified to be valid:
Try it out . . .
Tip: Safari in your iPhone supports email input types and works with it by changing the touch-screen keyboard (add the options for .com and you).
Input type: month
The month type allows you to select a month.
Define month and year (no time zone):
Try it out . . .
Input type: number
The number type is used for input fields that should contain values.
You can also set a limit on the numbers you accept:
Define a numeric input field (qualified):
Try it out . . .
Use the following properties to define the limit for the type of number:
- max - specifies the maximum allowed
- min - specifies the minimum allowed
- step - specifies a legal numeric interval (the legal number is -3,0,3,6, etc.) if step is "3")
- value - specifies the default value
Try an example with all the qualified properties Try
Input type: range
The range type is used for input fields that should contain a range of numeric values.
The range type appears as a slider.
Define a value that does not require very precision (similar to slider control):
Try it out . . .
Use the following properties to define the limit for the type of number:
- max - specifies the maximum allowed
- min - specifies the minimum allowed
- step - specifies a legal digital interval
- value - specifies the default value
Input type: search
The search type is used for search domains, such as site search or Google search.
Define a search field (similar to site search or Google search):
Try it out . . .
Input type: tel
Input type: time
The time type allows you to select a time.
Define an inputable time controller (no time zone):
Try it out . . .
Input type: url
The url type is used for input fields that should contain URL addresses.
When you submit a form, the value of the url field is automatically verified.
Tip: Safari in your iPhone supports url input types and works with it by changing the touchscreen keyboard (add .com options).
Input type: Week
The week type allows you to select weeks and years.
HTML5 . . .
| Label | describe |
|---|---|
| <input> | Describe the Input input |
Extended reading
Input talk: HTML5's Input type