HTML下拉菜单通常使用<select>元素配合<option>元素创建。以下是基本用法和示例:

基本语法

<select name="菜单名称" id="菜单ID"><option value="值1">选项1</option><option value="值2">选项2</option><option value="值3" selected>选项3(默认选中)</option><option value="值4">选项4</option>
</select>

常用属性

  • name: 表单提交时的字段名
  • id: 用于CSS或JavaScript操作
  • disabled: 禁用下拉菜单
  • multiple: 允许多选(按住Ctrl键选择多个)
  • size: 显示的行数(对于多选菜单)

对于<option>元素:

  • value: 选中时提交的值
  • selected: 默认选中此项
  • disabled: 禁用此项

实际示例

简单下拉菜单

<label for="cars">选择汽车品牌:</label>
<select id="cars" name="cars"><option value="volvo">沃尔沃</option><option value="saab">萨博</option><option value="mercedes">奔驰</option><option value="audi">奥迪</option>
</select>

分组选项(使用<optgroup>

<select name="courses"><optgroup label="编程语言"><option value="js">JavaScript</option><option value="py">Python</option></optgroup><optgroup label="设计"><option value="ps">Photoshop</option><option value="ai">Illustrator</option></optgroup>
</select>

多选下拉菜单

<select name="fruits" multiple size="4"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option><option value="pear">梨</option>
</select>