Question

我的表单中的字段有标签，一些帮助文本，一些示例文本和一些上下文文本。

<!--With Help and Example-->
<li>
    <label for="ingredients">Ingredients</label>
    <br/><!--Is this good practice?-->
    <span class="help">Enter one ingredient per line.</span>
    <br/>
    <textarea id="ingredients" name="ingredients"></textarea>
    <br/>
    <span class="example"><b>Example:</b><br/>1 Cup of Flour<br/>Pinch of Salt<br/>1 Tbsp of Paprika</span>

<!--With context-->
<li>
   <label for="yield">Yield</label>
   <br /> <!--Wish labels were block and you had to style them to be inline-->
   <input type="number" id="yield" name="yield" />
   <span class="context"> servings.</span>
</li>

当我看到它没有风格时，它让我疯狂如何所有这些东西在同一条线上一起运行。

我可能在输入时想出了解决问题的方法。我想我可以使用作为我的帮助和示例文本。我仍然不喜欢标签总是与输入在同一行。

Answer 1

如果一个人真的很迂腐，几乎所有 的使用都是'糟糕的HTML'。  表示语义换行符。换句话说，删除 会改变内容的含义。这些只发生在诗歌/歌词和邮政地址中。

您可以通过使<li>内的其他元素显示：块样式来实现相同的结果。

Answer 2

本身并不坏，但你应该使用CSS进行样式设置（例如布局）。它使代码更容易阅读。 E.g。

<强> CSS

<style type="text/css">
  #myrecipies label,
  #myrecipies li:first-child span:first-child,
  #myrecipies textarea {
    display: block;
  }
</style>

<强> HTML

<ul id="myrecipies">
  <li>
    <label for="ingredients">Ingredients</label>
    <span class="help">Enter one ingredient per line.</span>
    <textarea id="ingredients" name="ingredients"></textarea>
    <span class="example"><b>Example:</b><br/>1 Cup of Flour<br/>Pinch of Salt<br/>1 Tbsp of Paprika</span>
  </li>
  <li>
   <label for="yield">Yield</label>
   <input type="number" id="yield" name="yield" />
   <span class="context"> servings.</span>
  </li>
</ul>

这code in action。

Answer 3

如果你的意思是“坏”，就像无效一样，根据W3验证器，没有。  和<label>元素之间允许<input>。

Answer 4

“Bad”如无效？没有。 “不好”就像在语义上一样？是。

更好的方法是将label个元素包装在p个元素中。毕竟它们是段落。（此外，标签不是应该是块元素的东西，它是内联元素，因为它为内联文本提供目的，方式与em或HTML5 time元素确实 - 块元素做的不止于此。使用CSS将其设置为块元素

编辑：另请参阅Alohci的答案，解释为何 在这里使用不正确。

Answer 5

我认为标签不需要与输入字段在同一行。对于良好的用户体验而言，唯一重要的是它紧挨着它，这也可能意味着在上面。

是否在<label>和<input />良好做法之间使用了一个标签？</label>

5 个答案: