<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. 一、Bitcoin比特币与BlockChain区块链技术
			
    一.比特币历史 2008 年 10 月 31 日,一个网名叫中本聪(英文翻译过来滴)的家伙发布比特币唯一的白皮书:<Bitcoin:A Peer-to-PeerElectronic Cash S ...
    
			
    2. 
						
  2. 爱快路由计费系统easyradius隆重发布，支持V2版本，欢迎大家测试使用
			
    随着PA.BV接口的发布的临近,我们已经对ROS及爱快V2接口进行大量的升级工作 经用户测试,各方便已满足用户需求. 其实很早以前我们就有支持爱快路由的打算,但是由于各方便原因,通讯接口做好了,但是并 ...
    
			
    3. 
						
  3. jdk和tomcat基本配置
			
    问题:前端采用grunt构建,后台采用java编写使用Eclipse或IntelliJ,把Tomcat嵌入到开发工具当中.问题一:在于是grunt编译之后生成的文件,每次都需要刷新项目文件夹,然后在刷 ...
    
			
    4. 
						
  4. 【Window 7】解决Win7远程桌面无法全屏的方法
			
    在Windows中有一项远程桌面功能,可以登录到其他电脑上进行远程控制,就像操纵本机一样,非常方便.但是最近发现用远程桌面登录过去时并不是全屏模式,而是窗口模式,老要拉滚动条,实在很不方便,今天还是到 ...
    
			
    5. 
						
  5. Linux驱动技术(六) _内核中断
			
    在硬件上,中断源可以通过中断控制器向CPU提交中断,进而引发中断处理程序的执行,不过这种硬件中断体系每一种CPU都不一样,而Linux作为操作系统,需要同时支持这些中断体系,如此一来,Linux中就提 ...
    
			
    6. 
						
  6. android基础---->SQLite数据库的使用
			
    SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且只利用很少的内存就有很好的性能.此外它还是开源的,任何人都可以使用它.许多开源项目((Mozilla, PHP, Python)都使 ...
    
			
    7. 
						
  7. 深入理解 Java 虚拟机之学习笔记(2)
			
    本节介绍 Java堆的OutOfMemoryError测试 Eclipse Memory Analyzer分析内存溢出 虚拟机栈和本地方法栈StackOverflowError测试 方法区和运行时常量 ...
    
			
    8. 
						
  8. IOS多线程处理
			
    http://www.jianshu.com/p/0b0d9b1f1f19 首页专题下载手机应用 显示模式登录     注册登录 添加关注 作者 伯恩的遗产2015.07.29 00:37* 写了35 ...
    
			
    9. 
						
  9. python3 的 mysql 简单操作
			
    一.python 提供的 db 接口 pymysql 两个基本对象: connection.cursor 连接示例 # connect_demo.py import pymysql db = pymy ...
    
			
    10. 
						
  10. ERP项目实施记录08
			
    已经和软件商签订报价软件合同过去了2周,五一过后会有测试版本出来. 在整个接触过程中感觉开发方思路就是照葫芦画瓢,拿着这边的表单尽量往软件里搬,没有理清思路又急着赶进度:另外又要兼顾他们现有的&quo ...
    
			
    11.