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，您可以在required上使用HTML5的<select>属性，如果您为默认<option>提供空value属性（以及其他条件，见the <select> docs）。

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

所以你想要

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

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

Answer 2

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

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

Answer 3

您可以设置标签元素的样式，但具有预先选择的选项：

<label>

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

</label>

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

3 个答案: