HTML | DOM 选项表单属性

HTML 选项表单元素（option）用于向用户展示可选的选项，以便用户选择其中之一。这些选项通常用于 select 元素内部。在 HTML DOM 中，有一些属性可以用来操作和获取选项表单的相关信息。

1. selected 属性

selected 属性用于表示一个选项是否被默认选中。它是一个布尔属性，如果设置为 true，则选项将被默认选中，否则不会。下面是一个示例：

<select>
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

在上面的示例中，"Option 2" 选项被设置为默认选中状态。

2. value 属性

value 属性用于设置选项的值。当选中一个选项时，该选项的值将被发送给服务器或用于其他处理。

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

在上面的代码中，每个选项都有一个对应的值（1、2、3），当用户选择一个选项时，浏览器会在提交表单时发送该选项的值。

3. label 属性

label 属性用于设置选项的标签。该标签将作为用户可见的文本。

<select>
  <option value="1" label="First Option">Option 1</option>
  <option value="2" label="Second Option">Option 2</option>
  <option value="3" label="Third Option">Option 3</option>
</select>

在上面的示例中，每个选项都有一个对应的标签（"First Option"、"Second Option"、"Third Option"），这些标签将以文本形式展示给用户。

4. disabled 属性

disabled 属性用于禁用选项，使其无法被选择。如果设置为 true，则该选项将为禁用状态，否则为可用状态。

<select>
  <option value="1">Option 1</option>
  <option value="2" disabled>Option 2 (disabled)</option>
  <option value="3">Option 3</option>
</select>

在上面的示例中，"Option 2" 选项被禁用，用户将无法选择它。

5. hidden 属性

hidden 属性用于隐藏选项，使其在界面上不可见。如果设置为 true，则该选项将被隐藏，否则可见。

<select>
  <option value="1">Option 1</option>
  <option value="2" hidden>Option 2 (hidden)</option>
  <option value="3">Option 3</option>
</select>

在上面的示例中，"Option 2" 选项被隐藏，用户将无法看到它。

总结

选项表单元素的属性可以用于设置默认值、值、标签，以及禁用或隐藏选项。这些属性是操作和控制选项表单的重要工具，可以通过 HTML DOM 来获取和修改这些属性的值。以上是一些常用的选项表单属性，开发人员可以灵活运用它们来满足实际的需求。