<select> 与 <option> 标签用法详解

什么是 <select> 和 <option>？

在 HTML 表单中，<select> 元素用于创建一个下拉列表，而 <option> 元素则定义了列表中的每一个可选项。

基本语法

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

常用属性说明

• value：提交表单时发送给服务器的值。
• selected：默认选中的选项。
• disabled：禁用某个选项或整个下拉框。
• multiple：允许用户选择多个选项（需按住 Ctrl 或 Cmd）。

示例：带默认选项和禁用项

<select name="color">
  <option value="" disabled selected>请选择颜色</option>
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue" disabled>蓝色（不可选）</option>
</select>

多选下拉框（multiple）

<select name="languages" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
</select>

小结

<select> 与 <option> 是构建用户友好表单的重要元素，适用于城市选择、分类筛选、偏好设置等场景。合理使用其属性可显著提升用户体验。