HTML5 forms and other new and improved elements, html5 form improvement elements

HTML5 forms and other new and improved elements, html5 form improvement elements
1. form attributes of elements in the form

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

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

2. formaction attribute of elements in the form

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

Submit the entire form

2. In H5, you can add submitted jsp pages for each attribute of the form.

<Form action = "1.jsp"> <input type =" submit "action =" 1-1.jsp "> submit to page 1 </form> <input type =" submit "action =" 1-2.jsp"> submit to 2 page </form> <input type = "submit" action = "1-3.jsp"> submit to 3 page </form>

3. formmethod attribute of elements in the form

You can specify the submission method for each element of the form.

<Form action = "1.jsp"> <input type =" submit "action =" 1-1.jsp "formmethod =" post "> submit to page 1, post submission method </form> <input type = "submit" action = "1-2.jsp" formmethod = "get"> submit to 2, get submission method </form>

4. formenctype attribute of elements in the form

Same as above, functions and code for each element

5. formtarget attribute of the form

Same as above, functions and code for each element

6. autofocus attribute of the element

Add the autofocus attribute to the text box, selection box, And button control. When the screen is opened, the focus is automatically obtained.

<Input type = "text" action = "1-3.jsp" autofocus> submit to 3 page </form>

Only one control on a page can have the autofocus attribute and cannot be abused.

7. required attributes

It can be used for most input elements. If the input value is null, submission is not allowed. The browser displays text information prompting that the user must enter the content.

8. labels attributes

You can add a lables attribute to all elements of the form. The attribute value is a NodeList object, which represents the set of tag elements bound to the element.

<Script type = "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 = "Enter name"; text. labels [1]. setAttribute ("style", "font-size: 9px; color: red") ;}} else if (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 = "verify"> </form>

When the user does not enter any value, click Verify. A label element is dynamically added next to the text box. The label element is "Enter name". When the user has entered any value in the text box, the label with the text "Enter name" will be deleted.

9. Label control attributes

You can place a form element inside the label and access the form element through the control attribute of the label.

<Script type = "text/javascript"> function setValue () {console. log (1); var label = document. getElementById ("label"); var textbox = label. control; textbox. value = "231456"} </script> <form> <label id = "label"> zip code: <input id = "txt_zip" maxlength = "6"> <small> enter a six-digit number </small> </label> <input type = "button" value = "setting default Value: "onclick =" setValue () "> </form>

Open the page in the browser and click "Set Default". The text box displays 231456.

10. placeholder attribute of the text box

Enter the prompt (Gray) when the text box (text or textarea) is in the selected status)

<input type="text" palceholder="hahah">

11. list attribute of the text box

Create a prompt box with the newly added datalist element of h5

Text: <input type = "text" name = "greeting" list = "greetings"> <! -- Use style = "display: none"; set the datalist element to not display --> <datalist id = "greetings" style = "display: none "> <option value =" you are a person "> you are a person </option> <option value =" you are a pig "> you are a pig </option> <option value = "you are a dog"> you are a dog </option> </datalist>

When you enter "you" in the text box, the following three columns are displayed: "You are a person", "You are a pig", and "you are a dog ", no keyword will be prompted

12. autocomplete attribute of the text box

Autocomplete has three values: "on", "off", and "" (not specified ). If this parameter is not specified, the default value of the browser is used. The usage is as follows:

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

When you enter "I am a person" in the text box and click Submit, return to the previous page, and enter "I" in the text box, the "I am a person" prompt will be displayed ".

13. pattern attribute of the text box

It is equivalent to using a regular expression in the html part to determine whether the value input meets the requirements.

Enter the content: <input type = "text" pattern = "[0-9] [A-Z] {3}">

This code segment requires that you enter three uppercase letters (numbers). If the input is incorrect, the prompt "Please be consistent with the required content (Google)" appears.

14. selectionDirection attribute of the text box

For the text and textarea elements of input, you can use this element to obtain the selection direction when you select some text with the mouse in these two elements.

<Script type = "text/javascript"> function alertSelectionDirection () {var control = document. forms [0] ['text']; var Direction = control. selectionDirection; alert (Direction );} </script> <form> <input type = "text" name = "text"> <input type = "button" value = "remember me" onclick = "alertSelectionDirection () "> </form>

15. indeterminate attribute of the check box

In the past, only the select and non-select statuses were available for the check box. In html5, you can use the indeterminate attribute for this element in js to indicate the status of the check box "not explicitly selected.

<Script> var cb = document. getElementById ("cb"); // set the indeterminate attribute to true cb. indeterminate = true; </script> <input type = "checkbox" indeterminate id = "cb"> indeterminate Property Test

16. The height and width attributes of the image submit button

<input type="image" src="img/2.png" width="23" height="23">

17. maxlength and wrap attributes of the textarea Element