Переключение radio кнопки и checkbox нажатием на подпись в HTML

При создании HTML формы часто применяются радио кнопки (radio) и переключатели (checkbox). В самом простом виде они добавляются следующими тегами:

<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
<input type="radio" name="mycheck" value="3"/> Значение 3

<input type="checkbox" name="mycheck1" value="1"/> Значение 1<br/>
<input type="checkbox" name="mycheck2" value="2"/> Значение 2<br/>
<input type="checkbox" name="mycheck3" value="3"/> Значение 3

В результате получается следующие формы:

Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3

В общем-то, все работает и можно оставить все так, но все же, есть некоторые неудобства. Для использования установленных переключателей, посетителю страницы необходимо нажать именно на них. Учитывая размеры этих переключателей, попадать в них достаточно неудобно. Например, в windows-программах аналогичные компоненты имеют собственные поля подписи, и переключение срабатывает как по нажатию на сам переключатель, так и по его подписи.

Для создания такой связи между подписью и переключателем (а так же других элементов) в HTML применяется тег LABEL. С его помощь можно связать элементы двумя способами.

Первый способ – размещение переключателя и его подписи в пределах одного тега:

<label>
<input type="radio" name="mycheck" value="1"/> Значение 1<br/>
</label>
<label>
<input type="radio" name="mycheck" value="2"/> Значение 2<br/>
</label>
<label>
<input type="radio" name="mycheck" value="3"/> Значение 3
</label>

* Если в пределах одного тега находится несколько переключателей, то по нажатию на подписи, срабатывает только первый.

Второй способ – обрамление подписи тегами LABEL с указанием для них атрибута FOR, который должен содержать ID нужного переключателя:

<input id="ch1" type="checkbox" name="mycheck1" value="1"/>
<label for="ch1">Значение 1</label><br/>

<input id="ch2" type="checkbox" name="mycheck2" value="2"/>
<label for="ch2">Значение 2</label><br/>

<input id="ch3" type="checkbox" name="mycheck3" value="3"/>
<label for="ch3">Значение 3</label>

В результате получим формы, где переключатели управляются по нажатию на их подписи:

Значение 1
Значение 2
Значение 3
Значение 1
Значение 2
Значение 3