在 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. 有奖活动 | 以代码之名,写出对Ta的爱

      七夕情人节到了,为了Ta, 你打算用什么方式表达爱? 是包包.鲜花.美酒.巧克力, 还是一封充满爱意的短信? 在HarmonyOS,有一群精致又机智的开发者们,他们#以代码之名,表达爱# 比起鲜花 ...

  2. GAN的一些问题

    GAN为什么难以训练? 大多深度模型的训练都使用优化算法寻找损失函数比较低的值.优化算法通常是个可靠的"下山"过程.生成对抗神经网络要求双方在博弈的过程中达到势均力敌(均衡).每个 ...

  3. BI、OLAP、多维分析、CUBE 这几个词是什么关系?

    这些词我们在建设分析型应用时经常会听到,这几个词也经常被弄混,这里来梳理一下. BIBI 是 Business Intelligence(商业智能)的缩写,是指企业利用已有数据进行数据分析从而指导商业 ...

  4. JavaServlet类

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 介绍Ser ...

  5. HL7消息结构

    HL7消息用于在不同的医疗保健系统之间传输电子数据,每个消息发送相关特定事件(例如患者入院)的信息.HL7消息采用人类可读格式,本节介绍HL7消息的内容以及HL7消息的组织方式. HL7消息由一个或多 ...

  6. EMQX + PolarDB-X 一站式 IoT 数据解决方案

    简介: 本文整理自 EMQX 产品经理李国伟,在PolarDB开源社区中关于EMQX与PolarDB-X构建一站式IoT数据解决方案的分享.本篇内容主要分为四个部分:1. IoT数据特性 2. EMQ ...

  7. 国内唯一!阿里云容器服务进入 Forrester 领导者象限

    ​简介:近日,国际权威咨询机构 Forrester 发布< The Forrester WaveTM: Public Cloud Container Platforms, Q1 2022 > ...

  8. [Go] 结构体成员的第三个位置上标签的作用

    结构体成员加了第三个位置的标签,在转换指定类型时,key 会使用指定的名字. package main import ( "encoding/json" "log&quo ...

  9. dotnet 6 使用 HttpWebRequest 进行 POST 文件将占用大量内存

    我有用户给我报告一个内存不足的问题,经过了调查,找到了依然是使用已经被标记过时的 HttpWebRequest 进行文件推送,推送过程中,由于 System.Net.RequestStream 将会完 ...

  10. dotnet C# 高性能配置文件读写库 dotnetCampus.Configurations 简介

    在应用程序运行的时,需要根据不同的配置执行不同的内容.有很多根据配置而初始化的功能往往是在应用程序启动的时候需要执行.对于很多类型的应用程序,特别是客户端的应用程序,启动的性能特别重要.也因此,在启动 ...