HTML入门-第十三篇：HTML表单标签（＜form＞）之选择类元素

已于 2025-04-13 00:54:03 修改
阅读量1k 收藏 16
点赞数 15
CC 4.0 BY-SA版权
分类专栏： HTML入门 前端全套教程 文章标签： html 前端 服务器
于 2025-04-03 12:08:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/youyong/article/details/146958647

第十三篇：HTML表单标签（<form>）之选择类元素

一、单选按钮（<input type="radio">）

在HTML表单中，单选按钮用于让用户从多个选项中选择一个。这在需要用户做出单一选择的场景中非常有用，比如选择性别、选择支付方式等。

（一）单选按钮的工作原理

单选按钮通过 <input type="radio"> 标签创建。为了确保用户只能从一组选项中选择一个，同一组的所有单选按钮必须具有相同的 name 属性值。当用户点击某个单选按钮时，同组中其他已选中的单选按钮会自动取消选中状态。

（二）示例展示性别选择单选按钮

以下是一个使用单选按钮让用户选择性别的示例代码：

<!DOCTYPE html>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
HTML入门-第十二篇：HTML表单标签（＜form＞）基础
无
04-03 741
在网页开发中，表单是实现用户与服务器交互的重要元素。通过表单，用户可以输入各种信息，如登录凭证、反馈意见等，这些数据随后被提交到服务器进行处理。在HTML中， 标签用于创建表单。 标签就像是一个容器，它将各种表单元素（如输入框、按钮、下拉菜单等）组合在一起，定义了一个用户输入区域。当用户在表单中填写完信息并提交时，表单内的数据会按照设定的规则发送到服务器。 属性是 标签的关键属性之一，它指定了表单数据提交的目标URL。这个URL指向服务器上处理表单数据的脚本或程序。例如，如果你的服务器端使用PHP来处理表
HTML入门-第十四篇：HTML表单标签（＜form＞）之下拉菜单
无
04-03 341
在HTML表单中，下拉菜单是一种紧凑且便捷的方式，用于向用户呈现多个选项，让用户从中选择一个。它通过 和 标签共同创建。 标签定义了下拉菜单的范围，它是一个容器标签，包含多个 标签。每个 标签代表下拉菜单中的一个选项。当用户点击下拉菜单时，会显示出所有的 选项供用户选择。 是 标签的一个可选属性。当在某个 标签中设置了 属性时，该选项在页面加载时会默认被选中。如果没有设置 属性，下拉菜单将不会有默认选中项。以下代码展示了如何创建一个城市选择的下拉菜单： 在上述示例中：
【HTML】自动添加单选选项，选中一项并展开对应的表格信息
鸿蕊瑞琳
05-24 1137
自动创建列表并创建click事件
html之input表单介绍——单选按钮
最新发布
2301_81968528的博客
06-07 823
但是这种情况下可以同时选中男女，这种情况下需要添加name属性实现互斥，name属性值二者必须相等。如果想要一开始就默认选中某个单选框，比如说选中男，就的添加checked属性。input表单除了文本框和密码框之外，还有其他类型。这里把name属性值统一定义为sex。比如注册界面比较常用的性别选项。type属性值是radio。checked的值可以不填。
HTML表单标签
2301_77584408的博客
03-09 920
用于绑定内容与表单标签的关系(例如单选框，不用点那个圆，点字也可以选择）需要配合form标签使用，用form标签把表单标签一起包裹起来。name 用于分组，相同属性值的单选框为一组，一组只能选一个。password，密码框，用于输入密码（默认内容变成圆点）在网页中显示收集用户信息的表单效果，如登录页，注册页。reset 重置按钮，用于重置，恢复默认表单值。可以通过type属性的不同，展示不同的效果。checkbox，多选框，用于多选多。text，文本框，用于输入单行文本。radio,单选框，用于多选一。
HTML 表单标签，springboot微信点餐系统百度云
m0_64383449的博客
12-13 140
checked：定义该标签默认被选中 【5】button ：定义可点击按钮（多数情况下用于通过 JavaScript 启动脚本），常用属性有： name：定义标签名称 value：按钮显示名称 【6】hidden ：定义隐藏的输入字段，常用属性有： name：定义标签名称 value：定义标签值 【7】file ：定义输入字段和“浏览”按钮，供文件上传，常用属性有： name：定义标签名称 【8】submit ：定义提交按钮，提交按钮会把表单数据发送到服务器，常用属性有： .
html标签单选按钮_动态插入单选按钮标签
07-23 485
html标签单选按钮 简单的jQuery代码段可动态插入单选按钮的标签。 您可以创建一个label元素并将其插入到单选按钮之前，如下所示： var labelText = $('#radioBtnId').attr('name'); $('' + labelText + ' ').insertBefore('#radioBtnId');翻译自: https://www.sitepoint.com...
html中单选多选怎么写,HTML+CSS入门 HTML 标签如何创建单选或多选菜单
weixin_36388201的博客
05-30 872
本篇教程介绍了HTML+CSS入门 HTML 标签如何创建单选或多选菜单，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<所有主流浏览器都支持标签。select元素可创建单选或多选菜单。元素中的标签用于定义列表中的可用选项。提示：select元素是一种表单控件，可用于在表单中接受用户输入。属性New:HTML5中的新属性。属性值描述autofocus(5...
HTML入门-第二十篇：HTML5表单增强（下）
无
04-03 875
pattern属性允许开发者使用正则表达式定义自定义的验证规则。通过在<input>标签上设置pattern属性，用户输入的内容必须匹配指定的正则表达式，否则在表单提交时，浏览器会阻止提交并显示提示信息。正则表达式是一种强大的文本匹配工具，可以精确地定义各种复杂的格式要求。例如，可以使用正则表达式验证身份证号码、邮政编码等特定格式的数据。
HTML入门-第十九篇：HTML5表单增强（上）
无
04-03 389
HTML5表单增强（上）
HTML基础1：单选框
热门推荐
KeleQAQ的博客
04-08 3万+
一.基础 1.基本写法：<input type=“radio” / > 2.实现默认选中，使用checked。 3.若存在多个单选框都在一个分组里，要实现同一时间只能选中一个单选框设置name属性相同即可。 4.提交数据到后台时，后台接收的是value设置的值 二.案例 目标：利用JQuary，点击单选框时将当前单选框设置为checked，同时初始化第一个单选框为checked状态。 html代码 <div id="radioDiv"> <label>气
HTML系列之表单标签
StayAlive1887的博客
07-01 1744
表单用于收集用户的输入信息，如我们常看见的登录页面，需要用户输入账号和密码，这时候，我们要拿到用户输入的账号和密码，就需要使用表单标签。密码：用户名：
HTML常用标签-表单标签
weixin_44201223的博客
05-14 1760
表单标签
HTML常用标签之表单标签(1)
2401_84092360的博客
04-07 1396
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取最后整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取。
HTML学习
qq_61711708的博客
01-23 1564
列表 无序列表 无序列表的列表项是没有顺序的。 默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。 语法： <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> ​ ul，即unordered list（无序列表）。 li，即list（列表项）。 在该语法中，使用<ul></ul&
前端入门：HTML（表单）
yscy0801的博客
03-28 2718
前端
8-2 html中的表单标签 input
weixin_61897906的博客
04-30 1202
标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择<head><title>label标签</title></head><body>性别：<br><input type="radio" name="sex" value="男" id="男"> <label for="男">男
html中的select标签
u010746364的博客
11-29 453
上海 北京 广州 深圳 杭州 这里默认选择了深圳
HTML设置单选
zzz386021090的博客
06-16 4082
主要是设置name，并进行check
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员勇哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值