zoukankan      html  css  js  c++  java
  • 单选按钮 设置required属性无法进行非空验证

    先看代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>demo</title>
    	<style>
    		input[type="submit"]{
    			 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"]{
    			 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。

  • 相关阅读:
    [分享]一个天气预报的WebService应用实例
    XMLHttpRequest Ajax 实例简介
    CSS选择符
    MSDN SmartCast更改下载步骤
    发掘VS2005 SP1 (二) 更好的支持主题
    .Net+MySQL组合开发(二) 数据访问篇
    最近一打开cnblogs首页,就弹出电影网站!
    今天有点爽
    .Net+MySQL组合开发(三) 乱码篇
    发掘VS2005 SP1 (三) 母模页
  • 原文地址:https://www.cnblogs.com/xiaohaodeboke/p/12259999.html
Copyright © 2011-2022 走看看