HTML5 input type

HTML5 has several new form input types. These new features provide better input control and validation.

This chapter provides a comprehensive introduction to 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

The color type is used in the input field and is mainly used to select colors, as shown below:

    php中文网(php.cn) 
选择你喜欢的颜色:

Run the program to try it


Input type: date

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

    php中文网(php.cn) 
生日:

Run the program to try it


Input type: datetime

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

Example

Define a date and time controller (local time):

    php中文网(php.cn) 
生日 (日期和时间):

Run the program to try it


Input type: datetime-local

The datetime-local type allows you to select a date and time (without time zone).

Example

Define a date and time (without time zone):

    php中文网(php.cn) 
生日 (日期和时间):

Run the program and try it


Input type: email

The email type is used for input fields that should contain e-mail addresses.

Example

When submitting the form, it will automatically verify whether the value of the email field is legal and valid:

    php中文网(php.cn) 
E-mail:

Run the program and enter a legal value Try it with an illegal email

Note: Internet Explorer 9 and earlier IE versions do not support type="email"


Input type: month

# The month type allows you to select a month.

Example

Define month and year (no time zone):

    php中文网(php.cn) 
生日 ( 月和年 ):

Run the program and try it


Input type: number

#number type is used for input fields that should contain numerical values.

You can also set limits on the numbers accepted:

Example

Define a numeric input field (limitation):

    php中文网(php.cn) 
数量 ( 1 到 5 之间):

Run the program and try it


Use the following attributes to specify the limit on the numeric type:

  • max- Requirement Maximum allowed value

  • min - specifies the minimum value allowed

  • step - specifies the legal number interval (if step="3", The legal numbers are -3, 0, 3, 6, etc.)

  • value - Specifies the default value

Example

Example with all qualified attributes

    php中文网(php.cn) 

Run the program to try it


Input type: range

The range type is used for input fields that should contain numeric values within a certain range.

Range types are displayed as sliders.

Example

Define a value that does not need to be very precise (similar to slider control):

    php中文网(php.cn) 
Points:

Run the program and try it


Please use the following attributes to specify limits on numeric types:

max - specifies the maximum value allowed

min - specifies the minimum value allowed

step - specifies the legal number interval

value - specifies the default value


Input type: search

search type is used for search fields, such as site search Or Google search.

Example

Define a search field (similar to site search or Google search):

    php中文网(php.cn) 
Search Google:

Run the program and try it


Input type: tel

##Example

Definition input phone Number field:

    php中文网(php.cn) 
电话号码:

Run the program to try it


Input type: time

The time type allows you to select a time.

Example

Define an input time controller (without time zone):

    php中文网(php.cn) 
选择时间:

Run the program and try it


Input type: url

The url type is used for input fields that should contain URL addresses.

When submitting the form, the value of the url field will be automatically verified.

Example

Define the input URL field:

    php中文网(php.cn) 
添加你的主页:

Run the program to try it


Input type: week

# The week type allows you to select the week and year.

Example

Define week and year (no time zone):

选择周:

Run the program and try it


HTML5 Tag

##
## Tag Description
Description input inputter

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.


Continuing Learning
||
php中文网(php.cn)
选择你喜欢的颜色:
submit Reset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!