Как сделать чекбокс в php

Обновлено: 05.07.2024

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

span class = "hljs-tag" > & lt ; span class = "hljs-title" > form / span > span class = "hljs-attribute" > action / span >= span class = "hljs-value" > "checkbox-form.php" / span > span class = "hljs-attribute" > method / span >= span class = "hljs-value" > "post" / span > & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formWheelchair" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "Yes" / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "submit" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formSubmit" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "Submit" / span > / & gt ; / span >

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

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

span class = "hljs-keyword" > if / span > ( span class = "hljs-keyword" > isset / span > ( span class = "hljs-variable" > $ _POST / span > [ span class = "hljs-string" > 'formWheelchair' / span > ] ) & amp ; & amp ;

span class = "hljs-variable" > $ _POST / span > [ span class = "hljs-string" > 'formWheelchair' / span > ] == span class = "hljs-string" > 'Yes' / span > )

span class = "hljs-keyword" > echo / span > span class = "hljs-string" > "Требуется доступ." / span > ;

span class = "hljs-keyword" > echo / span > span class = "hljs-string" > "Доступ не нужен." / span > ;

Атрибуту value вместо YES можно установить 1. Не забудьте ваш обновить ваш PHP код, соответственно установленным значениям.

Группа флажков

Нередко возникают ситуации, когда в форму необходимо вставить несколько флажков. Особенно в том случае, когда пользователю необходимо предоставить право выбора из нескольких вариантов. Это важно, так как, например, переключатель ( radio ) можно выбрать всего один.

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

Выберите здания , которые необходимо посетить . span class = "hljs-tag" > & lt ; span class = "hljs-title" > br / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formDoor[]" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "A" / span > / & gt ; / span > Acorn Building span class = "hljs-tag" > & lt ; span class = "hljs-title" > br / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formDoor[]" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "B" / span > / & gt ; / span > Brown Hall span class = "hljs-tag" > & lt ; span class = "hljs-title" > br / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formDoor[]" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "C" / span > / & gt ; / span > Carnegie Complex span class = "hljs-tag" > & lt ; span class = "hljs-title" > br / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formDoor[]" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "D" / span > / & gt ; / span > Drake Commons span class = "hljs-tag" > & lt ; span class = "hljs-title" > br / span > / & gt ; / span >

span class = "hljs-tag" > & lt ; span class = "hljs-title" > input / span > span class = "hljs-attribute" > type / span >= span class = "hljs-value" > "checkbox" / span > span class = "hljs-attribute" > name / span >= span class = "hljs-value" > "formDoor[]" / span > span class = "hljs-attribute" > value / span >= span class = "hljs-value" > "E" / span > / & gt ; / span > Elliot House

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

Например, если я отмечу все флажки, $_POST['formDoor'] вернет массив из . В примере ниже мы получаем и отображаем все значения массива.

Вопрос задан более двух лет назад
1172 просмотра

В форму добавить чекбокс,но насколько помню,мне не удалось с помощью атрибута required защититься от спама.

Защиту от спама реализовал с помощью скрытых(от пользователя,но спам-бот их видит) полей и проверкой на заполнение этих полей.Если они заполнены,то это бот,так как только он может их видеть.
Например создать
$name2 = $_POST['name2'];
и
$email = $_POST['email'];
и проверка php:

и надо добавить эти поля в HTML документ,но прописать им свойство display:none в css файле.

Огромное спасибо. Надеюсь боты перестанут тревожить:)

Для ребят, которые вообще не разбираются:

1) Два скрытых поля, которые добавляет pmozil (забыл поставить двойку к email):

2) Надо добавить в css код (@pmozil описал как):

3) Надо изменить цвет текста рядом с галочкой (сейчас текст написан белым цветом)
Заменить в html коде:

Чекбокс — это компонент ввода на сайте, который обычно выглядит как пустой квадрат в невыбранном состоянии, а если его выбирают, то он меняет вид — в квадрате появляется галочка.

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

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

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

В этой статье мы разберем, как создать чекбоксы и как настроить стиль, разметку и цвета с помощью HTML и CSS.

Атрибуты чекбокса

Синтаксис чекбокса в HTML выглядит очень просто:

Он обычно содержит несколько атрибутов:

name — устанавливает имя чекбокса;
value — показывает, какое значение чекбокса будет отправлено на сервер;
checked — позволяет предварительно выделить вариант ответа.

Например, при регистрации на сайте вы спрашиваете, откуда пользователь узнал о вашей компании. В этом случае атрибут name каждого входного элемента может быть source . А value одного из чекбоксов будет, например, Instagram. В этом случае данные, отправленные на сервер, будут выглядеть следующим образом: source = instagram .

Как создать стильный чекбокс

По умолчанию

Если мы пользуемся только HTML и не настраиваем стили при помощи CSS, то стиль чекбокса по умолчанию выглядит вот так:

Стиль по умолчанию

HTML-код такого чекбокса выглядит довольно просто:

По сути, кроме указания вам не нужно ничего делать.

Чекбокс с галочкой

