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。

  • 相关阅读:
    MySQL之数据表的插入内容 空与非空(六)
    输出杨辉三角形
    输入三个double型的数据,放入到a,b,c三个变量中去,使用条件结构与交换逻辑将这三个变量中的值从小到大排列。
    软件测试
    过程设计工具
    设计原理
    总体设计
    生活,也让别人生活
    计算器案例
    需求分析
  • 原文地址:https://www.cnblogs.com/xiaohaodeboke/p/12259999.html
Copyright © 2011-2022 走看看