HTML5 New Form Attribute Introduction--Zhang Xin Xu

First, Introduction

A new property named in HTML5 form is an element that is related to processing a form.

In HTML4 or XHTML, we're going to submit a form, and we have to put the relevant control elements <form> under the element. Controls that are not child elements are ignored directly when the form is submitted. However, in the actual situation, due to the particularity of page design and implementation, there will be some forms outside the elements also need to submit the situation, this time, the traditional form function is a little stretched.

The new attribute in HTML5 form is for better handling of this problem. Its role, personal feeling, is somewhat similar to label the attributes of the tag for .

Second, a better realization

The attributes in HTML5 form allow the HTML control element to be orphaned from the form, and the form can submit not only the control elements within the form, but also the values of the orphaned control elements can be submitted together. To see an example, the HTML code is as follows:

<form id= "Contact_form" method= "get" >    <p>        <label for= "name" > Name: </label><input Type= "text" id= "name" name= "name" >    </p>    <p>        <label for= "email" > Mailbox:</label> <input type= "Email" id= "email" name= "email" >    </p>    <input type= "Submit" id= "submit" value= "Send" ></form><p>    Comment: <textarea id= "Comments" name= "comment" form= "Contact_form" ></textarea ></p>

The above HTML code we need to pay attention to these points:

1. <textarea>Elements <form> beyond elements (not child elements, which are sibling elements)
2. <textarea>An element has an form attribute, and form the value of the property is exactly the <form> element's id .

You should have known better, HTML5. An external control element in a form is associated with a table by having its form property value equal to the value of the form element id , similar to the <label> element whose attribute value is equal to the for corresponding form control element id .

Demo
You can really click here: HTML5 new Form Attribute application Demo

If your browser supports the HTML5 form property, then when you enter relative content submissions in the demo page, there will be three query strings following the URL address as follows (FF4):

If the browser does not support the form property, then after clicking the Send button, there will be two query strings following the URL address, for example under the IE7 browser:

Third, reset default behavior

With this attribute of HTML5 form , we can reset the default form behavior and do something "interesting". For example, there are two forms on the page, and we Can "steal" the value of the control in form 2 when we submit the form 1, and submit the form 2 by "stealing" a control element in Form 1 and committing it. That is, in the HTML5 world, for form elements, even if you carry the control element in your arms is not insured, it may be used by others. This reminds me of an animal and an idiom: Cuckoo, Sparrow Jim.

In addition, this submit button is also can be drop-in use, is the form 1 of the submit button directly to the form 2 to the entire submission, this is really a nasty, Yiguoduan, manmen Chaozhan Chop ~ ~

Four, the browser support situation?

First of all, it can be determined that the Ie6/ie7/ie8 browser is not supported by the drop, and for other browsers support situations, see below:

• Opera 9.5+ (full support)
• Safari 5.1+ (seemingly supported)
• Firefox 4+ (with bugs, or partial support)
• Chrome + + (with bugs, or partial support)
• IE9 (not supported)

However, it is not clear that the "bug, or partial support" list in the above support situation is specific, and it may be practical and in-depth to discover the problem. However, according to the current display situation, the property to move on stage, in addition to personal sites, background pages try outside, but also need to wait some time, so, here is what the part of the support, at present big can not spend too long to toss, in-depth.

For some HTML5 properties, we can view this page (there are a lot of good resources), can let IE also take care of, but, I looked under, it seems that the support of the content does not include form attributes.

V. Speed, conclusion

Some old-fashioned polite words don't say ... Well, that's all, thanks for reading.

Reference article: html5′s New "Form" Attribute

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1715

(End of this article)

HTML5 New Form Attribute Introduction--Zhang Xin Xu