Analysis of new attributes of forms in HTML5

This article mainly introduces the new attributes of HTML5 forms in detail, and attaches example analysis, which is simple and easy to understand. Friends who need it, let’s take a look together

1. The form attribute of the element in the form

In H5, you can put the form anywhere on the page, and then The element specifies a form attribute, and the attribute value is the id of the form, so that the element can be declared to belong to the specified form

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

2. The elements within the form formaction attribute

In H4, the form submission method

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

Submit the entire form

In H5, it can be Each attribute of the form is added to the jsp page submitted to

<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. The formmethod attribute of the element within the form

can modify the form Specify the submission method for each element

<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. The formenctype attribute of the elements in the form

is the same as above, and affects each element , the code is omitted

5. The formtarget attribute of the form

is the same as above, and acts on each element, the code is omitted

6. autofocus attribute

Add the autofocus attribute to text boxes, selection boxes, button controls, etc. When the screen is opened, it will automatically gain focus.

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

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

7. required attribute

can be used in most input elements. If the input value is empty, submission is not allowed. The browser displays text information to prompt the user that the content must be entered.

8. labels attribute

You can add a labels attribute to all elements of the form. The attribute value is a NodeList object, which represents the label elements bound to the element. collection.

<script type="text/javascript">
        window.onload = function () {
         var text = document.getElementById(&#39;text&#39;);
            var btn = document.getElementById(&#39;btn&#39;);
            var form = document.getElementById(&#39;form&#39;);
            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 = "请输入姓名";
                  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">姓名：</label>
     <input id="text">
     <input id="btn" type="button" value="验证">
    </form>

When the user does not enter any value and clicks Verify, a label element will be dynamically added next to the text box. The label element is "Please enter a name"; when the user When there is input in the text box, the label with the text "Please enter your name" will be deleted.

9. The control attribute of the label

You can place a form element inside the label (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">
      邮编：
      <input id="txt_zip" maxlength="6">
      <small>请输入6位数字</small>
     </label>
     <input type="button" value="设置默认值" onclick="setValue()">
    </form>

Open the page in the browser, click the "Set Default Value" button, and 231456.

10 will be displayed in the text box. The placeholder attribute of the text box

When the text box (text or textarea) is in the selected state, enter the prompt message (gray)

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

11. The list attribute of the text box

Combined with the new datalist element of h5, create a prompt box

text:<input type="text" name="greeting" list="greetings">
    <!-- 使用style="display:none";将datalist元素设置为不显示 -->
    <datalist id="greetings" style="display:none">
     <option value="你是人">你是人</option>
     <option value="你是猪">你是猪</option>
     <option value="你是狗">你是狗</option>
    </datalist>

When you are in the text box When you enter "you" in , three columns of prompts "You are a human", "You are a pig", and "You are a dog" will appear below. If there are no keywords, no prompt will appear

12. Text The autocomplete attribute of the box

autocomplete has three values: "on", "off", and "" (not specified). If not specified, the browser's default value is used. The usage method is as follows

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

When you enter "I am a human" in the text box and click submit, return to the previous page and enter "I" in the text box , the prompt "I am a human" will appear.

13. The pattern attribute of the text box

is equivalent to using regular expressions directly in the html part to determine whether the value input meets the requirements.

Please enter the content:

This code requires entering a number of three Capital letters, if entered incorrectly, the prompt "Please be consistent with what was requested (Google)" will appear.

14. The selectionDirection attribute of the text box

For the text and textarea elements of input, you can use it when the user selects part of the text with the mouse in these two elements. This element is used to obtain the selection direction.

<script type="text/javascript">
        function alertSelectionDirection() {
         var control = document.forms[0][&#39;text&#39;];
         var Direction = control.selectionDirection;
         alert(Direction);
        }
 </script>
 <form>
     <input type="text" name="text">
     <input type="button" value="惦记我" onclick="alertSelectionDirection()" >
        </form>

15. The indeterminate attribute of the check box

For the check box, in the past, there were only selection and non-selection Status, in HTML5, you can use the indeterminate attribute on this element in js to indicate the "not explicitly selected" state of the check box.

  <script>
        var cb = document.getElementById("cb");
        //将indeterminate的属性设置为true
        cb.indeterminate = true;
        </script>
        <input type="checkbox" indeterminate id="cb">indeterminate属性测试

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

• height: Specify the image button The height of the picture in the picture;

• width: Specifies the width of the picture in the picture button;

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

17. The maxlength attribute and wrap attribute of the textarea element

• maxlength: Use integer value to set, used to limit the number of text that can be entered in the textarea element.

• wrap: The attribute value can be specified as soft or hard. When the attribute is hard, the form is submitted when the text exceeds the specified range of a row and automatically wraps without using the Enter key. will add a newline flag at the newline.

The above is the detailed content of Analysis of new attributes of forms in HTML5. For more information, please follow other related articles on the PHP Chinese website!