本节主要讲解表单新增元素的controls属性、placeholder属性、List属性、Autocomplete属性、Pattern属性、SelectionDirection属性、Indeterminate属性、Image提交按钮的宽高属性。
1、controls属性
在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素。
<body> <script> function setValue(){ var label = document.getElementById("label"); var textbox = label.control; textbox.value = "010111"; } </script> <form> <label id="label"> 邮编: <input id="txt_zip" maxlength="6"> <small>请输入六位数字</small> </label> <input type="button" value="设置默认值" onclick="setValue()"> </form> </body>
2、文本框的placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
<body> <input type="text" placeholder="请输入用户名"></input> </body>
3、文本框的list属性
在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的Id。datalist元素也是html5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入(与下拉菜单的区别是,下拉菜单不允许自行输入)。datalist元素本身并不显示,而是当文本框获得焦点时,以提示输入的方式显示。
<body> <form> <input type="text" name="greeting" list="greeting"> <datalist id="greeting" style="display: none"> <option value="HTML5学习">HTML5学习</option> <option value="Android学习">Android学习</option> <option value="IOS学习">IOS学习</option> </datalist> </form> </body>
4、文本框的autocomplete属性
帮助输入所用的自动完成功能,是一个既节省时间又十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以在安全方面存在缺陷,只要使用了autocomplete属性,安全性方面也可以很好的控制。属性值为on,则会基于之前键入并提交的值,有自动补全功能;属性值为off,则关闭该功能;属性值为“”,则取决于浏览器的默认值。
<body> <form> <input type="text" name="greeting" autocomplete="on" list="greeting"></input> <input type="submit"></input> </form> </body>
5、文本框的pattern属性
在html5中,对input元素使用pattern属性,并将属性设置为某个格式的正则表达式时,在提交时,会针对这些进行检查。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。
<body> <form> 请输入内容 <input pattern="[A-Z]{3}" name ="part"></input> <input type="submit"></input> </form> </body>
6、文本框的SelectionDirection属性
对input和textarea元素,HTML5增加了SelectionDirection属性,当用户在这两个元素中,用鼠标选择部分文字时,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为“forward",当用户反向选取文字时,该属性值为”backward"。当用户没有选择任何文字时,该属性值为“forward"。
<body> <script> function AD(){ var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="test" name="text"></input> <input type="button" value="点击我" onclick="AD()"></input> </form> </body>
7、复选框的indeterminate属性
对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。在HTML5中,可以在javascript脚本代码中,对该元素使用indeterminate属性,说明复选框处于尚未明确选取与否的状态。
<body> <input type="checkbox" indeterminate id="cd">属性测试</input> <script> var cd = document.getElementById("cd"); cd.indeterminate = true; </script> </body>
8、image提交按钮的height属性与width属性
针对类型为image的Input元素,html5新增加了两个属性,height、width属性分别用来指定图片按钮的高度和宽度。
<body> <form action="test.json" method="post"> 姓名:<input type="text" name="name"></input> <input type="image" src="1.gif" alt="编辑" width="50" height="50"></input> </form> </body>