HTML5 表单新增元素与属性（二）
标签的control属性：在HTML5中，可以在标签内部放置一个表单元素，并通过该标签的control属性来访问该表单元素。
<!DOCTYPE html> <html> <head lang="en"> <title>标签的control属性</title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> function setValue(){ var label = document.getElementById('label'); var textbox = label.control; textbox.value = "010010"; } </script> <form> <label id="label"> 邮编： <input id="txt_zip" maxlength="6"/> <small>请输入6位邮编</small> </label> <input type="button" value="设置默认值" onclick="setValue()"></input> </form> </body> </html>
文本框的autocomplete属性：帮助输入所用的自动完成功能，是一个省时又方便的功能。在HTML5之前，因为谁都可以看见输入的值，所以在安全当面存在缺陷，HTML5中只要使用autocomplete属性，安全性方面也可以得到很好的控制。语法：<form autocomplete="on|off">
<!DOCTYPE html> <html> <head lang="en"> <title>文本框的autocomplete属性</title> <meta charset="utf-8"> </head> <body> <form action="1.html" method="post"> 姓名：<input type="text" name="greeting" autocomplete="off"/><br/> 年龄：<input type="text" name="greeting" autocomplete="on"/><br/> 邮箱：<input type="email" name="greeting" autocomplete="off"/><br/> <input type="submit"/> </form> </body> </html>
文本框的list属性：在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
<!DOCTYPE html> <html> <head lang="en"> <title>文本框的list属性</title> <meta charset="utf-8"> </head> <body> <form> <input type="text" name="greeting" list="greetings"/> <datalist id="greetings" style="display: none"> <option value="html">html</option> <option value="php">php</option> <option value="android">android</option> </datalist> </form> </body> </html>
文本框的pattern属性：在HTML5中，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，在提交时会针对这些进行检查其是否符合给定的格式。若不符合时，则不允许提交，同时在浏览器中显示提示文字，提示输入的内容必须符合给定的格式。
<!DOCTYPE html> <html> <head lang="en"> <title>文本框的pattern属性</title> <meta charset="utf-8"> </head> <body> <form action="1.html" method="post"> <input type="text" pattern="[A-Z]{5}">请输入A-Z之间的字符，最多5位 <input type="submit"/> </form> </body> </html>
文本框的placeholder属性：placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。
<!DOCTYPE html> <html> <head lang="en"> <title>文本框的placeholder属性</title> <meta charset="utf-8"> </head> <body> <form> <input type="text" placeholder="请输入电话号码"/> <input type="text" placeholder="请输入电子邮件地址"/> </form> </body> </html>
文本框的SelectionDirection属性：HTML5增加的SelectionDirection属性，当用户在这两个元素（input和textarea）中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为forward，当用户反向选取文字时，该属性值为backward。当用户没有选取任何文字时，该属性值为forward。
<!DOCTYPE html> <html> <head lang="en"> <title>文本框的SelectionDirection属性</title> <meta charset="utf-8"> </head> <body> <!-- Firefox中测试，Chrome不支持 --> <script type="text/javascript"> function AD(){ var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="test" name="text"/> <input type="button" value="点我" onclick="AD()"/> </form> </body> </html>
复选框的indeterminate属性：对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。
<!DOCTYPE html> <html> <head lang="en"> <title>复选框的indeterminate属性</title> <meta charset="utf-8"> </head> <body> <input type="checkbox" indeterminate id="aa"/>测试 <script type="text/javascript"> var aa = document.getElementById('aa'); aa.indeterminate = true; </script> </body> </html>
image提交按钮的height与width属性：针对类型为image的input元素，HTML5新增了两个属性，height、width分别用来指定图片按钮的高度和宽度。
<!DOCTYPE html> <html> <head lang="en"> <title>image提交按钮的height与width属性</title> <meta charset="utf-8"> </head> <body> <form action="1.html" method="post"> 姓名：<input type="text" name="name"/> <input type="image" src="./timg.jpg" alt="错误" width="20" height="15"/> </form> </body> </html>
