对HTML5中表单新增属性的分析

1. 表单内元素的form属性

在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了

form id="testform">
         input tyPE="text">
        /form>
        textarea form="testform">
    /textarea>
    

2. 表单内元素的formaction属性

在H4中，表单的提交方式

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

提交整个表单

在H5中，可以为表单的每一个属性添加提交到的jsp页面

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属性

可以对表单的每一个元素指定提交方法

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属性

同上，作用与每一个元素，代码略

5. 表单的formtarget属性

同上，作用与每一个元素，代码略

6.元素的autofocus属性

为文本框、选择框和按钮控件等加上autofocus属性，画面打开时，将自动获得焦点。

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

一个页面上只能有一个控件具有autofocus属性，不能滥用

7. required属性

可以用在大多数输入用的元素，若输入的值为空则不允许提交，游览器显示文字信息提示用户必须输入内容。

8. labels属性

可为表单所有元素添加一个lables属性，属性值为一个nodelist对象，代表该元素所绑定的标签元素所构成的集合。

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 = "请输入姓名";
                      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>
    

当用户不输入任何值时，单击验证，文本框旁边会动态的添加一个标签元素，标签元素为“请输入姓名”；当用户在文本框中有输入时，文字为“请输入姓名”的标签将被删除。

9. 标签的control属性

可以在标签（label）内部放置一个表单元素，并通过该标签的control属性来访问该表单元素。

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>
    

在游览器中打开页面，单击“设置默认值”按键，文本框中会显示231456.

10. 文本框的placeholder属性

当文本框（text或者textarea）处于为选择状态时输入提示信息(灰色)

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

11. 文本框的list属性

结合h5新增的datalist元素，制作提示框

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>
    

当你在文本框中输入“你”时，下面会出现三栏提示“你是人”、“你是猪”、“你是狗”，没有关键字将不出现提示

12. 文本框的autocomplete属性

autocomplete有三种值"on"、"off"、""（不指定）。不进行指定时，使用游览器的默认值。使用方法如下

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

当你在文本框内输入如“我是人”点击提交后，返回前一页，再在文本框中输入“我”，就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

请输入内容：input type="text" pattern="[0-9][A-Z]{ 3} ">

此段代码要求输入一个数字三个大写字母，如果输入不正确，则出现“请与所要求的内容保持一致（谷歌）”的提示。

14. 文本框的selectionDirection属性

针对input的text和textarea元素，当用户在这两个元素中用鼠标选取部分文字时，可以使用该元素来获取选择方向。

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="惦记我" onclick="alertSelectionDirection()" >
            /form>
    

15. 复选框的indeterminate属性

对于复选框来说，过去只有选取和与非选取状态，html5中，可以在js中对该元素使用indeterminate属性，以说明复选框“尚未明确选取”状态。

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

16. image提交按钮的height属性与width属性

• height:指定图片按钮中图片的高度；

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

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

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

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

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

以上就是对HTML5中表单新增属性的分析的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！