Чекбоксы HTML.
Мы продолжаем рассматривать элементы формы и сегодня мы рассмотрим еще один вид переключателей в HTML это чекбоксы. Чекбоксы это альтернатива радиокнопкам только чекбоксы позволяют выделить одновременно несколько элементов в противоположность радиокнопкам, где можно выбрать только один элемент.
Чекбоксы создаются очень просто с помощью все того же тега <input> только атрибут type=»» будет содержать значение checkbox.
И так, создадим пару таких чекбоксов, позволяющих пользователю сделать выбор из предложенных вариантов. Для этого создаем отдельный абзац, в котором создадим сами чекбоксы, где и предложим варианты выбора.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больше всего?
Какие Вы фрукты любите больше всего?
Аппельсины
Бананы
Яблоки
Груши
Перец
</body>
</html> Как мы видим, каждый чекбокс мы заключили в тег <label> </label>, чтобы при нажатии на название фрукта чекбокс выделялся автоматически. Как уже заметили у каждого чекбокса свое имя, т.е. у атрибута name свое индивидуальное значение.
Если вы уже сохранили у себя в редакторе код выше и обновили браузер то у Вас должны были появится четыре чекбокса, которые можно выбрать хоть один, хоть все сразу. В данном варианте при загрузке страницы все чекбоксы пустые, однако бывают ситуации, когда нужно по умолчанию выделить один из них.
Для этого используется все тот же атрибут checked, который изначально отмечает выбранный чекбокс.
HTML
Апельсины
Теперь, если посмотрите, то чекбокс с именем «Апельсины» автоматически становится активным. И рассмотрим еще один атрибут для чекбоксов, который позволяет сделать не активный чекбокс. Этот атрибут именуется disabled, что в переводе с английского означает «отключен». С помощью этого атрибута чекбокс делается не активным и не реагирует на действия пользователя.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Какие Вы фрукты любите больще всего?
Аппельсины
Бананы
Яблоки
Груши
Перец
</body>
</html>В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут
Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы select.
Множественная отправка чекбоксов в HTML
Итак, чекбоксы. Или же input type=»checkbox». В основном, наверное, вы встречали их на сайтах в виде галочки «я согласен с условиями политики конфеденциальности». Но нередко они используются и для конкретной отправки чего-либо заказчику сайта. И сегодня мы поговорим именно о Множественной отправке чекбоксов.
На фото выше — фрагмент типичного маркетингового квиза (когда пользователя ведут по вопросам, он отвечает на них, а затем, к примеру, получает скидку). Все данные, что он заполнил, утекают к заказчику.
Итак, в целом, мы могли бы написать что-то такое:
1 2 | <input type="checkbox" name="Расположение-1" value="Центральный АО"> <input type="checkbox" name="Расположение-2" value="Северо-Восточный АО"> |
<input type="checkbox" name="Расположение-1" value="Центральный АО"> <input type="checkbox" name="Расположение-2" value="Северо-Восточный АО">
В таком случае на почту придет куча данных типа: «check-1: Центральный АО», «check-2: Северо-Восточный АО». Надо ли нам такое, когда у нас куча чекбоксов? Сомнительно.
Для этого есть специальное значение name.
1 2 |
|
<input type="checkbox" name="Расположение[]" value="Центральный АО"> <input type="checkbox" name="Расположение[]" value="Северо-Восточный АО">
Теперь же, при правильном php-обработчике (такой я приложу к этой статье) мы будем получать: «Расположение: Центральный АО, Северо-Восточный АО» и так далее. Суть в том, что одинаковые по сути (замыслу) чекбоксы делать одной сущностью, как бы «объединяя» их через одинаковый name. Но без квадратных скобок никуда, иначе придет ответом только самый нижний (в коде) из выбранных элементов.
Ну и еще по поводу связи с лейблами, если у вас множество чекбоксов — нет смысла (и вообще странно) использовать атрибут for.
1 2 3 4 | <label> <input type="checkbox" name="Расположение[]" value="Центральный АО"> <span>Центральный АО</span> </label> |
<label> <input type="checkbox" name="Расположение[]" value="Центральный АО"> <span>Центральный АО</span> </label>
Тут и стилизовать через ~ очень легко будет 🙂
Как-то так. Пользуйтесь и не забывайте об этом)
mail.php
Метки: checkboxes, HTML
Галочка в форме HTML: checkbox
Галочка в форме HTML, или «чекбокс» задается тегом input, у которого указан тип
Галочка обозначает либо согласие, либо несогласие. Если галочка установлена, то браузер осуществляет отправку переменной с именем поля на сервер. Если же она отсутствует, то, соответственно, браузер ничего не отправляет. Поэтому атрибут value нельзя отнести к числу обязательных.
Если есть необходимость в том, чтобы галочка присутствовала по умолчанию, то необходимо добавить к тегу атрибут checked. Выглядеть это будет вот так:
<input type="checkbox" checked>А так чекбокс выглядит в браузере:
Наличие чекбокса не означает, что должен осуществляться выбор какого-то одного элемента из присутствующих. В связи с этим, если в одной форме присутствуют несколько чекбоксов, то им следует задавать разные имена.
Код для формы, приведённой в начале статьи будет следующим:
<form action="/order">
<label>
Завтрак
<input type="checkbox" name="breakfast" checked>
</label>
<br>
<label>
Обед
<input type="checkbox" name="lunch">
</label>
<br>
<label>
Ужин
<input type="checkbox" name="dinner" checked>
</label>
</form>Что касается названия, то в профессиональной среде поле называют «чекбоксом».
Флажки | WebReference
Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создаётся следующим образом.
<input type="checkbox" атрибуты>Атрибуты флажков перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| checked | Предварительное выделение флажка. |
| name | Имя флажка для его идентификации обработчиком формы. |
| value | Задаёт, какое значение будет отправлено на сервер. |
Использование флажков показано в примере 1.
Пример 1. Создание флажков
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Флажки</title>
</head>
<body>
<form action="handler.php">
<p>В каких годах произошли самые известные извержения вулкана Кракатау?</p>
<p><input type="checkbox" name="a" value="1417"> 1417</p>
<p><input type="checkbox" name="a" value="1680" checked> 1680</p>
<p><input type="checkbox" name="a" value="1883" checked> 1883</p>
<p><input type="checkbox" name="a" value="1934"> 1934</p>
<p><input type="checkbox" name="a" value="2010"> 2010</p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html> В результате получим следующее (рис. 1).
Рис. 1. Вид флажков
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Атрибут checked тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут checked (HTML тега <input>) является логическим атрибутом и указывает, что элемент должен быть предварительно выбран при загрузке страницы (применяется только для <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется).
Поддержка браузерами
Синтаксис:
<input checked>
Значения атрибута
| Значение | Описание |
|---|---|
| checked | Значение атрибута требуется только в XHTML (<input checked = «checked»/>). |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута checked HTML тега <input></title>
<style>
input:checked { /* псевдокласс :checked выбирает элементы input с атрибутом checked*/
width: 25px; /* устанавливает ширину если элемент выбран */
height: 25px; /* устанавливает высоту если элемент выбран */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}
input:not(:checked) { /* псевдокласс отрицания :not выбирает все элементы input без атрибута checked (которые не выбрал псевдокласс :checked) */
transition: .5s; /* устанавливаем эффект перехода (высота и ширина элемента будет изменяться пол секунды) */
}
</style>
</head>
<body>
<form>
<input type = "radio" name = "first" checked>Мужчина<br> /* элемент предопределен */
<input type = "radio" name = "first">Женщина<br>
<input type = "radio" name = "first" disabled>Собака<br> /* элемент должен быть отключен */
<input type = "checkbox">Старше 16
<input type = "checkbox" checked>Младше 16 /* элемент предопределен */
</form>
</body>
</html>
В данном примере мы указали для элемента <input> с типом радио-кнопка (type = «radio») и флажок (type = «checkbox») атрибут checked. Для одного элемента мы указали атрибут disabled, который не дает нам сделать выбор (элемент отключен).
Кроме того мы создали стиль для элементов, которые выбраны (checked), используя псевдокласс :checked и для элементов, которые не выбраны, используя псевдокласс отрицания :not и псевдокласс :checked в качестве селектора.
Пример использования атрибута checked HTML тега <input> (предварительный выбор элемента).HTML тег <input>