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属性来指定提交后再何处打开所需加载的页面

a、_blank新窗口打开

b、_self默认。在相同的框架中打开

c、_parent在父框架集中打开

d、_top在整个窗口中打开

e、framename在指定的框架中打开

    <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="验证" οnclick="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>