Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Переключение radio кнопки и checkbox нажатием на подпись в HTML
logo

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

31.01.2015

При создании 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>

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




Другие материалы:

Падающие снежинки на сайте


Отправка (submit) формы после выбора файла с оформлением input[file]


Отключение авто-заполнения в текстовых полях формы


Написать комментарий

Комментарии

В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.


коммент.

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных