什么是 <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> 是构建用户友好表单的重要元素,适用于城市选择、分类筛选、偏好设置等场景。合理使用其属性可显著提升用户体验。