HTML——input之单选按钮
在 HTML 中,把 <input> 标签的 type 属性设置为 radio 可以表示单选按钮。具体语法格式如下:
<input type="radio" />
例子:
<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
性别:<input type="radio" name="sex" value="girl">女
<input type="radio" name="sex" value="boy" checked="checked">男
</form>

属性:
1、checked属性
checked 属性用来设置页面加载时单选按钮的选中状态。当属性值为“checked”时,单选按钮会被选中。
<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
性别:<input type="radio" name="sex" checked>女
<input type="radio" name="sex" checked>男
</form>
注意:当 type 属性值为 radio 时,name 属性值必须保持一致。checked="checked"可以简写为 checked。
2、name属性
当 type 属性值为 radio 时,name 属性值必须保持一致。
3、value属性
<form action="http://vip.biancheng.net/login.php" method="post" name="formName">
性别:<input type="radio" name="sex" value="girl">女
<input type="radio" name="sex" value="boy" checked="checked">男
</form>

注意: 通过运行结果发现,value 值并不会显示在页面中。之所以建议为每个按钮添加 value 值,是因为最终提交表单时,服务器可以根据 value 属性值辨别提交的是哪一项。
HTML——input之单选按钮的更多相关文章
- HTML中获取input中单选按钮radio数据(性别例子)
个人学习整理 1.编写HTML <!doctype html> <html> <head> <meta charset="utf-8"&g ...
- angularjs—指令input
input[text] input一般和ngModel结合使用来实现双向绑定,同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填(ngRequired可以控 ...
- HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- input 单选按钮radio 取消选中(转载)
input单选按钮: 在radio按钮中添加属性tag 0代表未被选中 HTML代码: <input name="rdo1" value="AA" ty ...
- 表单单选按钮input[type="radio"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- input 单选按钮radio 取消选中
//需要先引入JQ.js <input name="rdo" value="AA" type="radio" tag="0& ...
- jQ-多选按钮实现单选按钮的功能以及input按钮的优化
css: .displayN{display: none;} label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-s ...
- <input type="radio">单选按钮
转自:http://www.divcss5.com/html/h490.shtml1 <form> 男性: <input type="radio" checked ...
随机推荐
- 如何通过 kubectl 进入 node shell
概述 假设这样一个场景: 生产环境中,Node 都需要通过堡垒机登录,但是 kubectl 是可以直接在个人电脑上登录的. 这种场景下,我想要通过 kubectl 登录到 K8S 集群里的 Node, ...
- szfpga Lattice高速下载器HW-USBN-2B 常见问题解答
.产品特点 1). 支持windows7,Windows10 操作系统,两个操作系统非常稳定不断线. 2). 支持JTAG 模式,速度快,最高30Mb/s,调试serdes core,不会像hw-us ...
- C#判断窗体是否被遮挡 - 开源研究系列文章
上次发布了托盘窗体的显示与隐藏的博文:,但是在测试窗体最大化的时候发现窗体没有隐藏,调试了下知道是窗体是否被遮挡这个函数的判断有问题.于是就研究了该代码,然后联系了该操作类的作者,也是博客园的园友,然 ...
- 《Effective C#》系列之(二)——如何使代码易于阅读和理解
在<Effective C#>这本书中,使代码更易于阅读和理解是其中一章的主要内容.以下是该章节的一些核心建议: 使用清晰.有意义的名称:变量.方法.类型等的名称应该能够准确地描述其含义, ...
- 实际项目中一般使用到的git知识
1.项目上线分支管理流程 图片压缩太厉害有些模糊 700k 压缩到20多k 清晰些的图片地址https://project.zdzspace.cn/test-vuekey 2.一些常用的git命令 g ...
- 【笔记】Java相关大杂烩②
[笔记]Java相关大杂烩② if单分支情况下,如果没有加 {},那么默认只包含第一条语句. if 和 else 分支后面如果包含多条语句,那么需要使用 {} 括起来. 不能随意地使用数学上的表达方式 ...
- 持续定义Saas模式云数据仓库+实时搜索
简介: 本文由阿里云计算平台事业部 MaxCompute 产品经理孟硕为大家带来<持续定义Saas模式云数据仓库+实时搜索>的相关分享.以下是视频内容精华整理,主要包括以下三个部分:1.W ...
- 函数计算 GB 镜像秒级启动:下一代软硬件架构协同优化揭秘
简介:本文将介绍借助函数计算下一代 IaaS 底座神龙裸金属和安全容器,进一步降低绝对延迟且能够大幅降低冷启动频率. 作者:修踪 背景 函数计算在 2020 年 8 月创新地提供了容器镜像的函数部署 ...
- [Gin] gin-jwt 中间件的请求流程与使用思路
gin-jwt 中间件是对 jwt-go 的封装以适应 gin 框架.gin-jwt 对不同的请求流程有不同的 handler: 登录请求流程 是用 LoginHandler. 需要 jwt 令牌的后 ...
- WPF 制作一个占用文件的测试工具
我在开发软件进行测试时,需要测试拖入的文件被占用时软件的行为,于是就做了一个文件占用工具,此工具可以将某个文件进行占用,以及获取某个文件被哪个进程占用 先给大家看一下效果: 以上是拖入文件到灰色部分, ...