在 <label> 和它的 <input> 之间使用 <br/> 标签是一种好的做法吗？

Posted 2023-02-24

【中文标题】在 <label> 和它的 <input> 之间使用 <br/> 标签是一种好的做法吗？

【英文标题】：Is the use of a <br/> tag between a <label> and its <input> good practice?

【发布时间】：2011-03-17 08:26:49

【问题描述】：

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

<!--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>

当我看到它没有样式时，它让我发疯了所有这些东西是如何在同一条线上运行的。

我可能在打字时想出了解决问题的方法。我想我可能会使用<p> 来获取帮助和示例文本。我仍然不喜欢标签总是与输入在同一行。

【问题讨论】：

你对<b>的使用绝对是糟糕的html。

为什么？我不想强调它包含的文本。我只希望它在印刷/视觉上大胆。换一种说法。如果我把它排除在外并且没有使文本加粗，它仍然是完全有意义的。 w3schools.com/html5/tag_b.asp

【参考方案1】：

根据 W3 验证器，如果您的意思是“坏”为无效，则不会。 <br>s 允许在 <label> 和 <input> 元素之间。

【讨论】：

实际上，<br> 元素是允许在 <li> 元素中的。它的兄弟姐妹完全不相关。

我知道它是有效的。我想我想知道的是这是否是好的做法。这个问题我可能想多了。

【参考方案2】：

这本身还不错，但您应该使用 CSS 进行样式设置（例如布局）。它使代码更易于阅读。例如

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。

【参考方案3】：

“Bad”无效？不。 “坏”是没有语义的？是的。

这样做的更好方法是将label 元素包装在p 元素中。毕竟，它们是段落。 （此外，标签不应该是块元素，它是一个内联元素，因为它为内联文本提供了用途，与em 或HTML5 @ 相同的方式987654326@ 元素可以——块元素的作用不止于此。使用 CSS 将其设置为块元素）

编辑：另见 Alohci 的回答，解释了为什么 <br> 在这里被错误地使用。

【讨论】：

在段落中包装标签？这并不比使用换行符更好。大多数表单标签不是文本段落，因此它们不属于 <p> 标记。

一个“段落”不必超过几个词，它只是描述一个文本块。

不，在书面形式中，一个段落通常包含一个或多个句子 (en.wikipedia.org/wiki/Paragraph) 并处理单个点或想法。由于 W3C 规范规定 <p> 标记表示一段文本 (w3.org/TR/1999/REC-html401-19991224/struct/text.html#h-9.3.1)，因此表单标签是对 <p> 元素的不当使用。

【参考方案4】：

如果一个人真的很迂腐，那么<br/> 的几乎所有用法都是“糟糕的 HTML”。 <br/> 表示语义换行符。换句话说，删除<br/> 会改变内容的含义。这些真的只出现在诗歌/歌词和邮政地址中。

您可以通过使 <li>s 中的其他元素具有 display:block 样式来实现相同的结果。

【讨论】：

谢谢。我想多了。我正计划将它们设计为块状。在我编写 HTML 时，我一直在浏览器中查看它们在一行中的运行情况。我忍不住想打破界限。

【参考方案5】：

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