HTML5 forms and other new and improved elements (above)

1. Form properties for elements within a sheet

In H5, you can place a form anywhere on the page, then specify a form property for the element, and the property value is the ID of the form, so you can declare that the element belongs to the specified form.

<form id="testform">    <input type="text">    </form>    <textarea form="testform"></textarea>

2. FormAction properties of elements within a form

1. In H4, how forms are submitted

<form action="1.jsp"></form>

Submit the entire form

2. In H5, you can add a JSP page submitted to each property of the form

<form action="1.jsp">    <input type="submit" action="1-1.jsp">提交到1页面</form> <input type="submit" action="1-2.jsp">提交到2页面</form> <input type="submit" action="1-3.jsp">提交到3页面</form> </form>

3. FormMethod properties of elements within a form

You can specify a submission method for each element of a form

<form action="1.jsp">    <input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form> <input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form> </form>

4. Formenctype properties of elements within a form

Ibid, function with each element, the code a little

5. Formtarget Properties of the form

Ibid, function with each element, the code a little

6. Autofocus attributes of elements

Add the Autofocus property to the text box, selection box, Button control, and so on, and the focus is automatically given when the screen opens.

<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>

Only one control on a page has a autofocus property and cannot be abused

7. Required Properties

Can be used in most input elements, if the input value is null is not allowed to commit, the browser display text message prompts the user must enter the content.

8. Labels Properties

You can add a Lables property to all elements of the form, a property value of a NodeList object that represents the collection of label elements that the element is bound to.

<ScriptType="Text/javascript" > Window.onload =function () {var text =document.getElementById (' Text ');var btn =document.getElementById (' btn ');var form =document.getElementById (' form '); Btn.onclick =function) {if (text.value.trim () = ="") {Alert (text.labels.length)if (text.labels.length==1) {var label =Document.createelement ("Label"); Label.setattribute ("For","Text"); Form.insertbefore (LABEL,BTN); text.labels[1].innerhtml ="Please enter your name"; text.labels[1].setattribute ("Style","Font-size:9px;color:red"); } }Elseif (text.labels.length>1) form.removechild (text.labels[1]); } }</Script><form id= "form" > <label id=  "label" for= "text" > Name: </label> < Input id= "text" > <input id= "btn"  Type= "button" value= "validation" > " Span class= "Hljs-tag" ></FORM>         

When the user does not enter any values, click Verify, the text box next to the dynamic add a LABEL element, the label element is "Please enter a name", when the user has entered in the text box, the text "Please enter name" label will be deleted.

9. Control property of the label

You can place a form element inside a label (label) and access the form element through the control property of the label.

<ScriptType="Text/javascript" > functionSetValue () {Console.log (1);var label =document.getElementById ("Label");var textbox = Label.control; Textbox.value ="231456"}</Script><Form><Labelid= "label" > ZIP Code: <input id=" Txt_zip " maxlength= "6" > <small> Please enter 6 digits </small> </label> < input type= "button" value=" set default value "onclick=  "SetValue ()" > </FORM>   

Open the page in the browser, click the Set Default button, and the text box will display 231456.

10. Placeholder Property of text box

Enter a message (gray) when the text box (text or textarea) is in the selected state

type="text" palceholder="hahah">

11. List property of the text box

Combined with H5 new DataList element, make a hint box

Text<InputType="Text"Name="Greeting"list="Greetings" ><!--use style= "Display:none"; Set the DataList element to not display--<DataListid= "greetings" style= "Display:none" > <option value=" You are Human "> You are Human </ option> <option value=" You're a pig "> You're a pig </ option> <option value=" You are a dog "> You are a dog </ option> </DATALIST>   

When you enter "You" in the text box, there will be three column prompt "You are Human", "You are a pig", "You are a dog", no keyword will not appear prompt

12. AutoComplete Property of text box

The AutoComplete has three values of "on", "Off", and "" (not specified). The default value of the browser is used when no designation is made. Use the following method

<input type="text" name="greeting" list="greetings" autocomplete="on">

When you enter in the text box such as "I am a person" click Submit, return to the previous page, and then enter "I" in the text box, will be out of line prompt "I am a person".

13. The Pattern property of the text box

The equivalent of a regular expression in the HTML section to determine the value of the input to meet the requirements.

type="text" pattern="[0-9][A-Z]{3}">

This code requires that you enter a number of three uppercase letters, and if the input is incorrect, the prompt "Please be consistent with what you want (Google)" appears.

14. Selectiondirection Property of text box

For the text and textarea elements of input, you can use this element to get the selection direction when the user selects part of the text with the mouse in these two elements.

<ScriptType="Text/javascript" > functionAlertselectiondirection () {var control =document.forms[0] [ ' text ']; var Direction = control.selectiondirection; alert (Direction);} </script>< form> <input type= "text" name= "text" > <input  Type= "button" value= "Miss Me" onclick= "alertselectiondirection ()" >  </FORM>           

HTML5 forms and other new and improved elements (above)