什么是语义化结构表单的最佳方法？

Question

我看过很多开发者使用表格、div和列表来组织表单的例子，但都不太语义化。那么，在不使用CSS的情况下，如何最好地构造HTML文档，以便每个标签和输入组在下一行中断并且可以轻松阅读?

（我认为ol和ul只是tr和td的替代品。在我看来，表单不是内容或定义列表）

我觉得div可能是最好的格式，因为div是明确的“分割”或分组项目，但我不确定。

示例HTML：

<form>  
    <fieldset>  
        <legend>Your Favorites</legend>  
        <label for="color">Color</label>  
        <input id="color" name="color" type="text" />  
        <label for="food">Food</label>  
        <input id="food" name="food" type="text" />  
        <button type="submit">Submit</button>  
    </fieldset>  
</form>

- Syon

---

这是相当主观的。然而，我建议使用 ul 或 dl。一个表单难道不是一组输入的列表吗？ - bookcasey

@bookcasey - 不是，它是一组字段。因此元素<fieldset>。 - Alohci

@ScottSimpson - 这并不是说<ul>不具有语义性。问题在于它是否携带了错误的语义。 - Alohci

@Alohci - 虽然你所说的表单是一组元素的说法是正确的，但是<fieldset>可以包含一系列元素，这样无法实现OP分离不同标签/输入组合的视觉目标，因此使用<ul>。为了表达语义意义，您可以使用属性，特别是class，id和在某些情况下使用rel。 - Zac Seth

@Alohci -- 按钮和复选框是字段吗？ - Scott Simpson

Answer 1

要注意不要混淆语义和结构。HTML元素主要用于表达结构，而语义是为了赋予结构意义。虽然在一些HTML标记中有一定的语义意义，但这种意义非常普通。因此，我的答案分为以下两部分： 语义 为什么通过表单表达语义意义很重要？这个标记是否应该被除标准浏览器之外的客户端使用？这是一个特殊情况吗？

如果您需要为表单元素注入语义意义，请通过适当的类和ID装饰您的结构化标记来实现 - 无论您使用哪种元素类型来组合/分隔输入，都不太可能从表单中的HTML元素获得任何语义意义。 结构

• 如果您只是想提供输入的视觉分离，并希望使用最少的标记，则可以在输入后使用<br />标记。
• 如果您想将输入与其标签结构化组合，则使用<div>、<ul>、<ol>或<dl> - 所有这些标记都能够同样实现这个目标。
• 如果重要的是在结构上暗示表单元素属于一组，则不要使用<div>元素，因为它们表示不同或分离。列表元素表示不同的子项是一个集合，并且像@bookcasey在他的评论中所说，表单大多数情况下是逻辑上属于一起的输入列表。

这就是我的意见。

值得一提的是，在没有CSS的情况下，我会在这种情况下使用<ul>（如果顺序很重要，则使用<ol>）。当我有CSS时，我使用<dl>，这样我就可以获得更多的样式控制。 更新： 针对Alohci的论点，我反转了关于不使用<div>元素的立场。通过将它们包装在form或fieldset中，它们已经逻辑上分组在一起 - 这与适当的类的使用（例如Alohci在评论中建议的<div class="field">）将提供结构和适当的语义意义。

- Zac Seth

---

有趣的是，当你思考某件事情很长时间时，你会忘记基础知识，比如 <br /> 标签。你关于语义与结构分离的评论非常有帮助。我认为这是因为我一直认为列表定义了我的“内容”，而不是我的代码，所以我一直觉得 <ul> 和 <ol> 不是最好的选择。 - Syon

@Zac - 在HTML中有不同种类的语义。与元素名称相关联的语义是为了媒体独立性而存在的。也就是说，浏览器在可视化方面肯定会对它们进行处理，但它们还以非常特定的方式向平台可访问性API公开。你需要问自己的问题是，如果你是盲人，你想听到一个提示“列表项1.名字。”，还是只要听到“名字”？被告知标签/输入配对是列表中的项目对你有什么帮助？它如何帮助其他人？或者这只是无谓的语义学？... - Alohci

然后，这些私有语义用于结构和页面组织目的。它们通过id和class属性传达。暂且不谈微格式，class和id的语义仅供作者或创作团队使用。通常使用作者偏好语言中的单词，这些语义对于不会讲该语言的任何人来说都是无用的，因此在与HTML的消费者共享含义方面的效用非常有限。 - Alohci

最后，还有针对专业消费者（如社交网络网站）的扩展公共语义。 RDFa、微数据和微格式目前都在竞争这个领域。HTML5中关于<time>元素的最近大惊小怪是因为编辑器认识到<time>在浏览器中没有任何作用。因此，它使用了错误的语义机制。它应该由RDFa/microdata/microformat处理，而<data>元素被发明来提供钩子。他不得不退缩，但他有一点道理。 - Alohci

因此，请明智地选择您的语义标记。只有在绝对必要时，才选择非中性语义元素以获得呈现效果。根据这些原则，将每个{label，input}对包装在<div class="field">元素中可以适当地满足OP的要求。 - Alohci

@Alohci - 你提出了一个全面、构建得很好的论点。我想我会向你让步。 - Zac Seth

Answer 2

我个人使用以下内容：

<form>
  <fieldset>
    <legend>Legend</legend>
    <label for="element-id1"><span class="label">Label</span><input type="text" id="element-id1" /></label>
    <label for="element-id2"><span class="label">Label</span><input type="text" id="element-id2" /></label>
  </fieldset>
</form>

...并将标签设置为display: block。我还将.label设置为具有固定宽度的display: block。

我相信有些人会说span是不必要的标记，但这取决于你如何看待它。我认为它是必要的，因为它可以帮助我很好地结构化表单元素的标签，从而提高可用性。

-- 编辑 --

在您的编辑之后，我建议采用以下方法：

<form>
  <fieldset>
    <legend>Legend</legend>
    <ul>
      <li><label for="element-id1">Label</label><input type="text" id="element-id1" /></li>
      <li><label for="element-id2">Label</label><input type="text" id="element-id2" /></li>  
    </ul>
  </fieldset>
</form>

- user527892

---

我需要编辑我的问题，以包括不使用CSS的内容，感谢您的回复。 - Syon