With Kingdz study HTML5 nine HTML5 new type of Input

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.