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
• email
• 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:

选择你喜欢的颜色: <input type="color" name="favcolor">

try it"

Input Type: date

date type allows you to select a date from a date picker.

Examples

Define a time controller:

生日: <input type="date" name="bday">

try it"

Input Type: datetime

datetime type allows you to select a date (UTC time).

Examples

Define a date and time controller (local time):

生日 (日期和时间): <input type="datetime" name="bdaytime">

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):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

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:

E-mail: <input type="email" name="email">

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):

生日 (月和年): <input type="month" name="bdaymonth">

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):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

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):

<input type="range" name="points" min="1" max="10">

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):

Search Google: <input type="search" name="googlesearch">

try it"

Input Type: tel

Examples

Enter the phone number field is defined:

电话号码: <input type="tel" name="usrtel">

try it"

Input Type: time

time type allows you to select a time.

Examples

Defines input time controller (no time zone):

选择时间: <input type="time" name="usr_time">

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.

Examples

Define the input field URL:

添加您的主页: <input type="url" name="homepage">

try it"

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):

选择周: <input type="week" name="week_year">

try it"

HTML5 <input> tag