HTML5 学习笔记4-表单新增的元素和属性

1、form 表单内的丛书元素不仅可以写在表单内部，还可以写在任何地方，然后给该元素指定一个form属性，属性值为表单的id，这样该元素就从属于指定表单了

<form action="" id="testform">
<input type="text">
</form>
<textarea form="testform">哼哈</textarea>

2、formaction 可以可以通过表单整体提交到一个页面或者分别提交到不同页面

<form action="" id="myform">
<input type="submit" name="n1" value="v1" formaction="submit1.html">提交到submit1页面
<input type="submit" name="n2" value="v2" formaction="submit2.html">提交到submit2页面
<input type="submit" name="n3" value="v3" formaction="submit3.html">提交到submit3页面
</form>

3、formmethod指定提交方式

<form action="" id="myform">
<input type="submit" name="n1" value="v1" formaction="submit1.html" formmethod="post">提交到submit1页面
<input type="submit" name="n2" value="v2" formaction="submit2.html" formmethod="get">提交到submit2页面
<input type="submit" name="n3" value="v3" formaction="submit3.html" formmethod="post">提交到submit3页面
</form>

4、formenctype对表单元素分别指定不同的编码方式

<form action="">
<input type="text" formenctype="text/plain">空格转加号，但不编码特殊字符 <br>
<input type="text" formenctype="multipart/form-data">不对字符编码。当使用有文件上传控件的表单时，该值是必需的 <br>
<input type="text" formenctype="application/x-www-form-urlencoded">默认。在发送前对所有字符进行编码。将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值。
</form>

5、formtarget对多个提交按钮菲苾使用formtarget属性来指定提交后再何处打开所需加载的页面

<form action="" id="myform">
<input type="submit" name="n1" value="v1" formtarget="_blank" formaction="submit1.html" >提交到submit1页面
<input type="submit" name="n2" value="v2" formtarget="_self" formaction="submit2.html">提交到submit2页面
<input type="submit" name="n3" value="v3" formtarget="_parent" formaction="submit3.html">提交到submit3页面
<input type="submit" name="n4" value="v4" formtarget="_top" formaction="submit4.html">提交到submit3页面
<input type="submit" name="n5" value="v5" formtarget="framename" formaction="submit5.html">提交到submit3页面
</form>

6、autofocus为文本、选择框或者按钮加上此属性，那么打开页面时，该控件自动获取光标焦点

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

7、required应用在大多数输入元素上，提交时，如果元素内容为空，则不允许提交且浏览器给出提示

<form action="">
<input type="text">
<input type="text" required>
<input type="submit" name="n1" value="提交" formaction="submit1.html">
</form>

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

<form id="myf">
<label id="label" for="txt_name">姓名:</label>
<input id="txt_name">
<input type="button" id="btn" value="验证" onclick="Demo()">
</form>
<script>
var txtName=document.getElementById("txt_name");
var button=document.getElementById("btn");
var form=document.getElementById("myf");
function Demo(){
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>