Чекбоксы html: Атрибут checked | htmlbook.ru

Leave a Comment / Html / By /

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

Оглавление:

  • Радиокнопки – тип radio
  • Чекбоксы – тип checkbox

Здравствуйте, уважаемые читатели сайта 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>

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

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

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

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

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

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

 

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

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

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

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

Как получить не отмеченные чекбоксы

Вступление

Отправляя данные HTML-формы на сервер, иногда необходимо знать какие чекбоксы были отмечены, а какие нет.

Всем верстальщикам известно — не отмеченные чекбоксы, не отправляются через форму. К примеру, незаполненное текстовое поле будет отправлено, просто значение будет пустым. Отмеченный чекбокс вернет значение «On», а если задан атрибут «value», то значение этого атрибута, не отмеченный чекбокс отправлен не будет.

Иногда встает задача знать, был чекбокс отмечен или нет.

Пример

в СУБД есть таблица — товары (goods), в которой есть поле пометить на удаление (markdelete), которое принимает 2 значения: 0 — если товар не помечен на удаление, 1 — если помечен.

Задача

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

Решение

Напротив каждой записи вывести чекбокс, в названии которого будет храниться идентификатор (id) записи таблицы товаров (например: goods_1, goods_2, goods_258 и т.д.), после вывода списка сделать кнопку при нажатии на которую, не отмеченные чекбоксы будут восприниматься как 0, а отмеченные как 1.

Форма

<form method=»post» action=»checkboxes.php»> <input type=»checkbox» name=»good_1″> Мобильный телефон<br> <input type=»checkbox» name=»good_2″> Телевизор<br> <input type=»checkbox» name=»good_3″> Ноутбук<br> <input type=»checkbox» name=»good_4″> Музыкальный центр<br> <input type=»checkbox» name=»good_5″> Монитор<br> <input type=»submit» value=»Сохранить»> </form>

Мобильный телефон
Телевизор
Ноутбук
Музыкальный центр
Монитор

Это стандартный вариант, в запросе будут посланы только отмеченные чекбоксы, и если, например уже отмеченные чекбокс мы захотим снять, то, мы не узнаем отмечен он или нет. А раз мы не можем узнать значение не отмеченного чекбокса, нам нужно использовать дополнительное поле для каждого чекбокса, которое может отправлять любые значения, даже пустые. Нам подойдет поле типа

hidden ().

Решение при помощи hidden-поле

Нам потребуется соответствующее hidden-поле для каждого чекбокса, уникальный идентификатор для каждого hidden-поля и включенный javascript на стороне клиента. У всех чекбоксов можно смело убирать все атрибуты, кроме конечно type="checkbox".

При нажатии на чекбокс данные будут передаваться в соответствующее hidden-поле и устанавливать в нем значения: 1 — если чекбокс отмечен и 2 — если не отмечен. У каждого чекбокса необходимо добавить событие onclick="document.getElementById(HIDDEN_INPUT_ID).value = this.checked ? 1 : 0;".

Форма

<form method=»post» action=»checkboxes.php»> <input type=»checkbox»> <input type=»hidden» name=»goods_1″ value=»0″> Мобильный телефон<br> <input type=»checkbox»> <input type=»hidden» name=»goods_2″ value=»0″> Телевизор<br> <input type=»checkbox»> <input type=»hidden» name=»goods_3″ value=»0″> Ноутбук<br> <input type=»checkbox»> <input type=»hidden» name=»goods_4″ value=»0″> Музыкальный центр<br> <input type=»checkbox»> <input type=»hidden» name=»goods_5″ value=»0″> Монитор<br> <input type=»submit» value=»Сохранить»> </form>

Мобильный телефон
Телевизор
Ноутбук
Музыкальный центр
Монитор

Результат

Как видно, внешний вид формы не изменился, зато при отправке данных формы, можно узнать отмечен чекбокс или нет, благодаря hidden-полю.

