如何正确使用 HTML fieldset 实现表单区域分隔

✅ 正确写法必须确保所有可选闭合标签（尤其是 <select>、<textarea>、 等）严格配对：

<fieldset>
  <legend>烹饪偏好</legend>
  <p>How do you like your eggs cooked?</p>
  &lt;select id=&quot;dropdown&quot; name=&quot;egg-style&quot;&gt;
    <option value="scrambled">Scrambled</option>
    <option value="bullseye">Bull's Eye</option>
    <option value="boiled">Boiled</option>
  &lt;/select&gt;
</fieldset>

<fieldset>
  <legend>喜爱程度</legend>
  <p>How much do you like eggs?</p>
  <label>
    &lt;input type=&quot;radio&quot; name=&quot;egg-love&quot; value=&quot;verymuch&quot; checked&gt;
    Very much
  </label>
  <label>
    &lt;input type=&quot;radio&quot; name=&quot;egg-love&quot; value=&quot;somewhat&quot;&gt;
    Somewhat
  </label>
  <label>
    &lt;input type=&quot;radio&quot; name=&quot;egg-love&quot; value=&quot;notatall&quot;&gt;
    Not at all
  </label>
</fieldset>

⚠️ 关键注意事项：

• 必闭合嵌套标签：<select> 必须以 </select> 显式关闭； 虽为自闭合标签，但建议写全（Text），避免解析歧义；
• 推荐使用
  ：
  的语义标题应通过

  实现（置于开头），而非普通

  或文本节点——它不仅提升可访问性（屏幕阅读器会朗读 legend），还能稳定边框渲染；

• 避免裸文本直接子节点：如
  How much…
  中的纯文本，易被解析器误判为前一个元素的内容残留，应包裹在
  或

  内；

• CSS 干预需谨慎：若仍无边框，请先检查 DevTools 的 Elements 面板确认 DOM 结构是否符合预期；仅当语义结构正确后，再通过 CSS 微调（如 fieldset { border: 1px solid #ccc; margin-bottom: 1.5em; }）。

总结：