HTML5 Learning Notes--form

1, Form Properties

In the HTML4, the subordinate elements within the form must be written inside the form, but in HTML5, you can write them anywhere on the page, and then give the element a form property whose value is the ID of the form unit, so you can declare that the element belongs to the specified form.

 
<! DOCTYPE html>
 
The input element is subordinate to the form, it is written inside the form, and you do not need to make a form attribute on it. The textarea element is written outside of the form, but it is subordinate to the form, so the ID of the form is drawn to the form property of the Textareea element.
 
The advantage of this is that you can add more easily when you need to add styles to the elements in the page, because they are not scattered within the form.
 
2, FormAction Property
 
In HTML4, all of the elements within a form are uniformly submitted to another page through the action attribute of the form, while in HTML5 you can give all the submit buttons, such as <input type= "submit" value= "/>, < Input type= "image" "src=" "alt=" "/>, <button type=" Submit "></button> all add different formaction attributes, making it possible to click on different buttons, You can submit the form to a different page.
 
 
<! DOCTYPE html>
 
3, FormMethod Property
 
In HTML4, there is only one action attribute in a form that specifies the submit page uniformly for all elements in the form, so each form has only one method attribute to refer to the uniform specified commit. In HTML5, you can use the FormAction property to specify a different submit page for each form element, and you can use the FormMethod property to specify different commit methods for each form element individually.
 
 
<! DOCTYPE html>
 
4, Placeholder property
 
Placeholder refers to when the text box (input type= "text" or textarea) is not entered and the focus is not obtained, the blur displays the input prompt text.
The implementation method is very simple, just add the placeholder attribute, and then make the hint text can be.
 
 
<! DOCTYPE html>
 
5, Autofocus Property
 
Add the property to the text box, selection box, or button control. When the page loads, the control automatically gets the cursor focus. To do this so far requires JavaScript, such as "Control.focus ()".
 
 
<! DOCTYPE html>
 
6, List properties
 
In HTML5, a list property is added to a single-line text box (input type= "text"), and the value of the property is the ID of a detalist element. A new element in the HTML5 of the detalist element that is similar to a selection box (select), but allows it to enter itself when the user wants to set a value that is not within the select list. The element itself is not displayed, but rather is displayed when the text box has the focus when it is prompted for input. To avoid display errors on browsers that do not support this element, you can set it to not appear with CSS, and so on.
From a practical standpoint, please do not misuse this attribute. It is strongly recommended that you use the Autofocus property for a page only if it is the primary purpose of using a control, such as searching for a text box in a search page.
 
 
<! DOCTYPE html>
 
Why not combine the INPUT element with the DataList element as an element, like an input Drop-down box in another language? This is based on compatibility considerations--in browsers that do not support HTML5, the DataList element can be ignored for normal input and other operations on the INPUT element programmatically.
 
7, AutoComplete property
 
The automatic completion function of the auxiliary input is a function that saves the input time and is also very convenient. Before HTML5, because anyone can see the input value, so there is a loop hidden trouble, but as long as the use of AutoComplete properties, security can be well controlled.
 
For the AutoComplete property, you can set the three values of "on", "Off", and "" (unspecified). When not specified, the default value of the browser is used (depending on the browser's decision). When you set this property to on, you can display a list of data for the specified alternate input. Using the DataList element and the list property to provide a list of alternate inputs, you can automatically display the data in the DataList element as an alternate input in a text box when you are done.
 
 
<! DOCTYPE html>