HTML下拉框必须使用标签，其基础结构为包裹多个，value属性定义提交值；selected和disabled分别控制默认选中与禁用项；首项value=""可模拟placeholder；多选需加multiple属性，注意name属性和value为空的设置。
HTML下拉框必须用 <select></select> 标签，不能用 <input> 或 <div> 模拟<p>浏览器原生下拉控件只认 <code><select></select>。用其他标签“假装”下拉，会导致无障碍访问失败、表单提交丢失值、移动端无法唤起系统选择器等问题。
基础结构固定为：<select></select> 包裹多个 <option></option>，每个 <option></option> 用 value 属性定义提交值，标签内文字是用户看到的选项内容：
<select name="city"> <option value="">请选择城市</option> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select>
selected 和 disabled 属性控制默认选中与禁用项
默认选中某一项，不是靠 JS 设置，而是直接在对应 <option></option> 上加 selected 属性（推荐只设一个）；禁用某项则加 disabled 属性——这两者都影响表单提交行为：
-
selected：页面加载时该选项被高亮，且其value成为表单初始值 -
disabled：该项不可点击、不参与提交、视觉上灰化（但保留 DOM 结构） - 若同时设
selected和disabled，该值仍会作为初始值，但用户无法切换回来
示例：
立即学习“前端免费学习笔记（深入）”；
<select name="role"> <option value="">-- 选择身份 --</option> <option value="admin" selected>管理员</option> <option value="user">普通用户</option> <option value="guest" disabled>访客（已停用）</option> </select>
下拉框没有“占位符”属性，<option></option> 第一项常用来模拟 placeholder
<select></select> 不支持 placeholder 属性，强行加了也没效果。常见做法是用第一个 <option></option> 表达提示语，并设空 value：
- 必须设
value=""，否则提交时会把提示文字（如“请选择”）当真实值发给后端 - 配合后端或 JS 校验：如果提交的
value为空，视为未选择 - 不要用
disabled+selected组合做 placeholder，否则用户无法再选中它来“重置”
正确写法：
<select name="category" required> <option value="">--- 请选择分类 ---</option> <option value="tech">技术</option> <option value="design">设计</option> </select>
多选下拉框要加 multiple 属性，且用户操作方式完全不同
加了 multiple 的 <select></select> 会显示为多行列表，默认不展开，用户需按住 Ctrl（Windows）或 Cmd（Mac）多选，或拖拽选择连续项：
- 提交时同名字段会变成数组（如
hobby[]=reading&hobby[]=coding），后端需按数组解析 -
size属性可控制可见行数（例如size="4"显示 4 行），不加则默认只显示一行+下拉箭头 - 移动端对
multiple支持差，很多系统会降级为单选弹窗，慎用
示例：
立即学习“前端免费学习笔记（深入）”；
<select name="hobby[]" multiple size="4"> <option value="reading">阅读</option> <option value="coding">编程</option> <option value="drawing">绘画</option> </select>
实际项目里最容易被忽略的是 name 属性缺失导致表单提交无数据，以及第一个 <option></option> 忘记设空 value 而污染业务逻辑。
