数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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 元素中必须至少存在一个子元素。
第一个子元素必须包含一个空值属性。或者
第一个子元素不能包含任何文本。
以下示例演示了在 select 元素中使用 required 属性。当用户尝试在不从下拉列表中选择选项的情况下提交表单时，会显示警告消息，并且表单不会提交。
示例
在此示例中，我们将创建一个 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: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>
1K+ 阅读量
