html下拉列表必须用而非；强制单选需+，默认选中用selected，禁用项用disabled，引导项应value="" selected disabled，多选需multiple且后端支持数组，required生效需确保无空值可选。
HTML 下拉列表用 <select></select>，不是 <datalist></datalist>
很多人搜“下拉菜单”就混用 <datalist></datalist>，但它只是输入框的提示补全，无法限制用户只能选预设项。真要强制单选、带默认值、提交时有明确 name/value 的下拉框，必须用 <select></select> + <option></option>。
常见错误现象：
– 输入框里能打字，但期望只让用户点选
– 表单提交后后端收不到 name 对应的值（漏写 name 属性）
– 页面一加载就触发了 onchange 事件（误加了 onchange="xxx()" 且没做防重复）
-
<select name="city"></select>是必须的，否则表单提交时这个字段不会被发送 - 默认选中用
<option selected></option>，不要用value="selected"这种错误写法 - 禁用整个下拉框：加
disabled属性；禁用某一项：给<option></option>加disabled
怎么让某个 <option></option> 默认选中又不可选？
比如“请选择城市”这种引导性选项，它不该是有效提交值，但又要作为视觉默认项出现——不能只靠 selected，否则用户不点就直接提交了无效值。
- 写成：
<option value="" selected disabled>请选择城市</option> -
value=""确保提交时该字段为空（后端容易判断） -
disabled防止它被再次选中（注意：disabled 的 option 不会触发change事件） - 别用
hidden或 CSSdisplay:none，那样会导致该 option 完全不参与表单序列化
<select multiple></select> 多选下拉框要注意什么？
多选下拉框在桌面端需按住 Ctrl/Command 点击，在移动端体验差，且默认样式丑。但它在表单语义和可访问性上比一堆复选框更准确（比如“你常去的城市”这种多值字段）。
立即学习“前端免费学习笔记（深入）”；
- 必须加
name，且后端要能接收数组（如 PHP 的name="cities[]"，Node.js 的req.body.cities是数组） - 用户不按 Ctrl 直接点选，会取消其他已选项——这是浏览器原生行为，没法绕过
- 移动端 Safari 和 Chrome 对
multiple支持不稳定，部分机型点开后无反应，建议搭配 JS 检测并降级为标签式选择器 - 设置高度用
size="4"显示 4 行，而不是靠 CSS height，否则滚动和聚焦可能异常
为什么加了 required 却还能提交空值？
因为 required 只检查当前选中的 <option></option> 的 value 是否为空字符串。如果第一个 <option></option> 是 <option value="">--</option> 并且它被选中，required 就会失败。
- 正确做法：把引导项设为
<option value="" disabled selected></option>，再加required - 这样浏览器认为“没有合法选项被选中”，从而阻止提交
- 注意：Chrome 会把
disabled selected的 option 当作“未选择”，而 Firefox 旧版本有 bug，建议测试主流浏览器 - 别依赖 JS 校验代替
required，否则无障碍用户（如屏幕阅读器）可能绕过校验
最易被忽略的是 disabled + selected 的组合逻辑——它既满足 UI 引导，又让表单约束真正生效。很多线上表单出问题，就卡在这行代码的属性顺序或缺失上。
