单选按钮 设置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, ...
随机推荐
- yii csrf 配置
csrf默认启用 全局配置 'components'=>array( 'request'=>array( // Enable Yii Validate CSRF Token 'enable ...
- bootstrap资料索引
中文手册 : http://w3c.3306.biz/bootstrap_forms/show-25-64-1.html
- Tensorflow中one_hot() 函数用法
官网默认定义如下: one_hot(indices, depth, on_value=None, off_value=None, axis=None, dtype=None, name=None) 该 ...
- python的selenium实现自动登陆
知道思想,参考其他文档,python的request模块和selenium模块都可以实现get_cookie()和 add_cookie()的功能. 由于现在在学习selenium自动化测试,我选用s ...
- 问题解决：xampp中phpmyadmin“无法连接：无效的设置”
背景: 在服务器上搭建Testlink测试管理系统,却在打不开phpmyadmin地址,无法设置数据库密码,后续步骤无法进行 (错误界面的图片忘记截取了┭┮﹏┭┮) 解决办法: 一:验证apache端 ...
- 装饰器_python
一.装饰器中提及的知识点 装饰器主要作用:在原函数基础上添加新功能 1.作用域:LEGB 2.高阶函数 3.闭包(在一个内部函数中,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就认 ...
- vector 牛逼 +lower_bound+ upper_bound
vector 超级 日白 解决的问题空间问题,可以自由伸缩. 一下用法: 向量大小: vec.size(); 向量判空: vec.empty(); 末尾添加元素: vec.push_back(); / ...
- Learn from Niu 2020.1.13
观念: 1. 把可视化的东西拾起来, 毕竟是做那个出身的. 2. 可视化里面时序数据,时空数据一直都是非常重要的. 3. know your data永远是最重要的一步, 我想更好的方式是,数据驱动, ...
- Laravel-admin 刷新页面后，左侧菜单栏怎么默认选中当前栏目
修改public\vendor\laravel-admin\laravel-admin里面的laravel-admin.js $(window).on('load',function(){ $('.s ...
- <img src = "..."/>的一个图片上面怎么在放上字
转自:https://zhidao.baidu.com/question/1495805873400412779.html 例子1: html中可以用css相对定位让文字在图片的上面. 1.新建htm ...