HTML5 button Element new attribute Formaction,formenctype etc introduction (reprint)

One, <button> and other elements added HTML5 properties – form

In the past, <form> some of the control elements required for table cell and form submission ( <input> for example, <select> ) must be parent-child on the DOM structure, but in the HTML5 context, form elements and control elements can be anywhere on the page document, and the implementation of this feature is achieved by using form the Property.

About the new properties of HTML5 form , I introduced it six years ago, but that article was used to <textarea> signal the use of elements.

You can really click here: TextArea schematic form Property Demo

The key HTML code for this demo page is as follows:

<form id= "Contact_form" >...</form> comments: <textarea id= "Comments" name= "comment" form= "Contact_form" > </textarea>

<textarea>The element is <form> outside the element, not the ancestor and descendant relationships, but when we fill in the form with data and submit it, we find that the <textarea> data in the control is submitted together.

If form a property is acting on a button, especially a form submit button with a submit character, the final behavior may be to submit another <form> form.

Instance to speak, you can ruthlessly click here: Button the form to submit another form demo

There are two form elements on the page, and the Submit button is inside the second form element, with the relevant HTML code as follows:

<form id= "Form1" >    form Sequence Number: <input name= "Formindex" value= "1" readonly></form><form id= "Form2" >    Form Sequence Number: <input name= "Formindex" value= "2" readonly>    <input type= "Submit" value= "Submit" form= "Form1" ></form>

As a result, click the Submit button to submit the first form, such as:

At this point the submit button becomes a "spy".

Second, the <button> element added HTML5 attribute –formaction

formactionA property can only act on a button () that has a commit property, and, as with the type=‘submit‘/‘image‘ name, if the form is submitted through the current button, the property value is used formaction instead form of the element's property value in the form submission address action .

To give a simple example, continue with the above case:

<form id= "Form1" >    form Sequence Number: <input name= "Formindex" value= "1" readonly></form><form id= "Form2" >    Form Sequence Number: <input name= "Formindex" value= "2" readonly>    <input type= "Submit" value= "Submit" form= "Form1" formaction= "Blank.html" ></form>

As a result, after clicking the Submit button, go to not the current page, but the page named blank.html, in this presentation is a blank schematic page, the effect such as:

Seeing is believing, you can ruthlessly click here: Button FormAction property Reset Form Action Demo

What if the current form is not submitted via the Submit button?
form submission, not always by clicking the Submit button, can also be input box enter trigger, or JS form.submit() , if this type of commit, that attribute is formaction still valid?

Test code as follows:

<form>    Form Sequence Number: <input name= "Formindex" value= "1" > (enter try)    input type= "button" onclick= " This.parentElement.parentElement.submit () "value=" JS trigger ">    input type=" submit "value=" Commit "formaction=" Blank.html "></form>

The test results are as follows:

1. When the form returns to the submission, it formaction takes effect. This is a good understanding, a form, to support the carriage return event, you need to add a submit the nature of the commit button can be, its role is essentially a carriage return when clicked on the Submit button (if set on the button onClick="alert(0)" , carriage return will be ejected, can prove this).
2. If the submit() commit is triggered by the JS method, no reset is made to the formaction form submission action , and the test page behaves as committed to the current page.

Seeing is believing, you can ruthlessly click here: formaction but form non-button submit test Demo

Attributes enable the formaction effect of two buttons within a form to be submitted to different addresses, respectively.

Third, <button> element new HTML5 attribute –formenctype

formenctypeA property can only act on a button () that has a commit property, and, as with the type=‘submit‘/‘image‘ name, if the form is submitted through the current button, the property value is used formenctype instead form of the element's property value in the form submission address enctype .

formThe attribute of the element enctype can specify how the data is to be encoded.

• By default application/x-www-form-urlencoded , string data that can be interpreted as formatting (the % beginning of those) with a URL formatting rule;

• Can be set to multipart/form-data , this is HTML5 new encoding method, it can be understood that all form submission data in binary form, so we can Ajax directly upload images and other file information. This is usually used when there is a type="file" type of <input> file selection box.

• can also be text/plain , express plain text, this I have not used at present, the routine is unknown.

Because the formenctype property values are not well tested, the demo is not show.

Iv. <button> elements New HTML5 attribute –formmethod

Similarly, a formmethod property can only act on a button () that has a commit property type=‘submit‘/‘image‘ , overriding the <form> property value of the target element method (by default get ), for example:

