Имеет использование <br/> тег между <маркировка> и <вход> хорошая практика?
Поля в моей форме имеют маркировку, некоторый текст справки, некоторый текст в качестве примера и некоторый контекстный текст.
<!--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 ответов
Если быть очень педантичным, то почти все случаи использования
Того же результата можно добиться, сделав так, чтобы другие элементы внутри имели стилизацию display:block.
"Плохой" в смысле недействительный? Нет. "Плохо" в смысле несемантично? Да.
Лучшим способом сделать это было бы обернуть элементы label в элементы p. В конце концов, это параграфы. (Кроме того, метки - это не то, что должно быть блочными элементами, это элемент инлайн, потому что он придает цель инлайн-тексту, так же, как это делает em или элемент HTML5 time - блочный элемент делает больше. Стилизуйте его как блочный элемент с помощью CSS)
Редактировать: См. также ответ Alohci, объясняющий, почему
Я не думаю, что таблица должна находиться в одной строке с полем ввода. Единственное, что важно для хорошего пользовательского опыта, это то, что она находится рядом с ним, что также может означать выше.
Если вы имеете в виду "плохой" в смысле недействительный, согласно валидатору W3, то нет. и .
Само по себе это неплохо, но вы должны использовать 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>
Этот код в действии .