HTML5 new Input type

html form has always been one of the core technologies of the web. With it, various applications can be carried out on the web. HTML5's input has added many new control types to facilitate our form verification.

opera has the best support for new attributes. It is not supported by ie10 and below, and is partially supported by other mainstream browsers.

New Input Type

color

// Google Open supports
// Display colors for selection, and submit the value in octal

1013.png

Note:When you click on the black box, a color selection box will pop up for you to choose.

date

// Google OPEN Apple support
// Provide date selection

1015.png

Note: When you click on the black lower triangle symbol, the following date selection box will pop up for you to select a date. Other new time types also use this style.

datetime

// OPEN Apple support
// Provide time and date selection

datetime-local

// Supported by Google OPEN and Apple
// Date and time without time zone

email

// Supported by Firefox and Google OPEN
// When submitting, it will automatically verify whether the value is legal
< input type="email" name="email">

1008.jpg

month

// Google Apple Open support
// Date without time zone

number

// Supported by high version IE, Google Open, Apple
// Limit number
// max maximum min minimum step interval value default

1012.png

Note: There are two increase and decrease icons on the right.

range

// Supported by higher versions of IE, Google, OPEN and Apple
// Random numbers, slider control
// Parameters are the same as number
< ;input type="range" name="points" min="1" max="10">

1014.png

##search

// Google Apple support

// Search domain


tel

// None supported



time

// Supported by Google, Apple and OPEN

// Time controller


url

// High version IE Firefox Google Europe Peng supports

// Verify url when submitting


1007.jpg##week

// Supported by Google and Apple OPEN

// Define week and year (no time zone)




Shows a current browser's support for these inputsInput type IE FF Opero Chrome

search Not supported Not supported Not supported Not supported

number Not supported Not supported 9.0 or above Not supported

range Not supported Not supported 9.0 or above 4.0 or above

color Not supported Not supported Not supported Not supported

tel Not supported Not supported Above 9.0 Not supported

url Not supported Not supported Above 9.0 Not supported

email Not supported Not supported Above 9.0 Not supported

Time No Supported Not supported 9.0 or above Not supported

Instance 1:

    php.cn 
Points:

注意: Internet Explorer 9 及更早IE版本不支持 type="range"。

Instance 2:

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

注意:Internet Explorer 9 及更早IE版本不支持 type="number" 。


Example 3:

    php.cn 
选择周:

Continuing Learning
||
php.cn

主页:
邮箱:
生日:
时间:
星期:
年龄:
薪水:
电话:
颜色:

submit Reset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!