结合h5新增的datalist元素，制作提示框

text:<input type="text" name="greeting" list="greetings"> <!-- 使用style="display:none";将datalist元素设置为不显示 --> <datalist id="greetings" style="display:none"> <option value="你是人">你是人</option> <option value="你是猪">你是猪</option> <option value="你是狗">你是狗</option> </datalist>

当你在文本框中输入“你”时，下面会出现三栏提示“你是人”、“你是猪”、“你是狗”，没有关键字将不出现提示

12. 文本框的autocomplete属性

autocomplete有三种值"on"、"off"、""（不指定）。不进行指定时，使用游览器的默认值。使用方法如下

<input type="text" name="greeting" list="greetings" autocomplete="on">

当你在文本框内输入如“我是人”点击提交后，返回前一页，再在文本框中输入“我”，就会出线提示“我是人”。

13. 文本框的pattern属性

相当于直接在html部分用正则表达式判断值输入是否符合要求。

请输入内容：<input type="text" pattern="[0-9][A-Z]{3}">

此段代码要求输入一个数字三个大写字母，如果输入不正确，则出现“请与所要求的内容保持一致（谷歌）”的提示。

14. 文本框的selectionDirection属性

针对input的text和textarea元素，当用户在这两个元素中用鼠标选取部分文字时，可以使用该元素来获取选择方向。

<script type="text/javascript"> function alertSelectionDirection() { var control = document.forms[0]['text']; var Direction = control.selectionDirection; alert(Direction); } </script> <form> <input type="text" name="text"> <input type="button" value="惦记我" onclick="alertSelectionDirection()" > </form>
15. 复选框的indeterminate属性

对于复选框来说，过去只有选取和与非选取状态，html5中，可以在js中对该元素使用indeterminate属性，以说明复选框“尚未明确选取”状态。

<script> var cb = document.getElementById("cb"); //将indeterminate的属性设置为true cb.indeterminate = true; </script> <input type="checkbox" indeterminate id="cb">indeterminate属性测试 16. image提交按钮的height属性与width属性

height:指定图片按钮中图片的高度；

width:指定图片按钮中图片的宽度；

<input type="image" src="img/2.png" width="23" height="23"> 17. textarea元素的maxlength属性与wrap属性

maxlength :使用整数值进行设定，用于限定textarea元素中可输入文字的个数。

wrap:可指定属性值为soft与hard.当属性为hard时，在没有用回车键而是文字超出一排规定范围而自动换行时，提交表单时会在换行处添加一个换行标志。