使用select和option标签可创建下拉菜单，常用于表单选择；通过name属性命名、value传递数据、selected设置默认项、disabled禁用选项或菜单，语义正确即可高效实现功能。
在HTML中制作下拉菜单，主要使用 select 和 option 标签。这种菜单常用于表单中，比如选择地区、性别、年份等场景，操作简单且节省页面空间。
使用 <select> 定义下拉菜单容器，内部用多个 <option> 表示可选项。
示例代码：
<select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select>
用户点击时会弹出列表，选择后显示所选项的内容。value值通常用于提交表单，而标签内的文字是显示给用户的名称。
立即学习“前端免费学习笔记（深入）”；
通过在某个 option 上添加 selected 属性，可以让该选项默认被选中。
例如：
<option value="shenzhen" selected>深圳</option>
页面加载时，“深圳”会作为当前选中值展示。若多个选项都加了 selected，只有第一个生效。
在表单中使用时，必须给 select 添加 name 属性，否则数据无法随表单提交。
示例：
<form action="/submit">
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<button type="submit">提交</button>
</form>
用户选择“上海”并提交后，服务器将收到 city=sh 的数据。
如果想让某一项不可选，可在 option 上加 disabled 属性：
<option value="" disabled selected>请选择城市</option>
也可在 select 上加 disabled 来禁用整个下拉框：
<select disabled> <option>任何选项都不能选</option> </select>
基本上就这些。select标签虽然简单，但结合name、value和selected属性后，在实际开发中非常实用。注意语义正确，避免嵌套错误，就能顺利实现功能。
以上就是HTML下拉菜单怎么制作_HTML下拉菜单select标签用法的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
323
收藏
