Detailed introduction to the new attributes of HTML5 forms

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

1. The form attribute of the element in the form

In H5, you can put the form on the page anywhere, and then specify a form attribute for the element, the attribute value is the id of the form, so that you can declare that the element is subordinate to the specified form

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

2. The formaction attribute of the elements in the form

In H4, the form submission method

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

Submit the entire form

In H5, you can add the jsp page submitted to each attribute 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. The formmethod attribute of the element 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">提交到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

Same as above, the effect is on each element, the code is abbreviated

5. The formtarget attribute of the form

The same as above, the function is on every element, the code is abbreviated

6. The autofocus attribute of the element

Add the autofocus attribute to the text box, selection box and button control , etc. When the screen is opened, it will Automatically gets 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 expression directly in the html part to determine whether the value input meets the requirements.

Please enter the content:5f8e73e983da88a4e1fe29bcfdda8e59

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 are only selected and non-selected states. 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 property and the width property

## of the image submit button

• #height: Specify the height of the picture in the picture button;

• width:指定图片按钮中图片的宽度；

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

17. textarea元素的maxlength属性与wrap属性

• maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。

• wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。

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