Analysis of new forms in HTML5-

Time wheel rolling, front-end road never stop. for this front-end technology that is specialized in more than one course, any technological innovation must be learned at the first time, for example, the colorful flowers in the Web world-HTML5. although many people (including me) thought it was still popular at the beginning of HTML5 release ...,. Time wheel rolling, front-end road never stop. for this sophisticated front-end technology, any technological innovation, we must first learn about it, such as the colorful flowers in the Web world --- HTML 5. although many people (including me) thought that HTML 5 was still far from being popularized at the beginning of its release, many enterprise-level websites have tried to use it (such as applications, for example, the canvas application) makes HTML 5 a huge step, followed by the release of IE9, which undoubtedly makes us see that HTML 5 is no longer far away from us.

I have been learning HTML for more than five months. Although I still have some knowledge about its offline storage, canvas, and other innovative technologies, however, I still hope that what I have learned can help more front-end people learn the technology that is undoubtedly a new trend. this article describes in detail how to update the table list function in HTML 5.

I. More free form structures

Tags such as inpu/button/select/textarea that need to be placed in form in XHTML can be placed anywhere on the page in HTML 5, the new form attribute points to the ID value of the form to which the element belongs.

For example:

Ii. diverse input types

Note: Most new types are not currently supported by all standard browsers. For more information, see the prompts in the sample demonstration.

1. email input type

This type requires that you enter an email address in the correct format. Otherwise, the browser cannot submit the email address, and an error message is displayed. The name value must be specified for this type in Opera; otherwise, no effect is displayed.

2. url input type

The text fields displayed in the code above require that you enter a URL address in the correct format. Opera automatically adds the http: //. Date and Time input types at the beginning (these are awesome)

This series is a cool type and completely solves the complicated JS calendar control problem. However, currently, MS only supports the new versions of Opera/Chrome, and the display effect is different. number input type

This does not need to be explained. You must enter a number character. If you do not enter it, an error is thrown.

3. range Input type

This type displays a slide bar that can be dragged, And you can limit the drag range by setting the max/min/step value. A value is fed back when you drag the bar.

4. search input type

This type indicates that a search keyword is entered, and a small search icon is displayed through results = s.

5. tel input type

This type requires a phone number, but in fact it does not have a special verification, there is no difference with the text type.
6. color input type

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

3. New Form attributes

1. placeholder attributes

This is a very practical attribute, eliminating the need to use JS to clear the initial values of the form by clicking. the browser support is also good. In addition to Firefox, MS supports other standard browsers.

2. require/pattern attributes

Form Verification attribute. If the input value is null for the require type, the request is rejected and a prompt is displayed. the two writing methods above are useful. it can also be used for textarea and hidden/image/submit types. the pattern type is regular expression verification, which can complete various complex verification. the name value must be specified for the two types in Opera; otherwise, no effect is available.

3. autofocus attributes

The default focus attribute allows you to focus on a form Control During page loading, similar to JS focus ().

4. list attributes

This attribute must be shared with the datalist attribute. datalist is the memory of the Selection box, and the list attribute can be the content of the custom memory of the Selection box.

5. max/min/step attributes

Limit the input range of the value and the progressive degree of the value input. For example, you can set the maximum and minimum values of the input value in number or set the drag step in range.

6. autocomplete attributes

This attribute provides the Automatic completion function for the form. If this attribute is enabled, it can be completed automatically. In general, this attribute must enable the Automatic completion function of the browser.

The above is the new function of form parsing in HTML 5. For more information, see PHP Chinese website (www.php1.cn )!