HTML5——新增表单元素与属性（3）

来源：互联网发布：linux怎么创建目录编辑：程序博客网时间：2024/05/22 05:04

1、表单内元素的form属性

在HTML4中，表单内的从属性必须书写在表单内部，而在HTML5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。

2、表单内元素的formaction属性

在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。

<body>
    <form action="" id="testform">
        <input type="text">
        <textarea name="" id="" form="testform" cols="30" rows="10"></textarea>
    </form>
    <input name="submit" value="提交1" type="submit" formaction="xx1.jsp">
    <input name="submit" type="submit" value="提交2" formaction="xx2.jsp">
    <input name="submit" type="submit" value="提交3" formaction="xx3.jsp">
</body>

3、表单内元素的formmethod属性

在HTML4中，一个表单内只能有一个action属性用了对表单内所有元素统一指定提交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

<form id="testform">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="1.jsp">提交
        <input type="submit" name="s2" value="v2" formmethod="get" formaction="2.jsp">提交
</form>

4、表单内元素的formenctype属性

在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

 <form action="">
            <input type="text" formenctype="text/text/plain">
            <input type="text" formenctype="multipart/form-data">
            <input type="text" formenctype="application/x-www-form-urlencoded">
 </form>

5、表单内元素的formtarget属性

在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。
在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面。

formtarget:为提交按钮分别指定在何处打开新的页面
{
1._blank（新的浏览器页面）
2._self（默认值，相同框架的frame中打开）
3._parent（当前框架的父框架中打开）
4._top（当前页面打开）
5.framename（指定frame中打开）
}

6、表单内元素的autofocus属性

为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

7、表单内元素的required属性

HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

 <form action="1.jsp">
        <input type="text" required="required">
        <button type="submit">提交</button>
 </form>

8、表单内元素的labels属性

在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

 <script>
        function Validate(){
            var txtName = document.getElementById("txt_name");
            var button = document.getElementById("btnValidate");
            var form = document.getElementById("testform");
            if(txtName.value.trim()==""){
                var label = document.createElement("label");
                label.setAttribute("for","txt_name");
                form.insertBefore(label,button);
                txtName.labels[1].innerHTML = "请输入姓名";
                txtName.labels[1].setAttribute("styel","font-size:9px;");
 
            }
        }
    </script>
    <form id="testform">
        <label id="label" for="txt_name">姓名:</label>
        <input id="txt_name">
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
 
    </form>

0 0