Html5与Css3表单、文本框、复选框、image新增属性（八）

css5新增的元素与属性

表单内元素的属性
1. form属性
之前必须书写在表单内部。而在Html5中，可以放在任何位置，为元素指定一个form属性，属性值为该表单的id，就可以声明该元素属于指定表单

//原来用法<form id="textform">    <input type="text">    <textarea form="textform"></textarea></form>//Html5新增，好处：容易添加样式<form id="textform">    <input type="text"></form><textarea form="textform"></textarea>

2.formaction属性
之前只能通过表单action属性被统一提交到另一个页面。而在Html5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮可以将表单提交到不同的页面

<form id="textform">    <input type="submit" name="n1" value="v1" formaction="01.jsp">提交到xx.jsp页面    <input type="submit" name="n2" value="v2" formaction="02.jsp">提交到xx.jsp页面    <input type="submit" name="n3" value="v3" formaction="03.jsp">提交到xx.jsp页面</form>

3.formmethod属性（待补充）
所以只有一个method属性来统一指定提交方法。Html5中，可以用formmethod对每个表单元素分别指定不同的提交方法

<form id="textform">    <input type="submit" name="n1" value="v1" formmethod="post" formaction="01.jsp">    <input type="submit" name="n2" value="v2" formmethod="get" formaction="02.jsp"></form>

4.formenctype属性（待补充）
之前表单元素具有一个enctype用于指定在表单发送到服务器之前应该如何对表单内数据进行编码。
在Html5中，可以用formenctype属性分别指定不同的编码方法

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

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

<form id="textform">    <input type="submit" name="n1" value="v1" formtarget="_blank" formaction="01.jsp">//新窗口    <input type="submit" name="n2" value="v2" formtarget="_self" formaction="02.jsp">//在相同的框架frame打开    <input type="submit" name="n3" value="v3" formtarget="_parent" formaction="03.jsp">//当前的父窗口    <input type="submit" name="n4" value="v4" formtarget="_top" formaction="04.jsp">//当前窗口打开    <input type="submit" name="n5" value="v5" formtarget="framname" formaction="05.jsp">//在指定框架打开</form>

6.autofucus属性
为文本框、选择框过按钮控件添加autofucus属性，当画面打开，该控件将自动获得光标焦点

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

6.required属性
在提交时，如果元素内容空白，则不允许提交，同时显示提交信息文字

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

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

<script>    function Validate(){        var txtName=document.getElementById("txt_name");        var button=document.getElementById("btnValidate");        var form=document.getElementById("textform");        if(txt Name.value.trim==""){            var label=document.createElement("label");            label.setAttribute("for","txt_name");            form.insertBefore(label,button);            tetName.labels[1].innerHTML="请输入姓名";            txtName.labels[1].setAttribute("style","font-size:14px;color：#ccc;");        }    }</script><form id="textform">    <label id="label" for="txt_name">姓名：</label>    <input id="txt_name">    <input type="button" id="btnValidate" value="验证" onclick="Validate()"></form>

8.标签的control属性
可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素

<script>    function setValue(){        var label=document.getElementById("label");        var textbox=label.control;        text.value="310018";    }</script><form id="textform">    <label id="label">        邮编：        <input id="txt_zip" maxlength="6">        <small>请输入六位数字：</small>    </label>    <input type="button" value="设置默认值" onclick="setValue()"></form>

9.placehoder属性
当文本框处于未输入状态时显示的输入提示。未输入未获取光标焦点时，模糊显示输入提示文字

<input type="text" placeholder="输入用户名">

文本框属性
9.list属性
为单行文本增加，属性值为某个datalist元素的id。datalist元素类似于选择框，但是当用户想要设定的值不再列表之内，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示

<form>    <input type="text" name="greeting" list="greetings">    <datalist id="greetings" style="display:none">        <option value="Html5">Html5</option>        <option value="Css3">Css3</option>    </datalist></form>

10.autocomplete属性
帮助输入所用的自动完成功能，控制安全性

<input type="text" name="greeting" autocomplete="off" list="greetings">     <datalist id="greetings" style="display:none">        <option value="Html5">Html5</option>        <option value="Css3">Css3</option>    </datalist>

11.pattern属性
属性值设为某个格式的正则表达式，在提交时会进行检查，是否符合给定样式。不符合给定格式则不允许提交，同时在浏览器显示信息提示，必须符合给定格式

<form action="01.jsp">请输入内容    <input pattern="[A-Z]{3}" name="part">    <input type="submit"></form>

11.SelectionDirection属性
对input和textarea元素，用鼠标选取部分文字，来获取选取方向,属性值有“forward”（默认）、“backward”

<script>    function AD(){        var control=ducument.forms[0]['text'];        var Direction=control.selectionDirection;        alert(Direction);}</script><form>    <input type="text" name="text">    <input type="button" value="点击" onclick="AD()"></form>

复选框属性
12.indeterminate属性
过去只是选取和非选取两种状态。Html5新增indeterminate，说明复选框处于“尚未明确选取”状态

<input type="checkbox" interminate id ="cb">属性测试script>    function AD(){        var cb=ducument.getElementById("cb");        cb.interminate=true;}</script>

image提交按钮的属性
height和width

<form action="01.jsp" method="post">    姓名：<input type="image" src="x.png" width="20" height="20"></form>