fieldset内legend标签无法显示问题求助（附正常对比代码）

我在一个积累经验的基础项目中开发时，发现某fieldset组件内的legend标签无法显示。该fieldset与项目中其他fieldset格式基本一致，且临时移除样式表后问题仍存在。

异常代码 #

<fieldset>
  <legend class="legend" for="radio">你认为以下哪项最符合你的情况？</legend>
  <div>
    <label for="radio">
      <input name="radio" type="radio" value="1" name="radio" checked>我会提前几个月甚至更久规划假期
    </label>
  </div>
  <div>
    <label for="radio">
      <input name="radio" type="radio" value="2" name="radio">我通常提前几个月规划假期
    </label>
  </div>
  <div>
    <label for="radio">
      <input name="radio" type="radio" value="3" name="radio">我通常提前几周规划假期
    </label>
  </div>
</fieldset>

正常显示的fieldset代码 #

<fieldset>
  <legend class="legend" for="checkbox">以下哪项适用于你？</legend>
  <div>
    <input type="checkbox" value="1">
    <label>我喜欢慵懒的海滩度假</label>
  </div>
  <div>
    <input type="checkbox" value="2">
    <label>我喜欢刺激的城市短途游</label>
  </div>
  <div>
    <input type="checkbox" value="3">
    <label>我喜欢参观博物馆等文化景点</label>
  </div>
  <div>
    <input type="checkbox" value="4">
    <label>我喜欢探索并体验当地文化</label>
  </div>
</fieldset>

问题原因及修复方案 #

问题分析 #

1. 重复的name属性：异常代码中每个radio标签都重复声明了name="radio"，属于无效HTML语法，可能导致浏览器解析DOM时出现异常，进而影响legend的渲染。
2. legend的无效属性：legend标签并不支持for属性，该属性仅适用于label标签，多余属性可能干扰浏览器对legend的解析。
3. label关联错误：所有label的for属性都指向"radio"，但没有任何radio标签设置对应的id="radio"，且同组radio需要不同id匹配各自label，虽不直接导致legend不显示，但属于规范错误。

修复后的代码 #

<fieldset>
  <legend class="legend">你认为以下哪项最符合你的情况？</legend>
  <div>
    <label for="radio1">
      <input id="radio1" name="radio" type="radio" value="1" checked>我会提前几个月甚至更久规划假期
    </label>
  </div>
  <div>
    <label for="radio2">
      <input id="radio2" name="radio" type="radio" value="2">我通常提前几个月规划假期
    </label>
  </div>
  <div>
    <label for="radio3">
      <input id="radio3" name="radio" type="radio" value="3">我通常提前几周规划假期
    </label>
  </div>
</fieldset>

修复要点 #

• 移除每个radio标签中重复的name属性，仅保留一个name="radio"以保证同组单选功能。
• 删除legend标签上无效的for属性。
• 给每个radio添加唯一的id属性，同时修改对应label的for属性，使其匹配各自的radio id，保证标签与表单控件的正确关联。

内容的提问来源于stack exchange，提问作者Richard Lefevre