正在加载...
HTML Datalist
上一课 select 是封闭列表中的选择。datalist 是另一件事：在普通 input 里输入，浏览器给出建议。可选建议，也可写列表里没有的内容。
为什么需要 datalist
搜索、颜色和城市常需要常见答案，又不禁止少见值。select 拒绝列表外；空 input 没有提示。datalist 用可自由输入的建议填补空白。
直接回答
1) 带 option value 的 datalist。2) input 上 list 等于 id。3) label 与 name 在 input 上——datalist 本身不提交。4) 建议或自定义均可。5) 必须只能从列表选时用上一课的 select。
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
浏览器建议示例
Browser 字段从 Firefox 到 Safari。输入 Brave 仍然可以——列表不会锁死。
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
阅读浏览器示例
- 提交的是 input，不是 datalist
- list 必须与 id 匹配
- 每个 option value 是一条建议
- name 键控 input 的值
- label 给字段命名
- 与 select 不同：不限于四个名字
用 datalist 做城市建议
第二段：建议城市，仍可输入村庄名。与上一课封闭 select 对比。
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
阅读城市示例
- 同样的 label/name 模式
- list/id 连接提示
- 提交的是 input 文本
- autocomplete=off 可选
- 下一课：更广的 accessibility
选择 datalist、select 还是 input
- 必须固定集合：select
- 需要提示且可自由输入：input + list + datalist
- 不需要建议：普通 input
- datalist 不替代 label 或 name
- 不要把 datalist 嵌进 input；用 id 关联
练习——接上建议
- 第五个 option Opera
- 故意弄错 id 再修好
- 输入自定义名称
- 城市列表加 Mashhad
- 改成 select；写一句差异
- 一句：datalist 建议；select 限制
- 下一课 accessibility 讲更广命名
易错点
- list 与 id 不匹配
- 指望拒绝自由输入
- 忘记 label
- 忘记 input 的 name
- 把 name 写在 datalist 上
- 没有 value 的空 option
- 对自由字段套用纯 select 思维
小结
- datalist + option value = 给 input 的建议
- 配对 list 与 id
- 允许输入列表外
- label 与 name 在 input 上
- 封闭选择用 select
- 下一课：accessibility
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
5
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部