(goods_)([0-9]+)$/’, $post_key, $matches)) { $id = $matches[2]; echo ‘id: ‘.$id.’ &mdash; ‘.$post_value.'<br>’; } } echo ‘<hr>’; } ?>

Заключение

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

Скачать пример

Пример обработки данных на PHP

Зачем нам нужен атрибут value для ввода флажка? — HTML

rubyjumper09109

#1

Следующий код взят из этого упражнения

 label for="lettuce">Lettuce

Нужен ли здесь атрибут value?

Адамгаффни96

, 10:37

#2

Атрибут value флажка используется, когда форма взаимодействует с сервером. Поэтому, когда вы устанавливаете значение как салат, это означает, что когда форма отправляется и этот флажок установлен, значение, которое оно отправляет обратно на сервер, равно topping=lettuce . Затем это можно настроить на стороне сервера для интерпретации и добавления в заказ. Если вы не дадите ему значение, он просто отправит значение «включено» или «выключено», что может быть хорошо, но не совсем ясно. Вы можете прочитать документацию MDN для получения дополнительной информации.

3 лайка

3 августа 2021 г., 13:17

#3

Что, если мы просто используем название как «салат»? Почему мы используем одно и то же имя — topping — для каждого элемента с флажком? В упражнении говорится, что оно группирует входные данные вместе, но зачем нам это делать, когда у нас есть поля ввода (а не переключатели), где мы можем выбрать несколько элементов? Не будет ли проблемой, если на сервер будет отправлено несколько пар «имя-значение» с одним и тем же именем?

Адамгаффни96

#4

Итак, во-первых, если у вас есть несколько флажков с одинаковым именем, способ его отправки путем объединения их в одну строку, например, если у вас было следующее:

И салат и пепперони были проверены, строка, которая будет отправлена, будет «топпинг=салат&топпинг=пепперони». Таким образом, идея состоит в том, что у вас будет что-то на вашем бэкэнде (скорее всего, с использованием регулярных выражений), чтобы разобрать эту строку, скажем, в список или просто в более читаемый формат. Идея состоит в том, что у вас может быть много флажков на странице, поэтому идея заключается в том, что релевантные из них сгруппированы вместе. Вы также можете использовать другое имя для каждого флажка, но тогда вы анализируете, в приведенном выше случае, 3 разных ввода вместо одного со всей необходимой информацией.

Короткий ответ: нет, это не вызовет проблем, если есть несколько флажков с одинаковым именем

и значением , и на самом деле это разработано вокруг этой идеи выбора нескольких флажков для одного и того же.

Также важно иметь в виду, что тег ввода был добавлен в HTML в 90-х годах, точнее, в 95-м, насколько я знаю. В то время у нас не было всех серверных фреймворков и инструментов, которые есть сейчас, поэтому большая часть производства должна была выполняться путем отправки минимального количества данных из-за низкой скорости соединения. Поэтому много данных было отправлено с использованием необработанных строк, а не с использованием таких вещей, как массивы, фреймы данных и тому подобное для отправки данных. Так что, вероятно, сейчас есть лучшие способы отправки такой информации, однако HTML максимально совместим с предыдущими версиями, поэтому формы и вводы практически не изменились за 25 лет.

3 лайков

луккев

#6

Спасибо, Адам, за четкое объяснение. Меня также поразил вопрос rubyjumpers, когда я проходил курс.

Если я правильно понимаю, когда мы не присваиваем значение флажку, он может просто вернуть topping=ON / topping=OFF?

Флажки, переключатели и меню

Такаюки Миёси

Contact Form 7 предоставляет несколько типов тегов формы для представления флажков, переключателей и раскрывающихся меню. В этой статье объясняется использование и семантика этих тегов формы.

Флажки и переключатели

Оба флажка и * представляют собой группу флажков ( в HTML). checkbox* требует, чтобы пользователь установил хотя бы один из флажков.

радио представляет группу переключателей ( в HTML). Поскольку группа переключателей, естественно, требуется, тег формы radio работает как обязательное поле. Рекомендуется предварительно выбрать параметр в группе переключателей, используя параметр по умолчанию: 1 .

Опция Примеры Описание
ID: (ID) ID: FOO ID: FOO 0107 Значение атрибута id элемента оболочки.
class: (class) class:bar class значение атрибута элемента оболочки. Чтобы установить два или более классов, вы можете использовать несколько вариантов класса : .
по умолчанию: (число) по умолчанию:2
по умолчанию:1_2_3 		Предварительно выбранные параметры. Целое число после по умолчанию: — позиция в порядке элементов. 1 — первый. Если вы хотите выделить два или более элемента, соедините целые числа знаком подчеркивания (_), например по умолчанию: 1_2_3 .
label_first   По умолчанию флажок или переключатель ставится первым, а метка — последней. Добавив опцию label_first , вы можете изменить их.
use_label_element   Оберните каждый флажок и переключатель <метка> тег.
эксклюзивный   Сделать флажки эксклюзивными. Это означает, что когда вы устанавливаете флажок в группе, другие будут сняты, поэтому группа принимает только состояние «нулевой выбор» или «один выбранный». Это трюк с JavaScript, поэтому он не работает без JavaScript. Теги формы радио не поддерживают эту опцию.
free_text   Добавить свободное поле ввода текста к последнему элементу.
данные: (имя) данные:страны Получите значения из Listo.

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

Пример:

 [флажок ваша страна "Китай" "Индия" "Сан-Марино"]
Раскрывающиеся меню

Оба выбирают и выбирают* представляют раскрывающееся меню (