Является ли использованиетег между <label>и его <input>хорошей практикой? - PullRequest
Новая
       9

Является ли использованиетег между <label>и его <input>хорошей практикой?

7 голосов
/ 17 июля 2010

Поля в моей форме имеют метку, текст справки, пример текста и контекстный текст. 

<!--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> для моей справки и примера текста. Мне все еще не нравится, что метки всегда находятся на одной строке с вводом.

Ответы [ 5 ]

12 голосов
/ 17 июля 2010

Если кто-то действительно педантичен, почти все случаи использования <br/> являются «плохим HTML».<br/> означает разрыв семантической строки.Другими словами, где удаление <br/> изменит смысл содержимого.Это действительно происходит только в поэзии / текстах песен и почтовых адресах.

Вы можете достичь того же результата, если другие элементы внутри <li> имеют отображение: стиль блока.

4 голосов
/ 17 июля 2010

Это неплохо само по себе, но вы должны использовать 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>

Этот код в действии .

3 голосов
/ 17 июля 2010

«Плохо» как в недействительном?Нет. "Плохо", как в несемантическом?Да.

Лучший способ сделать это - обернуть ваши элементы label в элементы p.В конце концов, это параграфы.(Кроме того, метки - это не то, что должно быть блочными элементами, это встроенный элемент, поскольку он дает цель для встроенного текста, так же, как em или HTML5 timeэлемент делает - элемент блока делает больше, чем это. Стилизуйте его как элемент блока, используя CSS)

Редактировать: См. также ответ Алохчи, объясняющий, почему <br> используется неправильноздесь.

3 голосов
/ 17 июля 2010

Если вы имеете в виду «плохой» как недействительный, согласно валидатору W3, нет.<br> s допускается между <label> и <input> элементами.

2 голосов
/ 17 июля 2010

Я не думаю, что метка должна находиться в той же строке, что и поле ввода. Единственное, что важно для хорошего пользовательского опыта, это то, что оно рядом с ним, что также может означать выше.

...