В этой статье мы расскажем о 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 » , подготовленной дружной командой проекта
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина ), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила.
Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже ) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы.
Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.
Важные особенности
Чтобы всё получилось, важно учитывать следующее:
- Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег
- Тег должен находиться до тега
«Фокус» заключается в использовании псевдоселекторов: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 можно так, как вам будет угодно.
Здравствуйте, уважаемые читатели сайта сайт. Следующий элемент, который сегодня мы успеем разобрать радиокнопки и чекбоксы в html . Обычно они используются в целях задания вопроса внутри формы (о создании форм мы говорили ) и, соответственно, через них мы можем предложить человеку варианты ответа. При этом он может выбрать только один из этих вариантов.
Радиокнопки - тип radio
Давайте приступим к реализации радиокнопок. Перейдем в код и для радиокнопок выделим отдельный абзац. В нем и создадим нашу радиокнопку. Кнопка создается при помощи тега input .
Тип укажем radio . Зададим кнопке имя и укажем значение, т.е. какое значение будет отослано обработчику, если эта кнопка будет активна. Для этой кнопке мы укажем значение «yes », т.к. эта кнопка будет отвечать за положительный ответ.
Давайте добавим метку label c ответом «Да » для того, чтобы человек кликнул по метке, и кнопка активировалась автоматически.
Теперь создадим ей противоположную кнопку с ответом «Нет ». Для этого скопируем label и вставим после первого label . Поменяем «Да» на «Нет» и меняем значение «yes» на «no». Обратите внимание, что имя мы должны оставить то же самое. Это скажет браузеру о том, что эти радиокнопки принадлежат к единой группе и что они взаимоисключающие друг друга. То есть, если активировать одну кнопку, то другая деактивируется. Если имена кнопкам дать разные, то можно одновременно активировать обе кнопки.
Вот таким образом можно передавать обработчику значение = выбор того или иного ответа.
Давайте добавим сам вопрос после открытия абзаца. Спросим человека, любит ли он экономить время?
Любите ли Вы экономить время?
И еще один момент, который может вам пригодиться – это автоматическая активация кнопок изначально. Для этого есть специальный атрибут, который можно добавить к нужной кнопке. Эта кнопка будет активирована изначально. Атрибут называется checked - можно перевести как отмеченный. Этому атрибуту не нужно указывать никакого значения.
Любите ли Вы экономить время?
А вот и конечный результат.
Чекбоксы - тип checkbox
Альтернативой радиокнопкам в HTML являются чекбоксы
, только в этом случае возможно выделять несколько элементов. Давайте для примера создадим новый абзац и спросим, какими инструментами для экономии времени вы любите пользоваться?
После вопроса укажем новый абзац для создания этих самых чекбоксов. Первый чекбокс будет для ежедневника.
Если проверить наш код в браузере, то выглядеть это будет так:
Теперь таким же образом создадим еще два чекбокса: хронометраж и свои наработки.
Какими инструментами для экономии времени Вы пользуетесь?
Обязательно каждый чекбокс называйте своим уникальным именем.
Если сохранить файл и проверить, то можно увидеть следующее.
Все разработчики сайтов, веб-приложений и десктопных программ знают, что такое чекбоксы. Но те люди, которые далеки от программирования, встречая такое непонятное иностранное слово, не понимают, о чем идет речь. На самом деле все очень просто. Чекбоксы - это одни из простейших элементов управления при создании форм.
Обычная галочка
Все люди встречались в жизни с такими символами, как галочка, начиная еще со школьной скамьи. При проведении тестирования нужно отмечать правильный вариант этим знаком. Затем при заполнении различных анкет. Ну а в нынешнее время, когда пользователи совершают через Интернет множество действий, без галочек вообще никуда. Даже простейшая регистрация на каком-либо сайте требует отметить некоторые пункты (увлечения, навыки).
Также сейчас развита интернет-торговля. При создании заказа пользователь отмечает интересующие его пункты. А еще часто при установке компьютерной игры предлагается выбрать дополнительное программное обеспечение. И тут тоже нужно сделать выбор. Так вот, чекбоксы - это те самые галочки, которые используются на веб-страницах.
В создании сайтов
Разработчики сайтов видят этот элемент несколько шире. Ведь создать сложнее, чем просто один раз кликнуть мышкой на квадратике и поставить галочку. Сайты разрабатываются при помощи гипертекстового языка разметки, который в профессиональной среде называют всего четырьмя буквами - HTML. И чтобы в нем создать галочку, необходимо написать определенный код.
Как же создаются чекбоксы? HTML имеет специализированный элемент (тег), который является полем, наделенным типом «чекбокс», который пишется следующим образом: .
Принципы функционирования
Работает такой элемент по простейшему принципу: либо утверждение, либо отрицание. Если в поле отмечена галочка, то веб-браузер отправляет переменную, которая отправит имя поля на сервер для обработки, если же галочка не отмечена, то сервер ничего не получает. У элемента есть необязательный атрибут со значением value, но он является необязательным.
Иногда бывает так, что на странице некоторые галочки уже стоят отмеченными. Для этого разработчики добавляют к тегу специальный атрибут, который указывает на уже поставленную по умолчанию галочку. Это атрибут checked, то есть «отмечено».
Чекбоксы - это такие элементы, которые подразумевают не единичный выбор из нескольких вариантов, а отметку всех подходящих. Для разработчика это имеет значение, потому что если одна форма содержит несколько чекбоксов, их имена должны быть отличными друг от друга.
Зависимые чекбоксы
В случае, когда нужно выбирать лишь один вариант из множества, используются другие элементы - радиокнопки, а не флажки. Но иногда применяется такой тип, как зависимые чекбоксы. HTML совместно с языком программирования JavaScript позволяет сделать один главный флажок, от которого зависят другие. При нажатии на него могут быть отмечены сразу несколько чекбоксов. Такое используется редко, так как это несколько противоречит самому правилу отметки галочек.
Как и все теги в HTML, чекбоксы - это такие элементы, которые имеют свои признаки. Какими они бывают? Выше уже был упомянут атрибут для предварительной отметки флажка - checked. Так как в одной форме у чекбоксов должны быть различные имена, нужен атрибут name. Он как раз идентифицирует каждый отдельный флажок. Для того, чтобы задать значение, которое будет отправляться на сервер, используют атрибут value.
Стоит отметить, что чекбоксы - это графические элементы управления, которые используются преимущественно в формах. И работают они в тремх режимах: не выбранный, выбранный и неопределенный.
Применение в таблицах
Чекбокс применяется не только в HTML при разработке сайтов и веб-приложений. Такое программное обеспечение, как 1С, тоже использует данный элемент. Ведь на предприятии есть множество разных составляющих и при работе с документацией все это необходимо отмечать. К примеру, при помощи чекбокса можно отметить список складских запасов или клиентов, которым нужно отправить товар.
В каких еще программах применяется данный элемент? Excel - все знают эту программу для составления таблиц от компании Microsoft, которая часто является Принцип работы флажка здесь таков: если галочка отмечена, то элемент возвращает истинное значение, если снята - ложное. Чтобы вставить чекбокс в документ, нужно включить специальную вкладку для разработчика. Делается это через параметры, которые в каждой версии Excel немного отличаются.
Как найти нужные настройки? Всегда есть справка или поисковая система. После того, как вкладка включена, можно вставлять элемент через команду «Вставить» пункта «Элементы управления». Здесь нужно обратить внимание на то, что это меню также содержит элементы ActiveX, расположенные под необходимыми элементами формы. Там тоже имеются чекбоксы. В чем между ними разница? Для использования элементов ActiveX нужен встроенный язык программирования VBA, который знают немногие. А обыкновенные флажки можно сразу привязать к определенной ячейке в документе.
После того, как чекбоксы в Excel будут вставлены, они по умолчанию становятся отмеченными. При нажатии мышью в любом месте документа отметка снимается. Для обратного выделения нужно кликнуть на флажок правой кнопкой мышки, так как левая кнопка снимает или устанавливает галочку.
При наведении курсора на флажок, зажатии и удерживании левой кнопки можно переместить элемент в любое место на документе. Также это удобно делать клавишами на клавиатуре. При наведении курсора на углы элемента можно растянуть его до большего размера или уменьшить. Специальные настройки позволяют оформить флажок, изменив его цвет, фон, рамку.
Вывод
Итак, как видно из вышесказанного, чекбоксы - это не сложный элемент графического интерфейса, а то, с чем все сталкиваются в повседневной жизни - обыкновенная галочка. Понятие немного отличается для программиста и рядового пользователя, но суть одинакова: это элемент управления, который дает возможность сделать множественный выбор при заполнении какой-либо формы. Важно не перепутать чекбоксы с радиокнопками, которые дают возможность выбрать лишь один пункт из множества.