在 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. 墨水污染的一角qsnctfwp

    题目附件 在图片中最直接的信息是电话号码,将号码输入到搜索引擎,可以得到该书的出版社为:高等教育出版社. 进入高等教育出版社官网 根据物料号前四位.版次时间.印次时间,在官网中进行图书查询. 结合字数 ...

  2. sql 语句系列(两个日期之间)[八百章之第十七章]

    前言 进入了日期章了. 年月日加减法 分别对原有的日期进行加减法. sql server select DATEADD(DAY,-5,HIREDATE) as hd_mimus_5D, DATEADD ...

  3. 实训篇-Html-多媒体标签

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. WPF开发随笔收录-获取程序专有内存

    分享一个C#获取程序当前所占用的内存大小的方法,实测跟任务管理器上的内存值一样 /// <summary> /// 性能计数器组件类 /// </summary> privat ...

  5. 力扣645(java)-错误的集合(简单)

    题目: 集合 s 包含从 1 到 n 的整数.不幸的是,因为数据错误,导致集合里面某一个数字复制了成了集合里面的另外一个数字的值,导致集合 丢失了一个数字 并且 有一个数字重复 . 给定一个数组 nu ...

  6. 技术干货 | mPaaS 小程序高玩带你起飞:客户端预置小程序无视网络质量

    简介: 弱网拉包无障碍,深度提升用户体验 传统的小程序技术容易受到网络环境影响,当网络质量不佳时可能导致拉取不到小程序包的情况.通过预置小程序,即可规避该问题.本文介绍了预置小程序的原理和预置小程序的 ...

  7. Spark 大数据处理最佳实践

    开源大数据社区 & 阿里云 EMR 系列直播 第十一期 主题:Spark 大数据处理最佳实践 讲师:简锋,阿里云 EMR 数据开发平台 负责人 内容框架: 大数据概览 如何摆脱技术小白 Spa ...

  8. [Blockchain] Cosmos Starport 101 - 为你的新数据类型 生成代码

    # 项目模板 $ starport app github.com/hello/planet --address-prefix your_new_prefix 项目目录结构的说明看这里: https:/ ...

  9. [FAQ] 阿里云一口价域名购买之后在哪里看

    进入控制台,产品和服务中找到"域名",进去后在左侧菜单有 "已买到的域名". 如图: Link:https://www.cnblogs.com/farwish/ ...

  10. 2019-8-31-C#-简单读取文件

    title author date CreateTime categories C# 简单读取文件 lindexi 2019-08-31 16:55:58 +0800 2018-07-19 16:48 ...