Но если вы хотите, чтобы этот вариант ответа был уже выбран при открытии сайта, то необходимо будет добавить атрибут checked . Нужно прописать это в HTML:

Тогда мы получим чекбокс с галочкой:

Чекбокс с галочкой

Обязательный чекбокс

Чтобы установить такой чекбокс, в строку ввода нужно добавить дополнительный атрибут:

Кастомный чекбокс

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

В чем суть трюка? Мы спрячем окошко для галочки и создадим вместо него поддельный чекбокс, который и будем настраивать с помощью CSS.

Скрываем чекбокс: способ первый

Чтобы скрыть чекбокс, нужно прописать одну строчку кода в разделе head . Когда вы работаете со стилями CSS, напишите:

И квадрат с галочкой исчезнет:

Квадрата с галочкой нет

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

Скрываем чекбокс: способ второй

Также можно воспользоваться вторым вариантом, чтобы спрятать чекбокс. Для этого нужно установить стиль элемента ввода, а затем спрятать его, установив opacity: 0 . Так текст не будет съезжать к левому краю и накладываться на наш чекбокс:

Вот что получится:

Текст больше не съезжает

Настройка стиля: закруглим края и добавим цвет

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

Если вы хотите, чтобы чекбокс выделялся на фоне черного текста, то настройте собственную цветовую палитру. Можно менять как цвет обводки, так и фона внутри. Для этого впишите код желаемого цвета, например:

И установите стиль границ:

Так у нас получился серо-синий цвет чекбокса:

Добавляем фон

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

Чтобы сделать такой простой стиль, необходимо написать несколько строк кода:

Мы разобрали основные способы кастомизации чекбоксов, но это далеко не все, что можно сделать с HTML и CSS. Например, можно настроить разные виды чекбокса для состояний hover , active , focus и disabled .

Кроме того, можно даже создавать сложные чекбоксы с анимацией. Если вы хотите посмотреть, как выглядят анимированные чекбоксы, то загляните в статью Custom HTML and CSS Checkbox Examples You Can Use Too.

Admin 25.06.2018 HTML, PHP, WordPress

Выводим на сайте HTML форму checkbox и записываем в неё с помощью PHP значения истина или ложь. Проверяем пуст ли этот чекбокс и ставим галочку включенной или отключённой. Записывать данные будем в произвольное поле WordPress.

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

Пример формы на сайте, которую мы можем создать:

Для того чтобы записывать пустые значения в checkbox нужно выводить перед основной формой input почти точно такой же input, но скрытый и пустым значением value:

Если этого не сделать, то пустые значения (когда вы сняли галочку) обновляться не будут. Более того, в примере ниже, после очередного обновления страницы будет затираться значение истина.

Обычно в подобных примерах показывают, что form action="" содержит ссылку на файл, который будет обрабатывать нашу форму. Часто же это не пригождается. Вместо ссылки на файл оставляем пустое значение, а код для работы этой формы пишем следом за формой HTML.

Код для вывода формы HTML:

Следующий за ним код будет обрабатывать нашу форму:

ID; // Нужна для работы переменной post_id

// Обновление страницы
if(isset($_POST['submit'])) echo " ";
>

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

Разбор кода подробнее

В форме HTML можно увидеть следующее:

Это проверка на значение произвольного поля в WordPress. У меня для этого сделана отдельная функция. Этот участок кода вам нужно заменить самостоятельно, я оставил его для себя, чтобы сохранить оригинал кода. Без этой функции этот участок должен выглядеть так (меняете на него):

Этим мы проверяем есть ли данные в произвольном поле first_checkbox. Если они там имеются мы ставим в HTML форму значение checked. Тем самым даём понять браузеру, чтобы он показал там галочку. Если данные пустые, то галочка стоять не будет.

Как проверить значения Checkbox

Здесь мы проверяем Checkbox на Checked. Если галочка выставлена, то в нужное значение произвольного поля (в примере это first_checkbox) ставим цифру 1.

Как удалить значение в checkbox

Наоборот, если галочки нет, то удаляем произвольное поле first_checkbox.

Очень важно в структуре else указать else if и конкретно значение произвольного поля, то что оно пустое.

Если этого не сделать, а сделать просто else без уточнения, то при обновлении страницы значение произвольного поля будут удаляться само по себе. Обработчик формы будет полагать, что вы поставили пустое значение в неё и обновили страницу. Когда на самом деле вы ничего такого не делали.

Как обновить страницу form action

В конце участка видим такой PHP:

С помощью isset($_POST[‘submit’]) мы проверяем была ли нажата кнопка submit. Если да, то обновляем страницу.

Таким образом страница будет обновлена 2 раза. Первый раз когда мы отправим данные. Они запишутся в произвольные поля. Сразу после этого страница почти мгновенно обновится ещё раз и мы увидем, что на нужном свойстве установлена галочка checked.

English Query (запросы по теме на английском языке)

How to read if a checkbox is checked in PHP

Check if checkbox is checked based on value using PHP

How to refresh a php page on form submit

Checking to see if a checkbox is checked

How to automatically refresh the page after submitting a form

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

Читайте также: