Четверг, 28 марта, 2024

Радиокнопки и чекбоксы в HTML, их теги и атрибуты

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Здравствуйте, уважаемые читатели сайта Uspei.com. Следующий элемент, который сегодня мы успеем разобрать радиокнопки и чекбоксы в html. Обычно они используются в целях задания вопроса внутри формы (о создании форм мы говорили тут) и, соответственно, через них мы можем предложить человеку варианты ответа. При этом он может выбрать только один из этих вариантов.

Радиокнопки – тип radio

Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input.

Тип укажем radio. Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes», т.к. эта кнопка будет отвечать за положительный ответ.

<input type="radio" name="time" value="yes">

Давайте добавим метку label c ответом «Да» для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.

<label>Да<input type="radio" name="time" value="yes"></label>

Теперь создадим ей противоположную кнопку с ответом «Нет». Для этого скопируем label и вставим после первого label. Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.

<label>Да<input type="radio" name="time" value="yes"></label>
<label>Нет<input type="radio" name="time" value="no"></label>

Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.

Давайте добавим сам вопрос после открытия абзаца. Спросим человека, любит ли он экономить время?

<p>Любите ли Вы экономить время?</p>
<label>Да<input type="radio" name="time" value="yes"></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked – можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.

<p>Любите ли Вы экономить время?</p> 
<label>Да<input type="radio" name="time" value="yes" checked></label> 
<label>Нет<input type="radio" name="time" value="no"></label>

А вот и конечный результат.

Радиокнопки и чекбоксы в HTML

Чекбоксы – тип checkbox

Альтернативой радиокнопкам в HTML являются чекбоксы, только в этом случае возможно выделять несколько элементов. Давайте для примера создадим новый абзац и спросим, какими инструментами для экономии времени вы любите пользоваться?
После вопроса укажем новый абзац для создания этих самых чекбоксов. Первый чекбокс будет для ежедневника.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label>

Если проверить наш код в браузере, то выглядеть это будет так:

Радиокнопки и чекбоксы в HTML

 

Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.

<p>Какими инструментами для экономии времени Вы пользуетесь?</p> 
<label><input type="checkbox" name="ez">Ежедневник</label> 
<label><input type="checkbox" name="hr">Хронометраж</label> 
<label><input type="checkbox" name="sv">Свои наработки</label>

Обязательно каждый чекбокс называйте своим уникальным именем.
Если сохранить файл и проверить, то можно увидеть следующее:

Радиокнопки и чекбоксы в HTML

По любому из чекбоксов можно нажать и он будет отмечен галочкой. Также можно добавить атрибут checked, чтобы указать значение по умолчанию для чекбокса.

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему