先看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
input[type="submit"]{
width: 120px;
height: 40px;
border: 0;
background-color: antiquewhite;
}
input[type="submit"]:hover{
background-color: beige;
}
</style>
</head>
<body>
<form action="#" method="post">
<label><input type="radio" required />高中</label>
<label><input type="radio" required />大专</label>
<label><input type="radio" required />本科</label>
<label><input type="radio" required />硕士研究生</label>
<label><input type="radio" required />博士及以上</label>
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
提交数据时并没有进行非空验证。
正确代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
input[type="submit"]{
width: 120px;
height: 40px;
border: 0;
background-color: antiquewhite;
}
input[type="submit"]:hover{
background-color: beige;
}
</style>
</head>
<body>
<form action="#" method="post">
<label><input type="radio" name="q1" required />高中</label>
<label><input type="radio" name="q1" required />大专</label>
<label><input type="radio" name="q1" required />本科</label>
<label><input type="radio" name="q1" required />硕士研究生</label>
<label><input type="radio" name="q1" required />博士及以上</label>
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
原因:
单项选择的实现是通过对多个单选按钮设置同样的name属性值和不同的选项值。例如,使用两个单选按钮,设置这两个控件的name值为sex,选项值一个为女,一个为男,从而实现从性别中选择一个的单选功能。
单选按钮有一个重要的属性checked,用来设置或返回单选按钮的状态。一组name值相同的单选按钮中,如果其中一个按钮的checked属性被设置为true,则其他按钮的checked属性值就默认为false。