HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

HTML select 的 required 属性

htmlweb developmentfront end technology更新于 2025/6/18 14:04:17

<select> 元素的 required 属性用于告知用户，<select> 下拉菜单是必填项，需要在表单提交前提交。如果您未从下拉菜单中选择值并尝试提交表单，则表单将无法提交，并且网页上会显示警告。此 required 属性是在 HTML5 中引入的。

以下是语法−

<select required>

现在让我们看一个实现 <select> 元素的 required 属性的示例。 −

示例

<!DOCTYPE html>
<html>
<body>
<h1>Candidate Profile</h1>
<p>Following are the details to be submitted by the candidate:</p>
<h2>Educational Qualification</h2>
<form action="">
<section>
<h3>Graduation</h3>
<select required>
   <option value="">None</option>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section><br>
<input type="submit" value="Next">
</form>
</body>
</html>

这将产生以下输出。我们尚未从按要求设置的下拉列表中选择任何项目，因此将显示以下警告−

在上面的示例中，我们使用 <select> 设置了两个下拉列表。 −

<section>
<h3>Graduation</h3>
<select required>
   <option value="">None</option>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>

我们已将其中一个设置为用户必须填写，使用必填属性，否则表单将无法提交 −

<section>
<h3>Graduation</h3>
<select required>
   <option value="">None</option>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>

相关文章

有用资源

打印 下一节:HTML DOM KeyboardEvent getModifierState( ) 方法 ❯❮ 上一节:HTML DOM Input Time min 属性