HTML. Радиокнопки и чекбоксы (Урок 9)

Оглавление:

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

Радиокнопки — тег <input>

Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега 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>

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

Любите ли Вы экономить время?

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

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

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

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

К оглавлению ↑

Чекбоксы

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

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

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

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

 

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

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

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

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

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

На этом урок можно закончить. Переходим к самому главному тегу и HTML и CSS — тегу DIV и его младшему брату тегу SPAN

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *