连续多个radio fieldset Tab键切换跳过问题，求无JS解决方案

问题描述 #

页面中连续放置多个包含单选按钮（radio）的fieldset时，使用Tab键切换焦点会跳过其中一个fieldset。尝试给legend和fieldset设置独立ID后问题仍存在；但在两个fieldset之间添加文本框时，Tab切换恢复正常。

问题根源 #

你的代码存在两个核心错误：

• ID重复：两个fieldset里的单选按钮使用了完全相同的ID（如txt、csv），HTML规范要求页面内ID必须唯一，这会导致浏览器焦点处理逻辑混乱。
• 单选按钮组冲突：两个fieldset内的单选按钮共用同一个name属性值format，浏览器会将同name的单选按钮视为同一组，Tab切换时只会聚焦到该组的第一个可交互元素，后续同组的fieldset会被跳过。

无JS解决方案 #

只需修改两处代码即可解决，无需自定义JavaScript：

1. 给每个单选按钮设置唯一ID：第二个fieldset内的单选按钮ID要和第一个区分开，比如改为txt2、csv2、html2，同时对应的label的for属性也要同步修改。
2. 给不同fieldset的单选按钮组设置独立name：第一个fieldset的单选按钮name设为format1，第二个设为format2（或其他不同名称），让浏览器识别为两个独立的单选组。

修改后的代码示例 #

<fieldset style="border: 1px solid #888; padding: 5px;">
  <legend>Output format</legend>
  <div>
    <input type="radio" name="format1" id="txt" value="txt" checked=""> 
    <label for="txt">Text file</label>
  </div>
  <div>
    <input type="radio" name="format1" id="csv" value="csv"> 
    <label for="csv">CSV file</label>
  </div>
  <div>
    <input type="radio" name="format1" id="html" value="HTML"> 
    <label for="html">HTML file</label>
  </div>
</fieldset>
<fieldset style="border: 1px solid #888; padding: 5px;">
  <legend>Output format</legend>
  <div>
    <input type="radio" name="format2" id="txt2" value="txt" checked=""> 
    <label for="txt2">Text file</label>
  </div>
  <div>
    <input type="radio" name="format2" id="csv2" value="csv"> 
    <label for="csv2">CSV file</label>
  </div>
  <div>
    <input type="radio" name="format2" id="html2" value="HTML"> 
    <label for="html2">HTML file</label>
  </div>
</fieldset>

内容的提问来源于stack exchange，提问作者Emil Iakoupov