<input type="radio"> 单选框

适用于 选择性别按钮网页等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <div>

                <!-- 单选框 -->

                <input type="radio">

            </div>

        </form>

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <p>

                请选择性别:

                男<input type="radio">

                女<input type="radio">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>

设置checked属性 默认选中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <!-- checked被默认选中 -->

            <p>

                请选择性别:

                男<input type="radio" checked>

                女<input type="radio">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>

提交到后台时候 选中一个提交一个就可以了 用value区分提交哪个

把value提交就可以了

input type=‘radio’   - 单选框 value,name属性(产生互斥效果:name要相等)
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com" method="get">

        <div>

            <!-- 产生互斥效果:name要相同-->

            <p>

                请选择性别:

                男<input type="radio" name="gender" value="1" checked>

                女<input type="radio" name="gender" value="2">

            </p>

        </div>

        <input type="submit" value="提交">

    </form>

</body>

</html>


 


点击提交




url上显示gender=1 就是男




提交




gender=2 女的




key-value形式
												


											
前端 HTML  form表单标签 input标签 type属性 radio 单选框的更多相关文章
	

    
								
  1. 常用6种type的form表单的input标签分析及示例
		
    <input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...
    
		
    2. 
						
  2. ajax form表单提交 input file中的文件
		
    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
    
		
    3. 
						
  3. 前端 HTML form表单标签 input标签 type属性 file 上传文件
		
     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
    
		
    4. 
						
  4. php 处理 form 表单提交多个 name 属性值相同的 input 标签
		
    一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $a ...
    
		
    5. 
						
  5. input file 在开发中遇到的问题   类似ajax form表单提交  input file中的文件
		
    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
    
		
    6. 
						
  6. 前端之form表单与css（1）
		
    目录 一.form表单 1.1表单的属性 1.2input 1.2.1form表单提交数据的两种方式 1.3select标签 1.4label标签 1.5textarea多行文本标签 二.CSS 2. ...
    
		
    7. 
						
  7. 判断form表单每个input字段是否有内容
		
    //---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...
    
		
    8. 
						
  8. 前端通过form表单构造带参数url
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    9. 
						
  9. 前端 HTML form表单标签 input标签 type属性 checkbox 多选框
		
    多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. nmon 加权平均法
			
    Snapshot %tm_act 1 0 2 0 3 0 4 0 5 0 6 6.1 7 6.3 8 6.5 9 9.1 10 5.9 11 0 12 0 13 0 14 0 15 0 (10*0*0 ...
    
			
    2. 
						
  2. C#基础系列——语法
			
    1.C#是这样开始的: 函数入口:static void  Main(String [] args){} 2.Hello  World 例子 using system;--------导入命名空间,里 ...
    
			
    3. 
						
  3. 企业应用打包的时候 修改ipa包的bundle identifier
			
    1.将ipa包后缀改为.zip,解压,之后打开包文件,找到info.plist文件后,修改相应的项就可以了.把修改后的文件重新压缩成zip,把zip改为ipa,替代原来的ipa,就可以了. 解决这个问 ...
    
			
    4. 
						
  4. eclipse下配置Spring环境
			
    工具: jdk1.8 win10 spring5.0 1.准备工作:下载Spring开发应用的插件,api 1.spring插件包:springsource-tool-suite-3.9.4.RELE ...
    
			
    5. 
						
  5. MySQL设置只读模式
			
    MySQL设置了主从复制,为保证数据一致性需要在从库设置只读状态 查看默认读写状态 show global variables like "%read_only%"; 设置只读 # ...
    
			
    6. 
						
  6. 洛谷P1029 最小公约数和最大公倍数问题【数论】
			
    题目:https://www.luogu.org/problemnew/show/P1029 题意: 给定两个数$x$和$y$,问能找到多少对数$P$$Q$,使得他们的最小公约数是$x$最大公倍数是$ ...
    
			
    7. 
						
  7. vue进阶用法-深入响应式原理
			
    异步更新队列 当vue异步执行更新DOM时,只要观察到数据变化,vue经开启一个队列,并缓冲在同一时间循环中发生的所有数据改变.如果同一个watch被多次触发,只会一次推入到队列中.然后在下一个事件循 ...
    
			
    8. 
						
  8. 所生成项目的处理器架构“MSIL”与引用“***”的处理器架构“x86”不匹配。这种不匹配可能会导致运行时失败。请考虑通过配置管理器...
			
    警告:所生成项目的处理器架构“MSIL”与引用“***”的处理器架构“x86”不匹配.这种不匹配可能会导致运行时失败.请考虑通过配置管理器更改您的项目的目标处理器架构,以使您的项目与引用间的处理器架构 ...
    
			
    9. 
						
  9. ML.NET速览
			
    什么是ML.NET? ML.NET是由微软创建,为.NET开发者准备的开源机器学习框架.它是跨平台的,可以在macOS,Linux及Windows上运行. 机器学习管道 ML.NET通过管道(pipe ...
    
			
    10. 
						
  10. robot framework教程-------虫师
			
    http://www.testclass.net/2017/09/28/happy-holidays/
    
			
    11.