html下拉框用包裹实现，必须含name属性和至少一个，value决定提交值，selected设默认选中，disabled可禁用整体或单选项。
用 <select></select> 和 <option></option> 搭建基础下拉框
HTML 下拉选择框的核心就是 <select></select> 元素，它本身不显示选项，必须配合至少一个 <option></option> 才能生效。每个 <option></option> 的文本内容是用户看到的选项，value 属性才是表单提交时实际发送的值。
常见错误是只写 <select></select> 不加 <option></option>，结果页面上啥也不显示；或者漏写 value，导致后端收到空字符串或默认索引值。
基础写法示例：
<select name="city"><option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option></select>
-
name属性必须设置，否则该字段不会随表单提交 - 未设置
selected时，浏览器默认选中第一个<option></option> - 如果想默认不选中任何项，可加一个空值
<option value="">请选择</option>并加上selected
让下拉框支持多选：加 multiple 属性但注意交互变化
加 multiple 属性后，用户可以按住 Ctrl（macOS 是 Cmd）多选，或拖拽选择连续项。但视觉和行为会明显不同：浏览器通常渲染为滚动列表而非下拉弹出式，且默认高度固定（一般显示 4 行），需用 CSS 调整 size 或 height。
关键点：
- 提交时，同名字段会以数组形式发送（如
city=sh&city=gz），后端需按多值方式解析 - 移动端 Safari 对
multiple支持有限，部分机型仍强制单选或唤起全屏选择器 - 不能和
required简单搭配使用——若设了required，用户必须至少选一项；但没选时验证失败提示不直观，建议配合 JS 做更明确的反馈
<optgroup></optgroup> 分组时别忽略 label 必填且不可为空
当选项较多需要归类时，<optgroup></optgroup> 很实用，但它要求 label 属性必须存在且不能是空字符串，否则部分浏览器（如 Firefox）会忽略整个分组，或渲染出错位的灰色标题。
正确写法示例：
<select name="role"><optgroup label="管理员"> <option value="admin">超级管理员</option> <option value="editor">内容编辑</option> </optgroup> <optgroup label="普通用户"> <option value="user">注册用户</option> <option value="guest">游客</option> </optgroup></select>
-
label值会被显示为禁用、缩进的灰色文字，不可点击也不可提交 -
<optgroup></optgroup>不能嵌套，也不能放在<option></option>外面（比如直接放在<select></select>外） - 某些旧版 IE 不支持
<optgroup></optgroup>的样式自定义，CSS 中option选择器无法作用于分组内的选项
禁用某项或整个下拉框：用 disabled 要分清作用对象
disabled 可以加在 <select></select> 上（整框禁用），也可以加在单个 <option></option> 上（仅该项置灰不可选）。两者行为差异很大：
- 加在
<select></select>上：字段完全不参与表单提交，即使有name - 加在
<option></option>上：该项不可选，但其他选项仍可提交；注意disabled的<option></option>不能被设为selected，否则浏览器可能自动跳到下一个可用项 - 若用 JS 动态启用/禁用，记得同时更新 UI 状态（比如加灰背景），因为纯 HTML 的
disabled在部分屏幕阅读器中可能未被正确通告
容易被忽略的是：被 disabled 的 <select></select> 在表单序列化（如 form.serialize() 或 FormData）中直接消失，不是传空值——这点和 readonly 不同，而 HTML 原生没有 readonly 对应下拉框的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
