单选按钮 设置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, ...
随机推荐
- Selenium模块/目录说明
目录说明: selenium/common #定义了webdriver的异常类 selenium/webdriver #定义了webdriver所有python实现: 1.各种浏览器支 ...
- 解决安装完Anaconda后右键没有powershell、、、
法一: win+R 打开资源管理 输入powershell.exe 法二: 额,,按住 shift 再右键...嘿嘿嘿
- HDU 1542 Atlantis（扫描线算法）
题意:给出n个矩形的左下角左边和右上角坐标,求这n个矩形的面积并 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1542 典型的扫描线算法的题目 什么是 ...
- 一、c++语言基础
1. 程序员的第一条代码"Hello,world!" #include <cstdio> //头文件,主要负责输入.输出 using namespace std;//C ...
- 2020算法设计竞赛 C 汉诺塔
作者:珩月链接:https://ac.nowcoder.com/discuss/367149来源:牛客网 将木板按照Xi从小到大排序,将这时的Yi数列记为Zi数列,则问题变成将Zi划分为尽可能少的若干 ...
- 1、spring与springmvc父子容器
转载于http://www.tianshouzhi.com/api/tutorials/spring 1.0 spring与springmvc父子容器 1.spring和springmvc父子容器概念 ...
- nginx location匹配及rewrite规则
location匹配规则 1. 实例 server{ location = \ { [配置A] } location / { [配置B] } location = /images/ { [配置C] } ...
- DVWA全级别之File Inclusion（文件包含）
File Inclusion File Inclusion,意思是文件包含(漏洞),是指当服务器开启allow_url_include选项时,就可以通过php的某些特性函数(include(),req ...
- Atcoder Beginner Contest 155D（二分，尺取法，细节模拟）
二分,尺取法,细节模拟,尤其是要注意a[i]被计算到和a[i]成对的a[j]里时 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> ...
- awk从放弃到入门（1）：awk基础
一.awk简介 awk其名称得自于它的创始人 Alfred Aho .Peter Weinberger 和 Brian Kernighan 姓氏的首个字母.实际上 AWK 的确拥有自己的语言: AWK ...