HTML表单Radio按钮重置原因及解决方法有哪些？

本文共计1186个文字，预计阅读时间需要5分钟。

原文：

在构建表单时，radio 按钮（单选按钮）本应保持用户选择状态直至表单提交或显式更改。但许多初学者会遇到一种看似诡异的现象：用户已正确勾选某个 radio 项（如 “Female”），可一旦点击表单其他区域（如下拉框、文本域或空白处），该选项立即回退到第一个 radio 项（如 “Male”）。这种行为并非浏览器 Bug，而是 HTML 结构缺陷引发的意外副作用。

? 根本原因分析

问题核心在于 非法 HTML 嵌套与标签语义错用：

• ❌ 错误写法：<label><h3>Select Gender<h3></label>
  此处 <h3> 标签未闭合（写成了 <h3> 而非 </h3>），导致浏览器解析器进入“容错恢复模式”，可能错误地将后续所有 <input> 元素（包括 radio）纳入该 <label> 的作用范围。当用户点击 label 外任意可聚焦元素（如 <select> 或 <textarea>）时，部分浏览器会尝试“重置 label 关联的控件”，从而触发 radio 组的默认值回退。

• ❌ 缺失 name 属性语义一致性
  <select> 中的 <option> 不应使用 name 属性（它无效且被忽略），而 <select> 自身必须声明 name 才能随表单提交数据——缺失会导致表单逻辑不完整，间接干扰渲染上下文。

• ❌ <input type="textbox"> 是非法类型
  应使用 <textarea> 替代，否则无法正确承载多行文本，且可能引发 DOM 解析异常。