HTML5 Input Types
HTML5 New Input Types
HTML5 has several new form input types. These new features provide better input control and validation.
This chapter describes these comprehensive new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Note: Not all of the major browsers support the new input types, but you can already use them in all major browsers.If not supported, it can still appear as regular text fields.
Input Type: color
color used in the input field type is mainly used to select the color, as follows:
Examples
Choose a color from the color picker:
try it"
Input Type: date
date type allows you to select a date from a date picker.
Input Type: datetime
datetime type allows you to select a date (UTC time).
Examples
Define a date and time controller (local time):
try it"
Input Type: datetime-local
datetime-local type allows you to select a date and time (no time zone).
Examples
Define a date and time (no time zone):
try it"
Input Type: email
email type is used for input fields should contain e-mail addresses.
Examples
When the form is submitted, it will automatically verify whether the value valid email domain:
try it"
Tip: iPhone in Safari browser supports email input type, and by changing the touch screen keyboard to match it (add @ and .com options).
Input Type: month
month type allows you to select a month.
Examples
Defined month and year (no time zone):
try it"
Input Type: number
number type is used for input fields should contain a value.
You can also set to accept limited numbers:
Examples
Define a numeric input field (Limited):
try it"
Use the following property to specify the type of digital Limited:
- The maximum allowed by regulations max-
- min - the minimum allowed by regulations
- step - specifies the legal number intervals for (if step = "3", legal numbers could be -3,0,3,6, etc)
- value - the default value specified
Try an example with all defined attributes try
Input Type: range
range type is used for input fields should contain a range of numeric values.
range type is displayed as a slider.
Examples
You do not need to define a very precise value (like a slider control):
try it"
Please use the following attributes to specify the type of digital Limited:
- max - the maximum allowed by regulations
- min - the minimum allowed by regulations
- step - specifies the legal number intervals for
- value - the default value specified
Input Type: search
search type for the search field, such as site search or Google search.
Examples
Define a search field (similar to site search or Google search):
try it"
Input Type: tel
Input Type: time
time type allows you to select a time.
Examples
Defines input time controller (no time zone):
try it"
Input Type: url
url type is used for input fields should contain a URL address.
When the form is submitted, it will automatically verify the value of the url field.
Tip: iPhone in Safari browser supports url input type, and by changing the touch screen keyboard to match it (add .com option).
Input Type: week
week allows you to select the type of week and year.
Examples
Definitions week and year (no time zone):
try it"
HTML5 <input> tag
标签 | 描述 |
---|---|
<input> | 描述input输入器 |