Shulou(Shulou.com)06/03 Report--

This article will explain in detail how HTML5 uses the new form elements and attributes. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The code demonstrates the new form elements and attributes added by HTML5, including placeholder attributes, autofocus attributes, list and datalist elements, search type text boxes, email type text boxes, number type text boxes, range type text boxes, tel type text boxes, url type text boxes, and input elements with date and time types, and so on.

The sample code is as follows:

HTML5 Mobile Web Development Guide

H2, h3, h4, h5, h6, h7

{

Text-align: center

}

Input

{

Width: 450px

}

Input [type= "range"]

{

-webkit-appearance: none! important

-webkit-box-shadow: 0 1px 0 0px # 424242, 0 1px 0 # 060607 inset

0px 2px 10px 0px black inset, 1px 0px 2px rgba (0,0,0,0.4) inset

0 0px 1px rgba (0,0,0,0.6) inset

Margin-top: 2px

Background-color: # 272728

Border-radius: 15px

Width: 400px

}

/ *-webkit-slider-thumb: set the style of the slider above * /

Input [type= "range"]::-webkit-slider-thumb

{

-webkit-appearance: none! important

Cursor: default

Top: 1px

Height: 9px

Width: 20px

Background: none repeat scroll 0 0 # 777

Border-radius: 15px

-webkit-box-shadow: 0-1px 1px black inset

}

HTML5 Mobile Web Development Guide

New element of HTML5-- form element

Placeholder attribute:

Commonly used in text boxes

Its main function is to prompt the text box when the text box is not entered and the content is empty.

Effect:

When the text box gains focus, the prompt information is automatically emptied, and when the focus is lost and the content is not entered, the prompt message automatically appears.

Omit the effects that traditional text boxes require the help of onfocel and onblur events

(compatible with most PC and Mobile browsers, it can only be said that technology has really improved.)

Example:

Autofocus attribute:

Specify that the control automatically gets focus. It is important to note that only one control on a HTML page can have a change property.

Example:

List and datalist elements:

The main function of the list element is to prompt for text box input, and the data source for the prompt is provided by datalist.

Currently, list and datalist elements are only supported by Opera browsers, and not even any mobile browser supports this feature.

Example:

I'm datalist1.

I'm datalist2.

I'm datalist3.

I'm datalist4.

Search type text box:

A text box mainly used to search for keywords

This text box is only different from the ordinary text box. In Safari and Chrome browsers, the appearance of the text box is rounded.

Example:

Email type text box:

Is a text box where you can specify the content of an e-mail message, usually used on an input text box that enters an E-mail address

This kind of text box is almost the same as an ordinary text box in appearance, but it is actually different in Safari mobile browser.

The keyboard will display the corresponding keyboard according to the type of text box.

Example:

Number type text box:

Is a type of text box for entering numbers

It can be used with min, max, and step properties

Example:

Range type text box:

Is a numeric range input text box type that provides a sliding input mode

Need to cooperate with the use of min, max, range and other attributes

Example:

Tel type text box:

Is a type of text box for users to enter phone numbers

Under the mobile browser, the keyboard of this kind of text box will display the corresponding keyboard according to the type of text box.

Example:

Url type text box:

Is a type of text box for users to enter Url addresses

Under the mobile browser, the keyboard of this kind of text box will display the corresponding keyboard according to the type of text box.

Example:

In the HTML5 specification, in addition to adding form elements, there are also input elements of date and time type

But none of these types are widely supported.

The details are as follows:

Date and time (including time zone):

Date and time (excluding time zone):

Time selector text box:

Date Selector text box:

Week selector text box for the year:

Month selector text box:

New element of HTML5-- form element

On "HTML5 how to use the new form elements and attributes" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.