Well, we may be a bit difficult to test this lesson, because many browsers are not supported, these new additions to the label, I can only, as far as possible to find a supported browser to show you the results of the test.
HTML5 adds a lot of Input to the new category.
1.<input type= "Search" > Query text Box
2.<input type= "Number" > Numeric text box
3.<input type= "range" > Slide bar
4.<input type= "COLOR" > Color text box
5.<input type= "TEL" > Phone number text box
6.<input type= "url" > Site text box
7.<input type= "Email" > E-mail text box
Here are a few of the time picker.
8.<input type= "Date" > select Day, Month, year
9.<input type= "Month" > select months, Years
10.<input type= "Week" > select minute
11.<input type= "Time" > Pick up (Hours and minutes)
12.<input type= "datetime" > select time, Day, month, year (UTC time)
13.<input type= "datetime-local" > select time, Day, month, year (local time)
OK, let's start with a simple look, we'll show you the effect of each one, we should be familiar with
Oh, right, let's show you a current browser support for these input
input type |
Ie |
Ff |
Opero |
Chrome |
Search |
Not supported |
Not supported |
Not supported |
Not supported |
Number |
Not supported |
Not supported |
9.0 or more |
Not supported |
Range |
Not supported |
Not supported |
9.0 or more |
4.0 or more |
Color |
Not supported |
Not supported |
Not supported |
Not supported |
Tel |
Not supported |
Not supported |
9.0 or more |
Not supported |
Url |
Not supported |
Not supported |
9.0 or more |
Not supported |
Email |
Not supported |
Not supported |
9.0 or more |
Not supported |
Time |
Not supported |
Not supported |
9.0 or more |
Not supported |
Everybody is surprised, unexpectedly the support rate is so low. I'm helpless, too.
Well, give everyone a brief introduction.
1>search
The input element of the search type is a text box that is specifically used to enter a text box for search keywords
<input type= "Search" list= "searchlist" autocomplete= "on"/> <datalist id= "searchlist" > <option Value= "http://www.cnblogs.com" label= "blog Park"/> <option value= "Http://www.cnblogs.com/hihell" label= " Kingdz "/> </datalist>
A simple example,
Well, introduce a few properties that we haven't seen before.
List= "SearchList"
This list you can understand as a data source, and then declare a DataList below to remember the ID must be equal to searchlist ah.
Autocomplete= "On"
Auto complement complete, you can test it yourself, he has two values on/off
Autofocus = "Autofocus" or ""
This represents the focus on the label.
Required = "Required" or ""
is required.
Placeholder prompt message after writing
placeholder = "Please select URL"
2>number
This is relatively simple, is to display the selection of numbers
As you can see, more than a normal text box, a top-down selector.
<input type= "Number" max= "9" min= "0" step= "any"/>
Max Max, Min min The number that the number increases or decreases as each button is pressed, any represents not set.
3>range
To be precise, this should not be called the scroll bar, hehe.
<input type= "Range" max= "9" min= "0" step= "2"/>
4>color
The input element of the color type is used to select a color, which provides a color picker.
<input type= "Color" value= "#ff00ff"/>
The value at the back is a default color that currently only supports 16 binary colors.
Well, this class will introduce these, the next lesson is to introduce the rest.
With Kingdz study HTML5 nine HTML5 new type of Input