HTML表单结构咨询：section/h2与fieldset/legend如何选择？代码是否正确？

一、代码中的错误与优化点 #

先看你的代码里存在几个需要修正的地方：

1. 标签闭合错误：最后一行的</fieldset缺少了闭合的>，应该改为</fieldset>，否则会导致HTML结构不完整，影响浏览器解析。
2. ID重复错误：procedimento对应的textarea的id被错误写成了lista_ingredienti，和前面食材列表textarea的id重复，这会导致label与输入控件的关联失效，应该修正为<textarea name="procedimento" id="procedimento" required>...</textarea>。
3. 可选优化：标签结构可读性：你把input/textarea直接嵌套在label内部，虽然语法合法，但分开写会更便于样式控制和结构维护，比如：

   <div>
     <label for="titolo">Titolo ricetta</label>
     <input type="text" name="titolo" id="titolo" placeholder="Titolo ricetta" required>
   </div>
   

修正后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ricetta</title>
</head>
<body>
<header>
<h1>Crea una nuova ricetta</h1>
</header>
<form name="nuova_ricetta" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Nuova Ricetta</legend>
<section id="dati_principali_ricetta">
<h2>Dati testata ricetta</h2>
<div>
<label for="titolo">Titolo ricetta</label>
<input type="text" name="titolo" id="titolo" placeholder="Titolo ricetta" required>
</div>
<div>
<label for="descrizione">Descrizione ricetta</label>
<textarea name="descrizione" id="descrizione" required>Inserisci la descrizione della ricetta</textarea>
</div>
</section>
<section id="corpo_ricetta">
<h2>Dati corpo ricetta</h2>
<div>
<label for="lista_ingredienti">Lista ingredienti</label>
<textarea name="lista_ingredienti" id="lista_ingredienti" required>Inserisci gli ingredienti della ricetta separati da una virgola</textarea>
</div>
<div>
<label for="procedimento">Procedimento ricetta</label>
<textarea name="procedimento" id="procedimento" required>Indica il procedimento della ricetta</textarea>
</div>
</section>
<section id="ricetta_media">
<h2>Dati Multimediali ricetta</h2>
<div>
<label for="immagini">Caricare immagini della ricetta</label>
<input type="file" name="immagini" id="immagini" multiple required>
</div>
<div>
<label for="video">Caricare video della ricetta</label>
<input type="file" name="video" id="video" required>
</div>
</section>
</fieldset>
</form>
</body>
</html>

二、表单分组：fieldset+legend vs section+h2 #

从语义化和无障碍访问的角度来说，fieldset搭配legend是更适合表单字段分组的选择，原因如下：

• fieldset是HTML专门为表单设计的分组元素，它明确告诉浏览器和屏幕阅读器：这里的控件是一组相关的表单内容，辅助技术会自动识别这种分组逻辑，提升视障用户的访问体验。
• legend作为fieldset的专属标题，会被屏幕阅读器直接关联到分组内的所有控件；而h2是通用的文档标题元素，更多用于划分页面内容区块，并非为表单控件分组设计，无法提供同样的语义关联。

如果需要进一步细分表单内容，你可以在fieldset内部结合section使用，但核心的分组语义还是应该依赖fieldset+legend来保证。

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