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