Question

我已经看过几个开发人员如何使用表格，div和列表构建表单的示例;所有这些都不是非常语义的。构建HTML文档的最佳方法是什么，因此它打破了每个标签和输入组到下一行并且可以轻松阅读 - 不使用CSS ？

（我觉得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>

Answer 1

注意不要让语义和结构混淆。存在HTML元素，主要用于表达结构。语义学就是赋予结构意义。虽然某些 HTML标记中存在某些语义含义，但它具有非常通用的含义。所以我的答案就是这样做的：

<强>语义

为什么通过表单表达语义是很重要的？标记应该由标准浏览器以外的客户端使用吗？这是一个特殊的用例吗？

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

<强>结构

如果您只想提供输入的视觉分离并希望使用尽可能少的标记，请在输入后使用<br />标记。
如果您希望在结构上将输入分组到其标签，请使用<div>，<ul>，<ol>或<dl> - 所有这些标记都可以同等地实现此目标以及其他人。
如果在结构上暗示表单元素作为一个集合在一起是很重要的，那么不要使用表示清晰度或分离性的<div>元素。列表元素表示不同的子项是一组，并且像@bookcasey在他的评论中所说，在大多数情况下，表单是输入列表，它们在逻辑上属于一起。

那是我的2c。

对于它的价值而言，如果不能使用CSS，我会在这种情况下使用<ul>（如果订单很重要，则使用<ol>）。当我有CSS时，我使用<dl>，这给了我更多的样式控制。

<强>更新

在回应Alohci的论点时，我正在改变我对不使用<div>元素的立场。通过将它们包装在form或fieldset中，它们在逻辑上已经组合在一起 - 这与使用适当的类（即Alohci在评论中建议的<div class="field">）一起将提供结构和适当的语义。

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>

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

2 个答案: