<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. MySQL 5.7.19  忘记密码 重置密码  配置文件my.ini示例  服务启动后停止 log配置
			
    [参考]java 项目 存入mysql后 变问号 MySql 5.6 (X64) 解压版 1067错误与编码问题的解决方案 一.my.ini 的mysqld下添加 skip-grant-tables  ...
    
			
    2. 
						
  2. wvblk 把 xp、2003、win7（32位） 装入 VHD
			
    关键1:是[预安装]阶段F6加载wvblk驱动: or 在还原ghost镜像后,导入wvblk驱动. 关键1.5:对于 win7(32位)来说,还可以在设备管理器内,通过添加“过时”硬件的方式导入wv ...
    
			
    3. 
						
  3. 【SQLSERVER】How to check current pool size
			
    SELECT des.program_name , des.login_name , des.host_name , COUNT(des.session_id) [Connections] FROM  ...
    
			
    4. 
						
  4. Puppet file资源使用
			
    1.文件管理介绍:          可管理的项目: 支持文件和目录 设置文件及目录的所有者及权限 恢复文件(包括文件的内容.权限及所有者) 清理目录以及子目录 2. 可使用参数: ensure :指 ...
    
			
    5. 
						
  5. 【class2src】Decompiler
			
    方法源自:https://stackoverflow.com/questions/272535/how-do-i-decompile-java-class-files 功能:给定一个.class文件, ...
    
			
    6. 
						
  6. js函数作用域
			
    函数 1.函数没有用return返回函数时,返回默认参数undefined 结果 return返回得话 就是里面得数值 结果 JS执行过程是上到下,下面的a元素覆盖了上面的a元素 function d ...
    
			
    7. 
						
  7. [原]openstack-kilo--issue(九) heat stacks topology中图形无法正常显示
			
    本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ======声明======= 欢迎转载:转载请注明出处 http://www. ...
    
			
    8. 
						
  8. Linux下的tr编辑器命令详解
			
    通过使用 tr,您可以非常容易地实现 sed 的许多最基本功能.您可以将 tr 看作为 sed 的(极其)简化的变体:它可以用一个字符来替换另一个字符,或者可以完全除去一些字符.您也可以用它来除去重复 ...
    
			
    9. 
						
  9. 关于web标准的一些想法
			
    关于web标准的一些想法 页面结构,表现,行为的关系.应该是各自分离又紧密联系的关系.从代码上分离出来.各自完成各自的功能,方便以后维护.紧密联系是指他们是相互依赖的.结构是核心,虽然从理论上讲不管什 ...
    
			
    10. 
						
  10. ABP之展现层（Datatables分页）
			
    在前面的随笔中,已经介绍了ABP的增删改查的操作,但是对于查询的数据并没有进行分页,只是进行粗糙的展示,今天的随笔中将摸索进行分页展示.这里打算使用的分页插件是DataTables,这是一款比较强大的 ...
    
			
    11.