在 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之单选按钮的更多相关文章

  1. HTML中获取input中单选按钮radio数据(性别例子)

    个人学习整理 1.编写HTML <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  2. angularjs—指令input

    input[text] input一般和ngModel结合使用来实现双向绑定,同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填(ngRequired可以控 ...

  3. HTML/CSS/JavaScript学习总结(转)

    HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...

  4. 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  5. input 单选按钮radio 取消选中(转载)

    input单选按钮: 在radio按钮中添加属性tag  0代表未被选中 HTML代码: <input name="rdo1" value="AA" ty ...

  6. 表单单选按钮input[type="radio"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. 自定义常用input表单元素二:纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  8. input 单选按钮radio 取消选中

    //需要先引入JQ.js <input name="rdo" value="AA" type="radio" tag="0& ...

  9. jQ-多选按钮实现单选按钮的功能以及input按钮的优化

    css: .displayN{display: none;} label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-s ...

  10. <input type="radio">单选按钮

    转自:http://www.divcss5.com/html/h490.shtml1 <form> 男性: <input type="radio" checked ...

随机推荐

  1. DevEco Device Tool 3.0 Release带来5大能力升级,让智能设备开发更高效

    原文:https://mp.weixin.qq.com/s/QYlHUU05BDlzVxbfZbiKOg,点击链接查看更多技术内容. DevEco Device Tool是面向智能设备开发者提供的一站 ...

  2. mysql 重新整理——索引优化explain字段介绍一 [九]

    前言 在七种介绍了explain这东西,那么具体来看下它是如何来运行的吧. 正文 id 来看一条语句:EXPLAIN select * from departments,dept_emp,employ ...

  3. 力扣1132(MySQL)-报告的记录Ⅱ(中等)

    题目: 编写一段 SQL 来查找:在被报告为垃圾广告的帖子中,被移除的帖子的每日平均占比,四舍五入到小数点后 2 位. Actions 表: Removals 表: Result 表: 2019-07 ...

  4. KubeVela 插件指南:轻松扩展你的平台专属能力

    简介: 本文将会全方位介绍 KubeVela 插件的核心机制,教你如何编写一个自定义插件.在最后,我们将展示最终用户使用插件的体验,以及插件将如何融入到 KubeVela 平台,为用户提供一致的体验. ...

  5. CNCF 沙箱项目 OCM Placement 多集群调度指南

    ​简介:在这篇文章中,将介绍 Placement 如何选择到所需的集群,Placement 可以提供的调度功能,以及一些场景下的最佳实践,使用者可以参考示例来编写符合自己要求的 Placement.其 ...

  6. 阿里云PolarDB开源数据库社区与 Tapdata 联合共建开放数据技术生态

    ​简介:近日,阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态. 近日,阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态.在此之 ...

  7. 阿里云服务网格ASM集成SLS告警

    ​简介:随着微服务的流行,微服务的架构也在不断的发展演进,Spring Cloud 与 Dubbo为代表的微服务开发框架也得到了普及和落地:在云原生时代,无侵入的服务网格(Service Mesh)开 ...

  8. EMR on ACK 全新发布,助力企业高效构建大数据平台

    ​简介: 阿里云 EMR on ACK 为用户提供了全新的构建大数据平台的方式,用户可以将开源大数据服务部署在阿里云容器服务(ACK)上.利用 ACK 在服务部署和对高性能可伸缩的容器应用管理的能力优 ...

  9. [ELK] 生产环境中 Elasticsearch 的重要配置项

    配置 Elasticsearch https://www.elastic.co/guide/en/elasticsearch/reference/current/settings.html 重要的 E ...

  10. WPF 通过 GetMessageExtraInfo 方法获取当前收到的鼠标消息是否由触摸转换过来

    本文将告诉大家如何在 WPF 或者其他 Win32 应用里面,在收到鼠标消息时,通过 GetMessageExtraInfo 方法获取当前收到的鼠标消息是否由触摸消息提升而来 大家都知道,在不开启 W ...