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

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>

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

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

Answer 1

如果一个人真的很迂腐,几乎所有的用法<br/>都是"糟糕的HTML".<br/>意味着语义线断裂.换句话说,删除<br/>会改变内容的含义.这些只出现在诗歌/歌词和邮政地址中.

你可以通过使<li>s中的其他元素具有显示来实现相同的结果:块样式.