Band of Brothers HTML5 Tutorial HTML5 form a variety of input type 1

d61d7f4610964cc1a1a6531ff9724daf.jpg

 

HTML5 new form has a plurality of input types, new features provide better control and validation input. Not all the main browsers support new input types, but we can use them in all major browsers, even if not supported, you can still appear as regular text fields. HTML5 Input Type Table.

Table HTML5 Input Types

 

b4e004315735432daeba9f6ccc3f0a4b.jpg

 

1  email

type of email for an email address field contains the input, when submitted automatically email verification value field is used as follows:

18a0068990414e2991ea9129c5a6cf97.jpg

The code is verified email mailbox format input box, if the error will be prompted. Results shown in Figure 1:

04d402cf0b464ab5992a2b8eeedc87b8.jpg

FIG 1 email input type

 

2  url

type of email url domain comprises an input address, when the form is submitted, it will automatically verify the value of the url field is used as follows:

0405c6175ff44778a72320d1959c9ee2.jpg

The code is verified email mailbox format input box, if the error will be prompted. Effect 2:

736ee6e8e71f4a4f849b927deae2c815.jpg

FIG 2 url input type

 

3  number

field contains the type number for inputting a value, in particular, we can define a set of values ​​is used as follows:

6277c1284c474759aadb10d2736be7ef.jpg

The code uses the number input field type, set the value for the type ranges from 1 to 100. When we input 101, value exceeds the range, the page prompt "must be less than or equal to 100". Effect 3:

bc42e5226994403bbc2ec85aa799c1e9.jpg

FIG 3 number of the input type

Guess you like

Origin www.cnblogs.com/itxdl/p/11683265.html