Как сделать обязательным поле checkbox. Обработка чекбоксов в PHP

Это руководство познакомит вас с флажками (checkbox) HTML и научит обращаться с ними в PHP .

Форма из одного флажка

Давайте создадим простою форму с одним флажком (checkbox).

В PHP скрипте (файл checkbox-form.php) возможно прочитать значение поля посредством массива $_POST . Если $_POST["formWheelchair"] присвоено значение YES, то флажок в был выбран. Если флажок не выбран, то переменная $_POST["formWheelchair"] не установлена.

Вот пример обработки формы на PHP:

Переменной $_POST["formWheelchair"] присвоено значение YES, так как значение атрибута value тега input равно «YES» .

Пожалуйста отметьте, что все флажки имеют одно имя (formDoor). Одно имя говорит о том, что все флажки связаны между собой. Квадратные скобки указывают на то, что все значения будут доступны из одного массива. То есть $_POST["formDoor"] не вернет строку, как в примере выше, вместо нее возвратится массив, содержащий значения флажков, которые были выбраны пользователем.

Например, если я отмечу все флажки, $_POST["formDoor"] вернет массив из {A,B,C,D,E} . В примере ниже мы получаем и отображаем все значения массива.

Функция empty пригодится на тот случай, если пользователь ничего не выбрал. Если же массив не пустой, подсчитываем количество выбранных флажков при помощи функции count и выводим все значения при помощи цикла for .

Если выбран флажок "Acorn Building", то массив будет содержать значение "A".

Проверяем, выбран ли конкретный флажок

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

Function IsChecked($chkname,$value) { if(!empty($_POST[$chkname])) { foreach($_POST[$chkname] as $chkval) { if($chkval == $value) { return true; } } } return false; }

Теперь достаточно просто вызвать функцию IsChecked (chkboxname,значение). Например:

If(IsChecked("formDoor","A")) { //do ... }

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

Input:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }

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

Стилизуем чекбоксы

Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

Input { display: none; }

Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента:before, просто добавим рамку:

Checkbox label:before { border-radius: 3px; }

Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ? ✓.

Input:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }

В итоге, вот что у нас должно получиться:

Итоги

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

В этой статье мы расскажем о input type checkbox HTML , и том, как они обрабатываются в PHP .

Одиночный чекбокс

Создадим простую форму с одним чекбоксом:

В PHP скрипте (checkbox-form.php ) мы можем получить выбранный вариант из массива $_POST . Если $_POST[‘formWheelchair’] имеет значение «Yes «, то флажок для варианта установлен. Если флажок не был установлен, $_POST[‘formWheelchair’] не будет задан.

Вот пример обработки формы в PHP :

Для $_POST[‘formSubmit’] было установлено значение “Yes ”, так как это значение задано в атрибуте чекбокса value :

Вместо “Yes ” вы можете установить значение «1 » или «on «. Убедитесь, что код проверки в скрипте PHP также обновлен.

Группа че-боксов

Иногда нужно вывести в форме группу связанных PHP input type checkbox . Преимущество группы чекбоксов заключается в том, что пользователь может выбрать несколько вариантов. В отличие от радиокнопки, где из группы может быть выбран только один вариант.

Возьмем приведенный выше пример и на его основе предоставим пользователю список зданий:

Обратите внимание, что input type checkbox имеют одно и то же имя (formDoor ). И что каждое имя оканчивается на . Используя одно имя, мы указываем на то, что чекбоксы связаны. С помощью мы указываем, что выбранные значения будут доступны для PHP скрипта в виде массива. То есть, $_POST[‘formDoor’] возвращает не одну строку, как в приведенном выше примере; вместо этого возвращается массив, состоящий из всех значений чекбоксов, которые были выбраны.

Например, если я выбрал все варианты, $_POST[‘formDoor’] будет представлять собой массив, состоящий из: {A, B, C, D, E}. Ниже приводится пример, как вывести значение массива:

Если ни один из вариантов не выбран, $_POST[‘formDoor’] не будет задан, поэтому для проверки этого случая используйте «пустую » функцию. Если значение задано, то мы перебираем массив через цикл с помощью функции count() , которая возвращает размер массива и выводит здания, которые были выбраны.

Если флажок установлен для варианта «Acorn Building «, то массив будет содержать значение ‘A ‘. Аналогично, если выбран «Carnegie Complex «, массив будет содержать C .

