如何在没有选择默认值的情况下设置必需的选择

Question

我正在尝试强制用户进行选择，而不仅仅是使用第一个字段。 如何防止用户在不使用 javascript 的情况下提交此表单？

<select required>
  <option >Make a selection</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select> 

Answer 1

根据this answer，如果您为默认的<option> 提供一个空的value 属性（以及其他条件，请参阅the <select> docs），则可以在<select> 上使用HTML5 的required 属性。

如果一个select元素指定了一个required属性，没有指定multiple属性，并且显示大小为1；如果选择元素的选项列表（如果有）中的第一个选项元素的值是空字符串，并且该选项元素的父节点是选择元素（而不是 optgroup 元素），那么该选项是选择元素的占位符标签选项。

所以你会想要

<select required>
    <option value="">Make a selection</option>
    <!-- more <option>s -->
</select>

旧浏览器需要 JavaScript 解决方案，因为它们不支持 HTML5。

Answer 2

HTML5 spec on select 定义了一个值为空字符串的选项作为占位符标签选项。

如果一个select元素指定了一个required属性，没有指定multiple属性，并且显示大小为1； 如果选择元素的选项列表中的第一个选项元素的值（如果有）是空字符串，并且该选项元素的父节点是选择元素（而不是 optgroup 元素），那么该选项就是选择元素的占位符标签选项。