我可以将所需属性应用于HTML5中的<select>字段吗？

Question

如何检查用户是否从<select>HTML5中的字段中选择了某些内容？

我看到<select>不支持新required属性......那么我必须使用JavaScript吗？还是有什么我想念的？:/

Answer 1

必填:将第一个值设为空 - 必需对空值起作用

先决条件:正确的html5 DOCTYPE和命名输入字段

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

根据文档(列表和粗体是我的)

required属性是布尔属性.
指定后,用户需要在提交表单之前选择一个值.

如果是一个选择元素

• 指定了必需属性,
• 没有指定多个属性,
• 并且显示尺寸为1(没有SIZE = 2或更多 - 如果不需要则省略它);
• 如果select元素的选项列表中的第一个选项元素的值(如果有的话)是空字符串(即表示为value=""),
• 并且该选项元素的父节点是select元素(而不是optgroup元素),

然后该选项是select元素的占位符标签选项.

Answer 2

该<select>元素确实支持该required属性,根据规范:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

哪个浏览器不尊重这个？

(当然,您必须在服务器上进行验证,因为您不能保证用户将启用JavaScript.)

Answer 3

是的，它正在工作：

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

您必须将第一个选项保留为空白。

Answer 4

您可以使用selectedoption元素的属性来默认选择一个选项。您可以将required属性用于select元素，以确保用户选择了某些内容。

在Javascript中，您可以检查selectedIndex属性以获取所选选项的索引，也可以检查value属性以获取所选选项的值。

根据HTML5规范，selectedIndex“返回第一个选定项目的索引（如果有的话），或者返回？1（如果没有选定的项目）。value”“返回第一个选定项目的值（如果有的话），或者返回空字符串（如果有）没有选定的项目。”因此，如果selectedIndex = -1，那么您知道他们还没有选择任何项目。

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

Answer 5

您需要将value的 属性设置option为空字符串：

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

select当用户按下时，会将value所选内容返回option到服务器。空与空输入 -> 引发消息相同。submitformvaluetextrequired

w3学校

value 属性指定提交表单时要发送到服务器的值。

例子