Блог

Недавно я проделал довольно большую работу с элементами формы, в частности, пытаясь наилучшим образом применить больше семантической разметки к моему макету формы, чтобы я мог предоставлять легко стилизуемые формы с небольшим количеством или вообще без посторонней разметки, такой как divs, spans и т.д., Которые придают форме немного дополнительного смысла в семантическом смысле.

После использования label в качестве элемента размещения как для ввода, так и для заголовка элемента, я заметил, что, похоже, существует некоторая двусмысленность (по крайней мере, на мой взгляд — пожалуйста, не стесняйтесь прояснить этот момент, если это возможно) относительно его использования с точки зрения обычных входных данных и массивов радио / проверки.

Если я могу объяснить на кратком примере…

 <label>Amount<input type='text' name='amount' value='1' /></label>
  

Приведенный выше код достаточно справедлив. Тег label инкапсулирует как элемент формы, так и текст метки ‘Amount’, придающий значение заголовку в контексте того, что он является меткой для ввода. Это кажется прекрасным… да?

но рассмотрим следующие радиоприемники…

 SET A:    
<label>Colour
<span><input type='radio' name='colour' value='red' />Red</span> 
<span><input type='radio' name='colour' value='white' />Blue</span>
<span><input type='radio' name='colour' value='blue' />White</span>
</label>


SET B:    
<span>Colour
<label><input type='radio' name='colour' value='red' />Red</label> 
<label><input type='radio' name='colour' value='white' />Blue</label>
<label><input type='radio' name='colour' value='blue' />White</label>
</span>
  

Пожалуйста, обратите внимание, что использование <span> в качестве элемента инкапсуляции в обоих случаях является чисто случайным и реально может быть любым элементом.

Я склонен ошибаться в выборе SET A сам, поскольку я бы подумал, что весь массив / набор радио / флажков в целом будет частью разметки, для которой потребуется тег label в контекстном смысле, но есть ли у кого-нибудь какие-либо мысли, которые они могут добавить в микс с этим?

После просмотра спецификации микроформата (незавершенной, как и в остальной части Интернета) Я рассматриваю возможность использования сопряжения p-v для предоставления информации о цвете (или любом другом наборе / массиве). С этой целью моего первоначального набора структуры должно быть достаточно для предоставления как отображаемых, так и распределенных представлений страницы со всей необходимой иерархической информацией, я бы хотел правильно классифицировать эти фрагменты информации, я думаю.

Возможно, в данный момент я собираюсь пойти по этому пути. (Пожалуйста, укажите на любую вопиющую глупость, пожалуйста)

 SET A [revised]:    
<somecontainerparentelement class="hproduct">
<label "p-v"><em class="property">Colour</em>
<span><input type='radio' name='colour' value='red' /><em class="value">Red</em></span> 
<span><input type='radio' name='colour' value='white' /><em class="value">Blue</em></span>
<span><input type='radio' name='colour' value='blue' /><em class="value">White</em></span>
</label>
</somecontainerparentelement>
  

Своего рода проблема с этим методом заключается в том, что я не уверен, разрешит ли p-v существование одного параметра (т.Е. <em>Colour</em> ) с несколькими значениями (т.Е. class='value' элементов внутри <labels> ).

Хотя проблема не в том, что мне не придется терять сон, волосы или зубы, пытаясь создать легенду в IE (я предполагаю, что потеря зубов произошла из-за удара лицом о мой стол и клавиатуру)…

Что бы я там сделал, так это…

 <fieldset>
    <legend>Colour</legend>
    <label><input type="radio" name="colour" value="red" />Red</label> 
    <label><input type="radio" name="colour" value="white" />Blue</label>
    <label><input type="radio" name="colour" value="blue" />White</label>
</fieldset>
  

Кроме того, вы можете отделить свой label элемент и связать его for атрибут с id атрибутом элемента. Обычно это упрощает их стилизацию, IMO.

 <fieldset>
    <legend>Colour</legend>
    <input type="radio" name="colour" value="red" id="colour-red" />
    <label for="colour-red">Red</label> 
    <input type="radio" name="colour" value="white" id="colour-white" />
    <label for="colour-white">White</label>
    <input type="radio" name="colour" value="blue" id="colour-blue" />
    <label for="colour-blue">Blue</label>
</fieldset>
  

Обратите внимание, что legend элемент, как известно, сложно стилизовать в разных браузерах.

Спецификация проекта HTML5 специально охватывает ситуацию SET A. В нем говорится:

Если атрибут for не указан, но элемент label имеет дочернего элемента, связанного с формой, который можно пометить, то первым таким потомком в древовидном порядке является элемент label с надписью. Элемент управления label.

Что означает, что

 <label>Colour
  <span><input type='radio' name='colour' value='red' />Red</span> 
  <span><input type='radio' name='colour' value='white' />White</span>
  <span><input type='radio' name='colour' value='blue' />Blue</span>
</label>
  

семантически эквивалентно

 <label>Colour
  <span><input id="control1" type='radio' name='colour' value='red' />Red</span>
</label> 
<span>
   <input id="control2" type='radio' name='colour' value='white' />
   <label for="control1">White</label>
</span>
<span>
   <input id="control3" type='radio' name='colour' value='blue' />
   <label for="control1">Blue</label>
</span>
  

я думаю, это не то, что вы имеете в виду.

Это также имеет практические последствия. Если вы разместите эту разметку на веб-странице, а затем щелкните по словам «Белый» или «Синий», в некоторых браузерах это приведет к выбору переключателя «Красный».

В идеале следовало бы использовать решение Алекса, но, как вы обнаружили, стиль legend — это ЛАВАШ. Есть несколько обходных путей, но ничего полностью удовлетворительного, IMO.

Обычно лучшим решением является соединение элементов с использованием идентификатора:

 <input id="test1" type="text"/><label for="test1">Test 1</label>
<input id="test2" type="text"/><label for="test2">Test 2</label>