HTML5 Input Types
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
 | Not all browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. |
|---|
Input Type: color
The color type is used for input fields that should contain a color.
Example
Select a color from a color picker:
Select your favorite color: <input type="color" name="favcolor">
Try it yourself »
Input Type: date
The date type allows the user to select a date.
Input Type: datetime
The datetime type allows the user to select a date and time (with time zone).
Example
Define a date and time control (with time zone):
Birthday (date and time): <input type="datetime" name="bdaytime">
Try it yourself »
Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time zone).
Example
Define a date and time control (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Try it yourself »
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Example
Define a field for an e-mail address (will be automatically validated when submitted):
E-mail: <input type="email" name="email">
Try it yourself »
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type: month
The month type allows the user to select a month and year.
Example
Define a month and year control (no time zone):
Birthday (month and year): <input type="month" name="bdaymonth">
Try it yourself »
Input Type: number
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
Example
Define a numeric field (with restrictions):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Try it yourself »
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Try an example with all the restriction attributes: Try it yourself
Input Type: range
The range type is used for input fields that should contain a value from a range of numbers.
You can also set restrictions on what numbers are accepted.
Example
Define a control for entering a number whose exact value is not important (like a slider control):
<input type="range" name="points" min="1" max="10">
Try it yourself »
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Input Type: search
The search type is used for search fields (a search field behaves like a regular text field).
Example
Define a search field (like a site search, or Google search):
Search Google: <input type="search" name="googlesearch">
Try it yourself »
Input Type: tel
The tel type is used for input fields that should contain a telephone number.
Example
Define a field for entering a telephone number:
Telephone: <input type="tel" name="usrtel">
Try it yourself »
Input Type: time
The time type allows the user to select a time.
Example
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time">
Try it yourself »
Input Type: url
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Example
Define a field for entering a URL:
Add your homepage: <input type="url" name="homepage">
Try it yourself »
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input Type: week
The week type allows the user to select a week and year.
Example
Define a week and year control (no time zone):
Select a week: <input type="week" name="week_year">
Try it yourself »
HTML5 <input> Tag
| Tag | Description |
|---|---|
| <input> | Defines an input control |
Posting Komentar untuk "HTML5 Input Types"