[html5] 学习笔记-表单新增元素与属性

时间:2021-05-19 12:47:56

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性。

1、form属性

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

以往的写法:

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

现在则可以这样写,好处是为表单添加样式时会更方便:

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

2、formaction属性

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

这里xxx1.jsp/xxx2.jsp/xxx3.jsp分别是是第一/二/三个服务器的地址。

 <body>
     <form id="testform">
         <input type="submit" value="v1" name="s1" formaction="xxx1.jsp"></input>
         <input type="submit" value="v2" name="s2" formaction="xxx2.jsp"></input>
         <input type="submit" value="v3" name="s3" formaction="xxx3.jsp"></input>
     </form>
 </body>

3、formmethod属性

在html4中,一个表单内只能有一个actoin属性来对表单内的所有元素统一提交,所以每个表单内页只有一个method属性来统一指定提交方法。在html5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

 <body>
     <form id="testform">
         <input type="submit" value="v1" name="s1" formaction="xxx1.jsp" formmethod="post"></input>
         <input type="submit" value="v2" name="s2" formaction="xxx2.jsp" formmethod="get"></input>
     </form>
 </body>

4、formenctype属性

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

text/plain:表单内的空格转换为加号,但不对表单内的特殊字符编码

multipart/form-data:不对文件进行编码,在使用包含控件时的表单时,必须使用该值

application/x-www-form-urlencoded:发送前编码所有字符;当表单action属性为get时,仍然用该编码方式把表单数据转换成字符

 <body>
     <form id="testform">
         <input type="submit" formenctype="text/plain"></input>
         <input type="submit" formenctype="multipart/form-data"></input>
         <input type="submit" formenctype="application/x-www-form-urlencoded"></input>
     </form>

5、formtarget属性

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

formtarget属性一共有5种:

_blank:在新的窗口打开

_self:默认值,在相同的框架打开

_parent:在当前框架的父框架打开

_top:在整个窗口中打开

framename:在指定框架中打开

     <form id="testform">
         <input type="submit" formtarget="_blank" ></input>
         <input type="submit" formtarget="_self" ></input>
         <input type="submit" formtarget="_parent" ></input>
         <input type="submit" formtarget="_top" ></input>
         <input type="submit" formtarget="framename" ></input>
     </form>
 </body>

6、autofocus属性

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

 <body>
     <form>
         <input type="text"></input>
         <input type="text" autofocus></input>
     </form>
 </body>

7、required属性

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

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

8、labels属性

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

 <body>
     <script type="text/javascript">
         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>
     <form id="testform">
         <label id="label" for="txt_name">姓名:</label>
         <input id="txt_name"></input>
         <input type="button" id="btnValidate" value="验证" onclick="Validate()"></input>
     </form>
 </body>