黑马程序员技术交流社区

标题: 学习笔记之form表单属性 [打印本页]

---

作者: 南国之南    时间: 2016-7-9 11:51
标题: 学习笔记之form表单属性
form属性:表单元素属性

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

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

<form >
        <input type="submit" name="one" value="提交方式一" formmethod="post" formaction="***.jsp">提交一
        <input type="submit" name="tow" value="提交方式二" formmethod="get" formaction="***.jsp">提交二
        </form>

formenctype属性：在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式
有以下三种方式：
<form >
                <input type="text" formenctype="text/plain">
                <input type="text" formenctype="multipart/form-data">
                <input type="text" formenctype="application/x-www-form-urlencoded">
        </form>

formtarget属性：在HTML4中表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面。
formtarget属性有五个：
_blank:在新的浏览器页面打开
_self:在当前页面打开
_parent:在当前框架的父框架中打开
_top:在当前窗口打开
framename:在指定框架中打开


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


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


labels属性：为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个Nodelist对象，代表该元素所绑定的标签元素所构成的集合。
具体使用如下：

        <form id="testform">
                <label id="label" for="txt_name">姓名：</label>
                <input id="txt_name">
                <input type="button" id="btnValidate" value="验证" onclick="Validate()">
        </form>

        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("style","font-size:9px;color:red;");
                }
        }
        </script>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2