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 Select a color from the Color Picker: Define a time controller: Define a date and time controller (local time): Define a date and time (no time zone): Automatically validates when the form is submitted Tip: Safari browsers in iPhone support Define month and year (no time zone): You can also set limits on the numbers you accept: Define a numeric input field (qualified): 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 Define a value that does not need to be very precise (similar to slider control): Use the following properties to specify the qualification of the number type: Define a search field (similar to site search or Google search): Define the input phone number field: Define an input time controller (no time zone): Automatically validates when the form is submitted Define the input URL field: Tip: Safari browsers in iPhone support Define week and year (no time zone): Label Description < input > Describe the input importer
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. 11.40.1. Input type: color ¶
color
type is used in
input
fields are mainly used to select colors, as shown below:
Example ¶
Choose the color you like: <input type="color" name="favcolor">
11.40.2.
Input
type:
date
¶
date
type allows you to select a date from a date selector. 
Example ¶
Birthday: <input type="date" name="bday">
11.40.3. Input type: datetime ¶
datetime
type allows you to select a date (UTC time). 
Example ¶
Birthday (date and time): <input type="datetime" name="bdaytime">
11.40.4. Input type: datetime-local ¶
datetime-local
type allows you to select a date and time (no time zone). Example ¶
Birthday (date and time): <input type="datetime-local" name="bdaytime">
11.40.5. Input type: email ¶
email
type is used to contain the
e-mail
the input field of the address. 
Example ¶
email
whether the value of the field is valid:E-mail: <input type="email" name="email">
email
type and match it by changing the touchscreen keyboard (add
@
and
.com
options). 11.40.6. Input type: month ¶
month
Ttype allows you to select a month. Example ¶
Birthday (date and time): <input type="month" name="bdaymonth">
11.40.7. Input type: number ¶
number
type is used for input fields that should contain numeric values. Example ¶
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
11.40.8. 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 ¶
<input type="range" name="points" min="1" max="10">
max
-specify the maximum allowable value
min
-specify the minimum allowable value
step
-specify a legal number interval
value
-specify default values 11.40.9. Input type: search ¶
search
type is used to search for domains, such as site search or
Google
search.
Example ¶
Search Google: <input type="search" name="googlesearch">
11.40.10. Input type: tel ¶
Example ¶
Phone number: <input type="tel" name="usrtel">
11.40.11. Input type: time ¶
time
type allows you to choose a time. Example ¶
Select Time: <input type="time" name="usr_time">
11.40.12. Input type: url ¶
url
type is used for input fields that should contain URL addresses.
url
the value of the field. Example ¶
Add your homepage: <input type="url" name="homepage">
url
type and match it by changing the touchscreen keyboard (add
.com
options). 11.40.13. Input type: week ¶
week
type allows you to choose week and year. Example ¶
Select week: <input type="week" name="week_year">
11.40.14. HTML5 < input > tag ¶