文本框list属性：
为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
文本框autocomplete属性：
辅助输入所有的自动完成功能，是一个即节省输入时间又十分方便的功能。就是当在输入框里输入了值并提交后就双击输入框就会出现下拉菜单在这里就有上一次输入的内容。
文本框list属性使用方式：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
<form>
text：<input type="text" name="greeting" autocomplete="on" list="greetings">
<!--使用style="display:none;"将detalist元素设定为不显示-->
<datalist id="greetings" style="display: none;">
<option value="Good Morning（早上好）">Good Morning（早上好）</option>
<option value="Hello（你好）">Hello（你好）</option>
<option value="Good Afternoon（下午好）">Good Afternoon（下午好）</option>
</datalist>
<input type="submit" />
<!-- 提交按钮 -->
<input type="reset" />
<!-- 重置按钮 -->
</form>
这里要申明一下：这里和HTML4的下拉菜单有点相像但是下拉菜单不能允许自行输入，这里还允许自行输入；
还有：
datalist里的内容不会显示在文本框里只有点击文本框才会出现
这时点击datalist 里的任意一个通过list="greetings" id="greetings"
来把点击的那个变成id="greetings"来显示在文本框中
文本框autocomplete属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autocomplete属性 示例</title>
</head>
<body>
<input type="text" name="geenting" autocomplete="on" list="geenting"/>
</body>
</html>
在上面的list属性使用的代码中就用到：
如图：
Paste_Image.png
autocomplete属性的值有三个：on off 空值（不指定值）
当值为on时输入框中除了提示list相关的之外还会提示用户自己输入过的数据，当用不指定值时就会使用浏览器的默认值（取决于各浏览器的决定）
网友评论