HTML5’s new Input type
HTML5 has several new form input types. These new features provide better input control and validation.
This chapter provides an overview of these new input types:
Color
Date
Datetime
Datetime-local
Email
Month
Number
Range
search
Tel
Time
Url
Week
Note: not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.
Input type: color
color type is used in input fields are mainly used to select colors, as shown below:
Example
Select a color from the Color Picker:
Choose the color you like: <input type="color" name="favcolor">
Input type: date
date type allows you to select a date from a date selector.
Example
Define a time controller:
Birthday: <input type="date" name="bday">
Input type: datetime
datetime type allows you to select a date (UTC time).
Example
Define a date and time controller (local time):
Birthday (date and time): <input type="datetime" name="bdaytime">
Input type: datetime-local
datetime-local type allows you to select a date and time (no time zone).
Example
Define a date and time (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Input type: email
email type is used to contain the e-mail the input field of the address.
Example
Automatically validates when the form is submitted email whether the value of the field is valid:
E-mail: <input type="email" name="email">
Tip: Safari browsers in iPhone support email type and match it by changing the touchscreen keyboard (add @ and .com options).
Input type: month
month Ttype allows you to select a month.
Example
Define month and year (no time zone):
Birthday (date and time): <input type="month" name="bdaymonth">
Input type: number
number type is used for input fields that should contain numeric values.
You can also set limits on the numbers you accept:
Example
Define a numeric input field (qualified):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
Use the following properties to specify the qualification of the number type:
Attribute |
Description |
|---|---|
Disabled |
Specifies that the input field is disabled |
Max |
Specify the maximum allowable value |
Maxlength |
Specifies the maximum character length of the input field |
Min |
Specify the minimum allowable value |
Pattern |
Specify the mode used to validate the input field |
Readonly |
Specifies that the value of the input field cannot be modified |
Required |
Specify that the value of the input field is required |
Size |
Specifies the number of characters visible in the input field |
Step |
Specify the legal numeric interval of the input field |
Value |
Specify the default value for the input field |
Input type: range
range type is used for input fields that should contain a range of numeric values.
range the type is displayed as a slider.
Example
Define a value that does not need to be very precise (similar to slider control):
<input type="range" name="points" min="1" max="10">
Use the following properties to specify the qualification of the number type:
max-specify the maximum allowable valuemin-specify the minimum allowable valuestep-specify a legal number intervalvalue-specify default values
Input type: search
search type is used to search for domains, such as site search or Google search.
Example
Define a search field (similar to site search or Google search):
Search Google: <input type="search" name="googlesearch">
Input type: tel
Example
Define the input phone number field:
Phone number: <input type="tel" name="usrtel">
Input type: time
time type allows you to choose a time.
Example
Define an input time controller (no time zone):
Select Time: <input type="time" name="usr_time">
Input type: url
url type is used for input fields that should contain URL addresses.
Automatically validates when the form is submitted url the value of the field.
Example
Define the input URL field:
Add your homepage: <input type="url" name="homepage">
Tip: Safari browsers in iPhone support url type and match it by changing the touchscreen keyboard (add .com options).
Input type: week
week type allows you to choose week and year.
Example
Define week and year (no time zone):
Select week: <input type="week" name="week_year">
HTML5 < input > tag
Label |
Description |
|---|---|
< input > |
Describe the input importer |