<form id= "Form1" >    form Sequence Number: <input name= "Formindex" value= "1" readonly></form><form id= "Form2" >    Form Sequence Number: <input name= "Formindex" value= "2" readonly>    <input type= "Submit" value= "Submit" form= "Form1" Formmethod= "POST" ></form>

At this point, click the Submit button is the Post form, the URL address does not appear after the query character information, as follows:

If you are interested, you can click to feel, you can ruthlessly click here: Button FormMethod Property Reset Demo

V. <button> elements New HTML5 attribute –formnovalidate

formnovalidateis a Boolean property value that can only be applied to a button () that has a commit property, and the form that is type=‘submit‘/‘image‘ submitted by this button does not perform native data validation and resets the <form> attributes of the element novalidate .

Vi. <button> elements New HTML5 attribute –formtarget

Similarly, a formtarget property can only act on a button () that has a commit property type=‘submit‘/‘image‘ , overriding the <form> property value of the target element target (by default _self ), for example:

<form>    Form Sequence Number: <input name= "Formindex" value= "1" readonly>    <input type= "Submit" value= "Submit" formaction= "blank.html" formtarget= "_blank" ></form>

At this point, blank.html opens in the browser's new window!

You can click here: Button buttons formtarget properties Reset Form Target Demo

Click here button to feel the next ~

Property value
formtargetThe supported property values are identical to the attributes of the form element target :

• _self: submitted in the current browser context. Default value (if not set).
• _blank: submitted to the new unnamed browser context, in the browser is the new Open tab page.
• _parent: The browser context that is submitted to the parent, common in the IFRAME, and the effect is equivalent if there is no parent browser context _self .
• _top: Submitted to the top-level browser context (the most ancestor browser context). If not, the behavior is equal to _self .

Above ~

Vii. the closing remark of the unprepared

The practical value of the properties described in this article formaction formtarget is that it is possible to submit the form submitted by the JS trigger and click Enter to trigger the form submission for natural differentiation processing, and to implement the different behavior of the internal control elements of the same form.

As an example:
Create a new data field to modify a piece of data, the user needs to enter the content is almost identical, which means that the new form and the modified form can actually be shared, but there must be some differences, for example, the new data form action address may be add.php , and the modification may be edit.php . In the past, we may have used JS to modify the <form> elements according to the scene action , while changing the commit button, and now one less step, only need to control the submission of the button's explicit implicit can be:

<form action= "add.php" >  <input type= "Submit" value= "new" >  <input type= "Submit" value= "Modify" formaction= "edit.php" ></form>

In addition to being more streamlined, the biggest benefit is more semantic.

The use of less rare does not mean that there is no use, tap its potential, play its value, save time and effort effect is good. There are many features that are not retired nature in CSS and HTML, but very useful in special scenarios. Although these features usually have an alternative (although a little verbose), as if not mastered and nothing, plus not often used, learning can not immediately production capacity, so it is natural to feel that there is this time, it is better to learn some of the more popular tall things.

Learning is not necessarily a big use of basic knowledge, and learning the popular upper income fast things are actually two different investments, one is low-risk long-term high-yield long-term investment, one is high-risk short-term income high short-term investment. Compare the proposed investment ratio is the first 8 after 2, but, but the real world is not so, there are too many people, in the market very good time, at the risk of a high level of the stock market, as the front-end situation is relatively good, all the energy used to learn a variety of tools and frameworks to use, stand in the future perspective, This is actually a very high risk thing.

If we go further in-depth analysis, perhaps it involves the question of security. For example, these fundamentals of this article, because of uncertainty, assuming that I took a time to understand, the results of 2 years after the project did not meet the appropriate use of these attributes of the scene, then my time and energy is not wasted, it is easy to lose security. But if I go to the framework of Vue and the like, the resume looks good, the job is easy to find, the payoff is determined, and the certainty of sexual effect makes people always happy to do such things.

Therefore, although I have repeatedly stressed the importance of basic knowledge on various occasions, but the characteristics of human nature so that most people can not persist in this piece, because learning one or two basic knowledge is really a bit useless, you have to learn a lot, at least one hundred or two hundred, only enough coverage, to have from quantitative to qualitative change.

However, in a different way, this is actually good, big waves scouring the sand, with the continuous accumulation of time, with the foundation of the cumulative, later can compete with their own people are less, thick accumulation of thin hair, strategically advantageous position, the older the more popular, do not have to worry about the so-called midlife crisis, after all career 40 years, Almost all it practitioners have just begun to start.

HTML5 button Element new attribute Formaction,formenctype etc introduction (reprint)