基础下拉框用<select>和<option>即可实现，原生支持键盘导航与空格展开；必须设name属性以保证表单提交，value建议显式声明，selected标记默认项，禁用用disabled而非hidden。
用 <select> 和 <option> 搭出基础下拉框
HTML 里最直接的方式就是组合 <select> 容器和多个 <option> 项。它原生支持键盘导航、空格展开、上下键切换，不用 JS 就能工作。
常见错误是把 <option> 写在 <select> 外面，或者漏掉 value 属性导致提交时取不到值。
-
<select>必须有name属性，否则表单提交时该字段不会被发送 - 每个
<option>最好显式设置value；不设时默认取其文本内容，但含空格或特殊字符时容易出错 - 用
selected属性标记默认选项，不要靠顺序或 JS 模拟 - 示例：
<select name="theme"> <option value="light">浅色模式</option> <option value="dark" selected>深色模式</option> </select>
让下拉框支持多选：加 multiple 属性就行
加了 multiple 后，用户可按住 Ctrl（Mac 是 Cmd）点选多个，或拖拽选择连续项。注意这时提交的值会变成数组（服务端接收方式不同），且默认外观会变成长列表而非单行下拉。
- 必须配合
name属性结尾加[]（如name="tags[]"），PHP/Node.js 等后端才识别为数组 - 移动端上
multiple支持差，iOS Safari 基本不触发多选逻辑，实际项目中慎用 - 若想保持下拉样式又支持多选，得换自定义组件（比如用
<div>+ JS 实现），原生<select multiple>不提供下拉式多选界面
禁用某一项或整个下拉框：用 disabled 而不是 hidden
disabled 让选项不可交互、变灰、不参与表单提交；hidden 只是隐藏，仍可能被提交（尤其配合 JS 动态操作时）。
立即学习“前端免费学习笔记（深入）”；
- 对整个
<select>加disabled，所有<option>都失效 - 只对某个
<option>加disabled，该项不可选，但下拉框本身仍可用 —— 适合“暂不可用”的状态，比如地区联动中上级未选时禁用子项 - 别用 CSS 的
display: none或visibility: hidden替代disabled，它们不影响表单行为，容易导致数据缺失
为什么不能用 <input type="dropdown">？
HTML 标准里压根没有 type="dropdown" 这种写法，浏览器会把它当作 type="text" 处理，完全没下拉功能。有人误以为这是新属性，其实是把框架（如 Bootstrap）的 class 名或 Vue 组件名当成了原生 HTML。
- 所有“输入框带下拉”的效果，要么是
<select>，要么是<input>+ 自定义弹层（需要 JS 控制显示/隐藏/选项绑定） - 如果真想用
<input>实现搜索式下拉（比如输入“be”自动提示“Berlin”“Beijing”），必须自己监听input事件、渲染列表、处理点击和回车逻辑 - 原生
<select>不支持搜索过滤，这是它的硬限制
真正麻烦的不是怎么写出来，而是后续要处理聚焦样式、屏幕阅读器支持、键盘操作细节（比如 Esc 关闭、Tab 跳出）、以及和前后端约定好空值和多选的传输格式。这些往往比画个框花时间多得多。
