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 ...
随机推荐
- 如何在openGauss 2.1.0中使用Job
如何在 openGauss 2.1.0 中使用 Job 如何在 openGauss 2.1.0 中使用 Job Job 类似 unix 中的 crontab,有定时执行的功能,可以在指定的时间点或每天 ...
- redis和memcached的区别和使用场景
Redis 和 Memcached 都是基于内存的数据存储系统.Memcached是高性能分布式内存缓存服务,其本质上就是一个内存key-value数据库.Redis是一个开源的key-value存储 ...
- vscode使用npm安装依赖报错
1.报错信息 npm ERR! code EPERM npm ERR! syscall open npm ERR! path C:\Node\node_cache_cacache\index-v5\4 ...
- .Net与AI的强强联合:AntSK知识库项目中Rerank模型的技术突破与实战应用
随着人工智能技术的飞速发展,.Net技术与AI的结合已经成为了一个新的技术热点.今天,我要和大家分享一个令人兴奋的开源项目--AntSK,这是一个基于.net平台构建的开源离线AI知识库项目.在这个项 ...
- Spring 源码阅读(二)IoC 容器初始化以及 BeanFactory 创建和 BeanDefinition 加载过程
相关代码提交记录:https://github.com/linweiwang/spring-framework-5.3.33 IoC 容器三种启动方式 XML JavaSE: ApplicationC ...
- 阿里云 MSE 支持 Go 语言流量防护
简介: OpenSergo 开源项目联合 Sentinel 项目,正在制定.完善限流降级标准,方便不同语言应用通过统一控制面来实现统一的微服务治理.阿里云微服务引擎(MSE)也会逐步支持 OpenSe ...
- 淘宝推荐、视频搜索背后的检索技术竟是它!深度揭秘达摩院向量检索引擎Proxima
简介: 淘宝搜索推荐.视频搜索的背后使用了什么样的检索技术?非结构化数据检索,向量检索,以及多模态检索,它们到底解决了什么问题?今天由阿里巴巴达摩院的科学家从业务问题出发,抽丝剥茧,深度揭秘达摩院内部 ...
- [FE] uni-app 动态改变 navigationBarTitleText 导航标题
改导航文字: uni.setNavigationBarTitle({ title: 'xx' }); 改 tabBar 文字: uni.setTabBarItem({ index: 0, text: ...
- WPF 探索任务管理器的进程分组逻辑
在看到 Win10 或 Win11 的 Task Manager 任务管理器时,不知大家是否有一个疑问,在 进程 标签里的应用进程是如何分组的.为什么有些组能包含很多个不同的进程,有些只能包含一个.本 ...
- 2019-6-11-C#-标准性能测试
title author date CreateTime categories C# 标准性能测试 lindexi 2019-06-11 08:36:22 +0800 2018-06-18 15:58 ...