HTML5 main New Form Properties

Form Property

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

Usage:

<form id="isForm">    <input type="text"></form><textarea form="isForm" cols="30" rows="10"></textarea>

FormAction Property

In HTML4 , all elements within a form can be submitted to another page only through the form's properties, while in the action 统一 HTML5 page where the form can be submitted to by adding properties for all of the submit buttons, so that the click of a 不同的formaction different button is available 不同 .

Usage:

<form>    <inputtype="Submit"name="S1"value="V1"formaction="xx.php">    <inputtype="Submit"name="S2"value="V2"formaction="yy.php">    <inputtype="Submit"name="S3"value="V3"formaction="zz.php"></form>

FormMethod Property

In HTML4 a form, only one property can be action used to uniformly specify the submission page for all elements within a form, so there is only one attribute per form within a single method property to specify the submission method uniformly. In HTML5 , you can use formmethod attributes to specify each of the form elements individually 不同的提交方法 .

Usage:

<form>    <input type="submit" name="s1" value="v1" formaction="xx.php" formmethod="post">    <input type="submit" name="s2" value="v2" formaction="yy.php" formmethod="get"></form>

Formenctype Property

In HTML4 , the form element has a enctype property that specifies how the data in the form should be encoded before the form is sent to the server. In HTML5 , you can use formenctype attributes to specify different encoding methods for form elements.

Usage

<form>    <!--第一种：空格变为加号，但是并不对特殊字符进行编码-->    <input type="text" formenctype="text/plain">    <!--第二种：不对字符进行编码-->    <input type="text" formenctype="multipart/form-data">    <!--第三种-->    <input type="text" formenctype="application/x-www-form-urlencoded"></form>

Formtarget Property

In HTML4 , the form element has a target property that specifies where to load the page after the form submission is opened.

In HTML5 , you can use properties on multiple submit buttons to formtarget specify where to open the page you want to load after committing.

Usage:

 <form>    <!--First: Open in New tab page--    <inputtype="Submit"name="S1"value="V1"formaction="xx.php"formtarget="_blank">    <!--The second type: Open in the current frame --    <inputtype="Submit"name="S2"value="V2"formaction="yy.php"formtarget="_self">    <!--Third: Open in the current page -    <inputtype="Submit"name="S3"value="V3"formaction="zz.php"formtarget="_top">    <!--Fourth: Open in the parent frame of the current frame--    <inputtype="Submit"name="S3"value="V3"formaction="zz.php"formtarget="_parent">    <!--Fifth: Open in the specified frame    <inputtype="Submit"name="S3"value="V3"formaction="zz.php"formtarget="FrameName"></form>

Autofocus Property

Adds a property to a text box, selection box, or button control that autofocus automatically gets the cursor focus when the screen opens.

Usage:

<form>    <input type="text">    <input type="text" autofocus></form>

Required Property

HTML5The new required properties can be applied to most input elements, and if the contents of the element are blank at commit time, no commit is allowed, and the message tip text is displayed in the browser.

Usage:

<input type="text" required>

Iabels Property

In HTML5 , define an attribute for all form elements, elements, and so on that can use a label, button select Iabels An NodeList object that represents a collection of tag elements that the element is bound to.

Usage:

<script>    function Validate(){        //Body ...        varTxtname= Document.getElementById(' Txt_name ');        varbutton= Document.getElementById(' Btnvalidate ');        varForm= Document.getElementById(' Testform ');        if(txtname.value.Trim()== ""){            varLabel= Document.createelement("Label");            label.SetAttribute("for","Txt_name");            form.InsertBefore(Label,button;            txtname.Labels[1].InnerHTML = "Please enter your name";            txtname.Labels[1].SetAttribute("Style","font-size:9px;color:red;")}        }</script><form id= "Testform" ><label id= "test" for= "Txt_name" ></label>    <input type="Text"Id="Txt_name">    <input type="button"Id="Btnvalidate"Value="Validate"OnClick="Validate ()"></form>

Effect:

The control property of the label

In HTML5 , you can place a form element inside the label and control access the form element through the label's properties

Usage:

<script>    function SetValue(){        varLabel= Document.getElementById("Label");        varTextbox= label.Control;        textbox.value =  "010010";    } </script><form><label id= "label" >ZIP Code:<input type= "text" id= "Txt_zip" maxlength= "6" ><small> Please enter six digits </small>    </label><input type= "button" value= "Set default value" Onclick= "SetValue()"></form>

Effect:

Placeholder Property of text box

placeholderRefers to the input prompt that is displayed when the text box is not in the input state. When the text box is not in the input state and the cursor focus is not obtained, the blur displays the input hint text.

Usage:

<input type="text" placeholder="请输入用户名">

Effect:

List property of the text box

In HTML5 , an attribute is added to the single-line text box list , and the value of the property is the datalist ID of an element. The element datalist is also HTML5 a new element in the selection box, but allows you to enter it yourself when the user wants to set a value that is not within the selection list. The datalist element itself is not displayed, but is displayed as a prompt input when the text box receives focus.

Usage:

<form>    <inputtype="Text"name="Greeting"list="Greetings">    <!--DataList is none by default, but in order to be compatible with each browser, set its display property to none--> independently    <datalistid="Greetings"style="Display:none">        <optionvalue="HTML5 Learning">HTML5 Learning</option>        <optionvalue="CSS3 Learning">CSS3 Learning</option>        <optionvalue="JavaScript learning">JavaScript learning</option>     </datalist></form>

Effect:

HTML5 main New Form Properties