在 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. 挑战吧,HarmonyOS应用开发工程师

      一年一度属于工程师的专属节日1024已过,但程序员多重活动持续进行中~ 参与活动即有机会获得HUAWEI Freebuds 5i 耳机等精美礼品! 点击"阅读原文"查看更多活动 ...

  2. 重新点亮shell————sed的替换[十]

    前言 简单介绍一下sed 和 awk. 正文 这两个和vim的区别: vim 是交互式和 他们是非交互式 vim是文件操作模式与他们是行交互模式 sed sed 的 模式空间. sed的基本工作方式是 ...

  3. Jedis连接踩坑日记

    Jedis连接踩坑日记 背景: 线上某块业务的增删改功能全部都不可用.页面发送了xhr请求之后 状态一直处于pending状态,后端没有日志产生 排查路线与解决办法 第一:由于服务在内网里面,无法进行 ...

  4. 基于ChatGPT打造安全脚本工具流程

    前言 以前想要打造一款自己的工具,想法挺好实际上是难以实现,第一不懂代码的构造,只有一些工具脚本构造思路,第二总是像重复造轮子这种繁琐枯燥工作,抄抄改改搞不清楚逻辑,想打造一款符合自己工作的自定义的脚 ...

  5. 力扣1454(MySQL)-活跃用户(中等)

    (非会员进不去,看的其他博主的题目) 问题: 写一个 SQL 查询, 找到活跃用户的 id 和 name. 活跃用户是指那些至少连续 5 天登录账户的用户. 返回的结果表按照 id 排序.  解题思路 ...

  6. 力扣41(java)-缺失的第一个正数(困难)

    题目: 给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数. 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案. 示例 1: 输入:nums = [1,2,0 ...

  7. 转载 | 基于阿里云Serverless函数计算开发的疫情数据统计推送机器人

    简介: 本文选自函数计算征集令优秀征文! 一.Serverless函数计算 什么是Serverless? 在<Serverless Architectures>中对 Serverless ...

  8. Alibaba Cloud Linux 2 LTS 正式发布,提供更高性能和更多保障

    Alibaba Cloud Linux 2 LTS版本发布后,阿里云将会为该版本提供长达5年的软件维护.问题修复服务.从2019-03-27开始到2024-03-31结束.包括: 免费的服务和支持:A ...

  9. EasyNLP带你玩转CLIP图文检索

    简介: 本文简要介绍CLIP的技术解读,以及如何在EasyNLP框架中玩转CLIP模型. 作者:熊兮.章捷.岑鸣.临在 导读 随着自媒体的不断发展,多种模态数据例如图像.文本.语音.视频等不断增长,创 ...

  10. Apsara Stack 技术百科 | 联结良性生态,筑千行百业的数字基石

    ​简介:作为现今IT领域最重要的课题:基础设施云化,离不开与伙伴的携手合作,如何让云上解决方案能充分释放价值的同时形成一个相互依存的自循环生态系统,混合云君来跟你聊聊! ​ 生态系统这个词在维基百科上 ...