[html5] 学习笔记-表单新增元素与属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记-表单新增元素与属性相关的知识，希望对你有一定的参考价值。
本节讲的是表单元素的form,formaction属性，frommethod,formenctype属性，formtarget,autofocus属性，required,labels属性。
1、form属性
在html4中，表单内的从属元素必须书写在表单内部，而在html5中，可以把他们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以指定该元素从属于指定表单了。
以往的写法：
1 <body> 2 <form id="testform"> 3 <input type="text"></input> 4 <textarea form="testform"></textarea> 5 </form> 6 </body>
现在则可以这样写，好处是为表单添加样式时会更方便：
1 <body> 2 <form id="testform"> 3 <input type="text"></input> 4 </form> 5 <textarea form="testform"></textarea> 6 </body>
2、formaction属性
在html4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在html5中，可以为所有的提交按钮增加不同的formaction属性，使单击不同的按钮时，可以将表单提交到不同的页面。
这里xxx1.jsp/xxx2.jsp/xxx3.jsp分别是是第一/二/三个服务器的地址。
1 <body> 2 <form id="testform"> 3 <input type="submit" value="v1" name="s1" formaction="xxx1.jsp"></input> 4 <input type="submit" value="v2" name="s2" formaction="xxx2.jsp"></input> 5 <input type="submit" value="v3" name="s3" formaction="xxx3.jsp"></input> 6 </form> 7 </body>
3、formmethod属性
在html4中，一个表单内只能有一个actoin属性来对表单内的所有元素统一提交，所以每个表单内页只有一个method属性来统一指定提交方法。在html5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。
1 <body> 2 <form id="testform"> 3 <input type="submit" value="v1" name="s1" formaction="xxx1.jsp" formmethod="post"></input> 4 <input type="submit" value="v2" name="s2" formaction="xxx2.jsp" formmethod="get"></input> 5 </form> 6 </body>
4、formenctype属性
在html4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前，应该如何对表单内的数据进行编码。在html5中，可以用formenctype属性，为表单的元素指定不同的编码方式。
text/plain：表单内的空格转换为加号，但不对表单内的特殊字符编码
multipart/form-data：不对文件进行编码，在使用包含控件时的表单时，必须使用该值
application/x-www-form-urlencoded：发送前编码所有字符；当表单action属性为get时，仍然用该编码方式把表单数据转换成字符
1 <body> 2 <form id="testform"> 3 <input type="submit" formenctype="text/plain"></input> 4 <input type="submit" formenctype="multipart/form-data"></input> 5 <input type="submit" formenctype="application/x-www-form-urlencoded"></input> 6 </form>
5、formtarget属性
在html4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后，所需要加载的页面。在Html5中，可以对多个提交按钮分别使用formtarget属性来分别指定。
formtarget属性一共有5种：
_blank:在新的窗口打开
_self:默认值，在相同的框架打开
_parent:在当前框架的父框架打开
_top:在整个窗口中打开
framename:在指定框架中打开
1 <form id="testform"> 2 <input type="submit" formtarget="_blank" ></input> 3 <input type="submit" formtarget="_self" ></input> 4 <input type="submit" formtarget="_parent" ></input> 5 <input type="submit" formtarget="_top" ></input> 6 <input type="submit" formtarget="framename" ></input> 7 </form> 8 </body>
6、autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。
1 <body> 2 <form> 3 <input type="text"></input> 4 <input type="text" autofocus></input> 5 </form> 6 </body>
7、required属性
html5中新增加的required属性可以应用在大多数输入元素上，在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
1 <body> 2 <form action="xxx.jsp"> 3 <input type="text" required="required"></input> 4 <button type="submit">提交</button> 5 </form> 6 </body>
8、labels属性
在html5中，为所有可使用标签的表单元素、button、select元素等，定义了一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
1 <body> 2 <script type="text/javascript"> 3 function Validate(){ 4 var txtName = document.getElementById("txt_name"); 5 var button =document.getElementById("btnValidate"); 6 var form = document.getElementById("testform"); 7 if (txtName.value.trim()=="") { 8 var label = document.createElement("label"); 9 label.setAttribute("for","txt_name"); 10 form.insertBefore(label,button); 11 txtName.labels[1].innerHTML="请输入姓名"; 12 txtName.labels[1].setAttribute("style","font-size:9px;color:red"); 13 } 14 } 15 </script> 16 <form id="testform"> 17 <label id="label" for="txt_name">姓名：</label> 18 <input id="txt_name"></input> 19 <input type="button" id="btnValidate" value="验证" onclick="Validate()"></input> 20 </form> 21 </body>
以上是关于[html5] 学习笔记-表单新增元素与属性的主要内容，如果未能解决你的问题，请参考以下文章