1.datalist标签
作用：给输入框绑定待选项
2.datalist格式
<datalist>
<option>待选项的内容</option>
</datalist>
我们做一个形状类似于百度搜索框的案列
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">
请输入你喜爱的书：<input type="text" list="books"/>
<datalist id="books">
<option>静静的顿河</option>
<option>战争与和平</option>
<option>罪与罚</option>
<option>呐喊</option>
<option>奇点接近</option>
<option>凡尔纳科幻小说全集</option>
</datalist>
</form>
</body>
</html>
运行结果如图所示：
假设我们改成百度这样的，输入12 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">
请输入你喜爱的书：<input type="text" list="books"/>
<datalist id="books">
<option>123</option>
<option>12356订火车票</option>
<option>12333</option>
<option>12315</option>
<option>12345</option>
<option>12366</option>
</datalist>
</form>
</body>
</html>
运行结果如图所示：
总结结论：
如何给输入框绑定待选列表？
1.搞一个输入框
请输入你喜爱的书：<input type="text" list="books"/>
2.搞一个datalist的列表
<datalist id="books">
<option>123</option>
<option>12356订火车票</option>
<option>12333</option>
<option>12315</option>
<option>12345</option>
<option>12366</option>
</datalist>
3.给datalist列表标签添加一个id
id="books"
4.给输入框添加一个list属性，将datalist的id对应的值赋值给list属性即可。
list="books"
网友评论