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

This article mainly introduces the relevant knowledge of HTML5 form case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will have something to gain after reading this HTML5 form case analysis article, let's take a look at it.

First, the form structure is freer

Tag elements such as inpu/button/select/textarea, which need to be placed in form in XHTML, can be placed anywhere on the page in HTML5, and then can be associated by pointing to the ID value of the form to which the element belongs through the new form attribute. For example:

...

II. Various types of input

(most of the new types are not currently supported by all standard browsers, see the hint in the sample demonstration) email input types

This type requires you to enter a properly formatted email address, otherwise the browser will not allow submission and there will be an error message. This type must specify a name value in Opera, otherwise it has no effect. Url input type

The text field shown in the above code requires you to enter a properly formatted URL address, and http://. will be automatically added at the beginning of the Opera. Date and time related input types (these are very powerful X)

This series is a cool type that completely solves the cumbersome problem of JS calendar controls. But at present, MS is only supported by the new version of Opera/Chrome, and the display effect is not the same.

Number input types (these are very powerful X)

There is no need to explain this. You are required to enter a numeric character. If not, an error will be thrown.

Range input type

This type displays a draggable slider bar and can be dragged by setting the max/min/ step value. A value is fed back to value as you drag.

Search input type

This type indicates that the input will be a search keyword, and a small search icon can be displayed through results=s.

Tel input type

This type requires a phone number, but in fact it has no special authentication and is no different from the text type.

Color input type

This type of form allows the user to select a color value through a color picker and feed it back to value.

Third, new form properties

Placeholder attribute

This is a very practical attribute, eliminating the need to use JS to achieve click clear form initial values. Browser support is also good, MS in addition to Firefox, other standard browsers can support very well.

Require/pattern attribute

Form validation property, require type, if the input value is empty, the submission will be rejected, and there will be a prompt. Both of the above are correct, and this is very useful. And can be used for textarea and hidden/image/submit type. Pattern type is regular verification, can complete a variety of complex verification. These two types must specify a name value in Opera, otherwise there is no effect.

Autofocus attribute

INPUT autofocus= "true" >

The default focus property focuses on a form control when the page is loaded, similar to JS's focus ().

List attribute

This is the end of the article on "HTML5 form instance Analysis". Thank you for reading! I believe you all have a certain understanding of the knowledge of "HTML5 form instance Analysis". If you want to learn more, you are welcome to follow the industry information channel.

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.