CODEWITHSUNDEEP
htmlcssformssemantics
user213811
user213811

Reputation:

Is the use of a <br/> tag between a <label> and its <input> good practice?

The fields in my form have a label, some help text, some example text, and some contextual text.

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

When I look at it un-styled it drives me nuts how all of these things run together on the same line.

I might have come up with a solution to my question while typing. I think I might use <p> for my help and example text. I still don't like that labels are always on the same line as the input.

Upvotes: 8

Views: 21845

Answers (5)

tcooc
tcooc

Reputation: 21269

If you mean "bad" as in invalid, according to the W3 validator, no. <br>s are allowed between <label> and <input> elements.

Upvotes: 3

Gert Grenander
Gert Grenander

Reputation: 17104

It's not bad per se, but you ought to use CSS for styling (e.g. layout). It makes the code easier to read. 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>

This code in action.

Upvotes: 4

You
You

Reputation: 23824

"Bad" as in invalid? No. "Bad" as in unsemantic? Yes.

A better way of doing this would be to wrap your label elements in p elements. They are paragraphs, after all. (Besides, labels are not something that should be block elements, it is an inline element because it gives purpose to inline text, the same way em or the HTML5 time element does — a block element does more than that. Style it as a block element using CSS)

Edit: See also the answer by Alohci, explaining why <br> is being used incorrectly here.

Upvotes: 3

Alohci
Alohci

Reputation: 83125

If one is being really pedantic, almost all uses of <br/> are 'bad HTML'. <br/> means a semantic line break. In other words, where removing the <br/> would change the meaning of the content. These really only occur in poetry/lyrics and postal addresses.

You could achieve the same outcome by making the other elements inside the <li>s have display:block styling.

Upvotes: 12

JochenJung
JochenJung

Reputation: 7213

I don't think a lable needs to be in the same line as the input field. The only thing that is important for a good user experience, is that it is next to it, which could also mean above.

Upvotes: 2

Related Questions