HTML <label>Неоднозначность (в основном в моем мозгу) ...? Может кто-нибудь уточнить?

Question

В последнее время я проделал довольно большую работу с элементами формы, в частности, пытаясь наилучшим образом применить больше семантической разметки к моему макету формы, чтобы я мог предоставлять легко настраиваемые формы с небольшой или без посторонней разметки, такой как div,span и т. д., которые дают небольшое дополнительное значение для формы в семантическом смысле.

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

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

<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, так как я думаю, что весь массив радио / флажков / установлен какцелая часть разметки, которая потребовала бы метки метки в контекстном смысле, но есть ли у кого-нибудь мысли, которые они могли бы объединить с этой?

---

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

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

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>

Проблема этого метода в том, что я не уверен, разрешит ли pv существование одного параметра (то есть <em>Colour</em>) с несколькимиЗначения (то есть элементы class='value' в <labels>).

Хотя с этим не проблема в том, что мне не нужно терять сон, волосы или зубы, пытаясь стилизовать легенду в IE (Я предполагаю, что потеря зубов от удара моего лица об стол и клавиатуру) ...

Answer 1

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

<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 общеизвестно сложен для создания стиля кросс-браузер.

Answer 2

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

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

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

<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 - это PITA.Есть некоторые обходные пути, но ничего совершенно удовлетворительного ИМО.

Answer 3

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

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