单选按钮设置required属性无法进行非空验证

最新推荐文章于 2023-11-12 18:35:22 发布

战南城

最新推荐文章于 2023-11-12 18:35:22 发布

阅读量2.1k

点赞数 2

分类专栏：个人笔记，不喜勿喷！！

本文链接：https://blog.csdn.net/qq_29948297/article/details/108354850

版权

个人笔记，不喜勿喷！！专栏收录该内容

329 篇文章 2 订阅

订阅专栏

先看代码：

<!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。

战南城

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选按钮设置required属性无法进行非空验证

先看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> input[type="submit"]{ width: 120px; height: ...
复制链接

扫一扫