Html чекбоксы – Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Чекбоксы 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>

В примере выше, как видно первый элемент по умолчанию становится активным, так как присутствует атрибут checked, а последний чекбокс на против не активен так как «Перец» не является фруктом и нечего его выбирать. Для деактивации этого чекбокса использован атрибут disabled, что и сделало область не активной.

Вот и все с чекбоксами. Результат смотрите Демо-версии, а мы переходим к следующему элементу формы 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="Северо-Восточный АО">
<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: checkbox

Галочка в форме HTML, или "чекбокс" задается тегом input, у которого указан тип checkbox.

Галочка обозначает либо согласие, либо несогласие. Если галочка установлена, то браузер осуществляет отправку переменной с именем поля на сервер. Если же она отсутствует, то, соответственно, браузер ничего не отправляет. Поэтому атрибут

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>

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

loader

Флажки | WebReference

Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создаётся следующим образом.

<input type="checkbox" атрибуты>

Атрибуты флажков перечислены в табл. 1.

Табл. 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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут 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>

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

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