html - 为什么 HTML 选择框不支持 placeholder 属性？

Question

我正在使用 html 选择框，发现它们当前don't支持占位符属性，但我不太明白为什么会这样。

我想了解一下这是什么原因？感谢您的任何见解。

Answer 1

这可能是因为传统的占位符文本在选择元素中没有意义，因为您只有一组预定义的选项可供选择。您无法像在许多桌面应用程序中使用可编辑组合框那样编辑选择元素中的文本，但这只是因为 HTML 根本不提供开箱即用的可编辑选择元素。

select 元素通过 HTML5 规范称为 placeholder label option 的方式实现“占位符” ，其描述如下:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

它给出了以下示例:

Code Example:

The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

When there is no default option, a placeholder can be used instead:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

这个习语实际上自古以来就一直在使用。