单选按钮 设置required属性无法进行非空验证
先看代码：
<!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。
单选按钮 设置required属性无法进行非空验证的更多相关文章
- JavaWeb 学习008-今日问题(非空验证尚未解决) 2016-12-2
1. 学生模块list页面 不能正常跳转 说是找不到stuid属性,但是我在entity里面和数据库建表的属性就是stuid:Grade模块代码一样,却可以正常运行 这是什么问题? <c:for ...
- JS非空验证及邮箱验证
非空验证 <body> <table> <tr> <td>姓名:</td> <td><input type="t ...
- Atitit 验证 数字验证 非空验证的最佳算法 h5
Atitit 验证 数字验证 非空验证的最佳算法 h5 <td><select class="searchBox-select" style=" ...
- JS-表单非空验证
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 实例:1.用户名的非空验证代码如下: <head> <m ...
- select标签非空验证，第一个option value=""即可
select标签非空验证,第一个option value=""即可,否则不能验证
- 非空验证（源代码Java版）
import java.util.Map; /** * 非空验证工具类 */ public class UntilEmpty { /** * @see: 验证string类型的是否为空 */ publ ...
- php非空验证
我想说这种方法是不是很常用的非空验证,现在的普遍使用的是javascript来验证非空,但是作为学习php的一些知识点,还是可以看看的. 先来看看commit.php中的方法 <?php $db ...
- .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效
RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...
- iview 表单非空验证
rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...
随机推荐
- JUC之CountDownLatch和CyclicBarrier的区别 (转)
CountDownLatch和CyclicBarrier的功能看起来很相似,不易区分,有一种谜之的神秘.本文将通过通俗的例子并结合代码讲解两者的使用方法和区别. CountDownLatch和Cycl ...
- HCTF2018-admin[条件竞争]
附上网上师傅的wp 学习链接: https://www.jianshu.com/p/f92311564ad0 按照师傅的wp复现一下: 源代码审计,去看路由里的login函数和change函数都在没 ...
- mysql逻辑备份与还原工具mysqldump
(一)mysqldump介绍 mysqldump是MySQL自带的逻辑备份工具,类似于Oracle的expdp/impdp,mysqldump备份十分灵活,可以在以下级别对数据库进行备份: 实例下的所 ...
- @Cacheable注解不生效原因
因为@Cacheable注解应用了AOP动态代理,生成代理类,判断缓存中是否存在该key,如果不存在则调用被代理类的标有@Cachable注解的方法,否则不执行. 所以当类A的方法a调用方法b(标有@ ...
- AcWing 891. Nim游戏
//a1 ^ a2 ^ ··· ^ an = 0 –>先手必败: //a1 ^ a2 ^ ··· ^ an != 0 –>先手必胜: #include<iostream> us ...
- NG-ALAIN 边学边记1
在文件夹下右键启动powerShell ng new my-project --skip-npm cd my-project ng add ng-alainnpm installng serve np ...
- Codeforces Round #603 (Div. 2) C.Everyone is A Winner!
tag里有二分,非常的神奇,我用暴力做的,等下去看看二分的题解 但是那个数组的大小是我瞎开的,但是居然没有问题233 #include <cstdio> #include <cmat ...
- LED Craft Light - How To Solve: Home Decoration Lighting
Home décor usually comes with a certain period of theme or a specific style of furniture, which will ...
- Working copy not locked; this is probably a bug, please report
问题描述 svn: Unable to lock 'G:\chengXu\2017_Year\JFW\Easy7\src' 解决方案
- Oracle查询当前用户和当前用户下的所有表
转载自:http://blog.itpub.net/29485627/viewspace-1246317/ Oracle查询当前用户和当前用户下的所有表 (1)查询当前用户 SQL> show ...