数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在单选输入字段中使用“required”属性？
HTML 的 input 元素，type 属性为“radio”，表示一组选项中可以选择的一个选项，同一时间只能选择一个选项。这些组通常由多个单选按钮定义，每个单选按钮在 name 属性中具有相同的值。选择单选按钮时，通常会呈现为一个填充或突出显示的小圆圈。
与复选框控件相反，单选按钮很大程度上依赖于value属性。在 HTML 中提交表单时，只有选定的选项才会与表单一起发送到处理代理，处理代理除了检查提交控件的值之外，没有其他方法来确定选择了哪个选项。这就是为什么每个选项的 value 属性在组内都应不同的原因。
为了分配到同一组，一组单选按钮必须在 name 属性中都具有相同的值。一组单选按钮必须位于同一文档中并属于同一表单，否则根本不存在。将单选按钮放在不同的表单或文档中会导致它们分离。
除了适用于所有<input>元素的通用属性外，单选输入还支持以下属性。
checked: 布尔属性，指示该单选按钮是否是该组中的默认选中项。
value: 提交表单时，只有当前选中的单选按钮才会发送到服务器，报告的值是 value 属性的值。如果未指定其他值，则默认使用字符串“on”。
required: required 属性是大多数 <input> 共享的一个属性。如果具有相同名称的一组单选按钮中的任何一个单选按钮都具有 required 属性，则必须选中该组中的一个单选按钮，即使它不是应用了该属性的单选按钮。
示例
让我们来看一个包含表单中单选按钮的示例。
<!DOCTYPE html>
<html>
<head>
<title> Simple form with radio buttons </title>
</head>
<body>
<form action= "" method= "GET">
<h4> Choose your age group </h4>
<label>
<input type= "radio" name= "age" value= "children">0-17
</label>
<br>
<label>
<input type= "radio" name= "age" value= "young">18-35
</label>
<br>
<label>
<input type= "radio" name= "age" value= "middle-aged">36-55
</label>
<br>
<label>
<input type= "radio" name= "age" value= "old">56+
</label>
<br><br>
<input type= "submit" onclick= "acknowledge()">
</form>
<script>
function acknowledge(){
alert(" The form has been submitted successfully. ")
}
</script>
</body>
</html>
可以看出，即使不从选项列表中选择单选按钮，也可以提交表单。我们可以通过在单选输入上使用“required”属性来解决此问题。
在单选输入字段中使用“required”属性
为所有输入设置required属性似乎更明显，但这是不必要的（如果我们不必动态生成单选按钮）。为了分组单选按钮，它们都应该具有相同的 name 属性值。这使我们能够一次只选择一个单选按钮，并将必要的属性应用于整个组。让我们来看一个相同的例子。
示例
在这个例子中，我们创建一个带有单选输入的表单，并将 required 属性应用于单选输入字段。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the "required" Attribute with the Radio Input Field </title>
<style>
form{
width: 550px;
margin: 10px;
background-color: lemonchiffon;
color: indigo;
font-size: 18px;
}
input{
margin: 10px;
}
#btn{
width: 60px;
height: 30px;
background-color: thistle;
color: azure;
font-weight: bold;
border: 0;
}
#btn:hover{
background-color: indigo;
}
</style>
</head>
<body>
<h3> Choose the correct answer </h3>
<form action= "" method= "GET">
<label>
<input type= "radio" name= "answer" value= "1" required>Java is a low-level language.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "2">Python does not support object-oriented programming.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "3">C is one of the most common and widely used programming languages.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "4">C is the preferred language for competitive programming.
</label>
<br>
<input type= "submit" id= "btn">
</form>
</body>
</html>
当用户尝试在不选中单选按钮的情况下提交表单时，required 属性会生成警告消息并阻止表单提交。
2K+ 次浏览
