html5怎么设置单选_html5用input type="radio"加name设单选按钮组【设置】

HTML5 使用 type="radio" 实现单选功能，需统一 name 值构成互斥组；通过 checked 设默认项；可用 CSS 隐藏原生控件并自定义样式；推荐用 fieldset/legend 增强语义；required 可实现必填验证。

如果您希望在网页中创建一组互斥选择的选项，HTML5 提供了 input type="radio" 元素来实现单选功能。关键在于为同一组单选按钮设置相同的 name 属性值，浏览器会据此自动将其识别为一个逻辑组。

一、使用相同 name 属性定义单选组

单选按钮的互斥行为由 name 属性控制。只有当多个 radio 输入框的 name 值完全一致时，它们才会构成一个可单选的按钮组，用户只能从中选择一项。

1、在 HTML 文档的 body 内添加 input 标签，并将 type 设为 radio。

2、为所有属于同一组的单选按钮设置完全相同的 name 属性值，例如 name="gender"。

立即学习“前端免费学习笔记（深入）”；

3、为每个选项指定唯一的 value 属性，该值将在表单提交时被发送。

4、使用 label 标签包裹文字或配合 for 属性关联 id，提升可访问性与点击区域。

二、添加 checked 属性设定默认选中项

若需页面加载时默认选中某一项，可在对应 input 标签中添加 checked 布尔属性。同一组中仅应有一个 checked 存在，否则行为未定义。

1、在希望默认选中的 radio 输入框中加入 checked 属性，如 。

2、确保同组其他 radio 元素不包含 checked 属性。

3、若使用 JavaScript 动态设置，默认选中状态可通过修改 element.checked = true 实现。

三、通过 CSS 自定义单选按钮外观

原生单选按钮样式受限，但可通过隐藏原生控件并利用 label 与伪元素（如 ::before）实现视觉定制，同时保持语义与功能完整。

1、为 input[type="radio"] 设置 position: absolute 和 opacity: 0 以隐藏原生控件。

2、为目标 label 添加相对定位和自定义尺寸，作为可见容器。

标签： css javascript java html html5 伪元素 浏览器 表单提交 相对定位 red