Проверка, выбран ли конкретный вариант

Часто требуется проверить, выбран ли какой-либо конкретный вариант из всех доступных элементов в группе HTML input type checkbox . Вот функция, которая осуществляет такую проверку:

function IsChecked($chkname,$value) { if(!empty($_POST[$chkname])) { foreach($_POST[$chkname] as $chkval) { if($chkval == $value) { return true; } } } return false; }

Чтобы использовать ее, просто вызовите IsChecked (имя_чекбокса, значение ). Например:

if(IsChecked("formDoor","A")) { //сделать что-то... } //или использовать в расчете... $price += IsChecked("formDoor","A") ? 10: 0; $price += IsChecked("formDoor","B") ? 20: 0;

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

Скачать PHP код примера формы с PHP input type checkbox .

Данная публикация представляет собой перевод статьи «Handling checkbox in a PHP form processor » , подготовленной дружной командой проекта

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

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

Если есть необходимость в том, чтобы галочка присутствовала по умолчанию, то необходимо добавить к тегу атрибут checked . Выглядеть это будет вот так:

А так чекбокс выглядит в браузере:

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

Код для формы, приведённой в начале статьи будет следующим:

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

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина ), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.

Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже ) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.

Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.

Важные особенности

Чтобы всё получилось, важно учитывать следующее:

1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
2. Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).

«Фокус» заключается в использовании псевдоселекторов:checked и:not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов:before и:after для тега или вышеупомянутого тега-обертки.

Стилизация для современных браузеров

Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.

Теги чекбокса и радиокнопки находятся перед тегом

В HTML-коде это выглядит следующим образом:

Я переключаю чекбокс А я переключаю радиокнопку

Еще раз хочу заострить ваше внимание — тег обязательно должен быть расположен перед тегом . Если вы поменяете их местами, ничего работать не будет.

CSS-код для чекбокса будет таким:

Checkbox { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox + label { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio + label { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

С помощью свойств position , z-index и opacity для классов.checkbox и.radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Теги чекбокса и радиокнопки находятся внутри тега

HTML-код в данном случае будет следующим:

По аналогии с предыдущим вариантом — тег обязательно должен быть расположен перед тегами с классом.checkbox__text и.radio__text .

CSS-код для чекбокса будет таким:

Checkbox input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox__text { position: relative; padding: 0 0 0 60px; cursor: pointer; } .checkbox__text:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox__text:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox input:checked + .checkbox__text:before { background: #9FD468; } .checkbox input:checked + .checkbox__text:after { left: 26px; } .checkbox input:focus + .checkbox__text:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки будет таким:

Radio input { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio__text { position: relative; padding: 0 0 0 35px; cursor: pointer; } .radio__text:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio__text:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio input:checked + .radio__text:after { opacity: 1; } .radio input:focus + .radio__text:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

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

Стилизация с учетом старых браузеров

CSS-код для чекбокса . В комментариях к коду я добавил пояснения касательно браузеров:

/* Cначала обозначаем стили для IE8 и более старых версий т.е. здесь мы немного облагораживаем стандартный чекбокс. */ .checkbox { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } /* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом. Показываем, что label кликабелен. */ .checkbox + label { cursor: pointer; } /* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше. Благодаря тому, что старые браузеры не поддерживают селекторы:not и:checked, в них все нижеследующие стили не сработают. В данном случае checked указывается без двоеточия впереди, почему-то это срабатывает именно так. */ .checkbox:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; } .checkbox:not(checked) + label { position: relative; padding: 0 0 0 60px; } .checkbox:not(checked) + label:before { content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; } .checkbox:not(checked) + label:after { content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; } .checkbox:checked + label:before { background: #9FD468; } .checkbox:checked + label:after { left: 26px; } .checkbox:focus + label:before { box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); }

CSS-код для радиокнопки :

Radio { vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; } .radio + label { cursor: pointer; } .radio:not(checked) { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .radio:not(checked) + label { position: relative; padding: 0 0 0 35px; } .radio:not(checked) + label:before { content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; } .radio:not(checked) + label:after { content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; } .radio:checked + label:after { opacity: 1; } .radio:focus + label:before { box-shadow: 0 0 0 3px rgba(255,255,0,.7); }

Примеры

Вот таким несложным образом это и делается. Благодаря данному способу, оформить чекбоксы и радиокнопки с помощью CSS можно так, как вам будет угодно.