如何在 HTML5 中的 <select> 元素上使用 "required" 属性
HTML 中的 select 元素表示一个显示选项菜单的控件。它用于创建下拉菜单，以便用户可以选择所需的值。它对于收集要发送到服务器的数据非常有用。<select> 标签通常用于表单元素中，待选项目则编码在另一个标签 <option> 中。它也可以用作独立元素，通过其特殊属性之一 <form> 与表单关联。
HTML 中的 <select> 标签与许多属性关联。下面将进行讨论。
name: 每个表单控件都必须附加名称，因为它用于在数据提交到服务器后引用数据。
multiple: 用户可以使用此属性从下拉菜单中选择多个选项。
required: 这通常用于验证。除非用户从下拉列表中选择至少一个选项，否则它会阻止表单提交。
disabled:此属性阻止用户与选项交互。
size:size 属性以数字表示，指定在任何给定时间可见的选项数量。
autofocus:此属性应用于所有表单输入，包括 select，以指示输入在页面加载时应处于焦点状态。
示例
以下示例展示了 <select> 标签在未使用任何特定属性时的默认行为。
<!DOCTYPE html>
<html>
<head>
<title>Default behavior of select tag</title>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<br><br>
<button onclick="acknowledge()">Submit</button>
</form>
<script>
function acknowledge(){
alert("The form has been submitted successfully.")
}
</script>
</body>
</html>
在上面的示例中，用户即使没有从下拉菜单中选择选项也可以提交表单。为了防止这种情况发生，select 标签的 required 属性是必需的。本文将讨论如何在 HTML 中的 select 元素上使用 'required' 属性。
使用 'required' 属性
required 属性表示该元素是表单提交所必需的。如果我们没有从下拉菜单中选择值并尝试提交表单，则表单将无法提交，并且网页上会显示警告。HTML5 引入了 required 属性。
可以这样写:
<select required="required"> <select required='required'> <select required=required> <select required=""> <select required=''> <select required>
在 <select> 元素中使用"required"属性有一些先决条件:
select 元素中必须至少有一个子元素。
第一个子元素必须包含一个空的 value 属性。或者
第一个子元素不得包含任何文本。
以下示例演示了在 select 元素中使用 required 属性。当用户尝试提交表单时，如果未从下拉列表中选择任何选项，则会显示一条警告消息，并且表单不会提交。
示例
在此示例中，我们将创建一个 select 元素，其第一个子元素的 value 属性为空，然后对其应用 required 属性。
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:25px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
示例
在此示例中，我们将创建一个 select 元素，其第一个子元素没有内容，然后将 required 属性应用于它。
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:45px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option></option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
