Обрабатываем флажки (checkbox) формы при помощи PHP

 Редактирую руководство пользователя компьютерной программы. В нем встречается очень много заимствованных из английского (и еще не до конца ассимилированных в русском) терминов.  То, что можно заменить русскими эквивалентами — заменяю. Но слово чекбокс (чек-бокс?  вызывает некоторые затруднения. Как правильно следует его писать: слитно или через дефис? В англоязычных источниках встречается как слитное (checkbox), так и раздельное (check-box) написание.  По-русски все пишут по-разному: кто-то слитно, кто-то через дефис…  Обращаюсь к участникам сообщества с вопросом: какой вариант предпочтительнее? Просьба давать аргументированный ответ.  (812) 318-56-06info@standart-print.com +7 (911) 753 67 14Пн-Пт: 10-18Типография «Art-PR»РЕШАЕМ ЛЮБЫЕтипография Стандарт Принт ПОЛИГРАФИЧЕСКИЕ ЗАДАЧИ!

Чекбоксы — коробки для товарных чеков, которые располагаются на кассе в торговых точках, и служат не только мини-помойкой для чеков, но еще и могу играть роль рекламоносителя.Чекбоксы делают из плотного картона плотностью 300г/м2, покрывая ламинацией с целью долговременного использования. Стандартный размер чекбокса — 150*150мм, но если есть потребность изменить размер, то мы можем разработать для вас индивидуальный вырубной штамп чекбокса, с учётом ваших пожеланий. И откроем маленький секрет — чем меньше чекбокс — тем больше времени тратит человек, чтобы запихнуть туда ненужный чек, а значит больше времени заостряет на рекламном изображении. image

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

  Типография «Art-PR»

— Рекламные воблеры; — Изготовление шелфтокеров; — Печать некхенгеров. Свяжитесь с нашими менеджерами — По телефону:

(812) 318-56-06,

— Электронной почте: info@standart-print.com,

— Через форму обратной связи на странице контактов.

/ Танцы с CSS / Меняем оформление input checkbox с помощью CSS

image

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

  1. Скрываем вывод чек-бокса;
  2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
  3. Дополнительные стили формируют внешний вид текущего статуса.

Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.

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

Как видите для вывода галочки я использовал просто символ «x» из шрифта Arial. Далее вы можете сами решать как выглядит контейнер и галочка.

Я к примеру использую шрифт awesome, в котором есть литера галочки.

Вот тот же CSS с использованием FontAwesome:

Так выглядит checkbox с галочкой из набора иконок Awesome.

Мало букафф? Читайте есчо !

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его — «игра …

Читать

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой …

Читать

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

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

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

В примере она будет упрощена до одного чекбокса и кнопки отправить. Другие данные на скрине приведены лишь в качестве примера и в данной статье не нужны.

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

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

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

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

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

$post_id = $GLOBALS[‘post’]->ID; // Нужна для работы переменной post_id // Файл с данными if(isset($_POST[‘first_checkbox’]) &&    $_POST[‘first_checkbox’] == ‘Yes’) {     update_post_meta($post_id, ‘first_checkbox’, 1 ); } else if(isset($_POST[‘first_checkbox’]) &&    $_POST[‘first_checkbox’] == ») {     delete_post_meta($post_id, ‘first_checkbox’); } // Обновление страницы if(isset($_POST[‘submit’])) {     echo «/>»; }

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

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

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

    if (cf(‘first_checkbox’)) {     echo ‘checked’;     }

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

if (get_post_meta($post->ID, ‘first_checkbox’, true))  {     echo ‘checked’; }

Этим мы проверяем есть ли данные в произвольном поле 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.

image

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

Для начала создадим обычный чекбокс (разметка):

<<span>divclass="checkbox"><<span>inputtype="checkbox"id="check"><<span>labelfor="check">Выбери меня<<span>/label> <<span>/div>

Здесь чекбокс и текст для него. Все это обернуто в div. Это сделано специально и нужно! Кстати, кто не знал: for у тега label должен соответствовать нужному id чекбокса, чтобы при клике по тексту выбирался чекбокс.

Теперь перейдем к стилям:

.checkbox{position:relative;padding-left:25px;}.checkbox input[type=checkbox]{display:none;}.checkbox label:after {content:'';display:block;height:14px;width:14px;outline:1pxsolid#939598;position:absolute;top:;left:;}.checkbox input[type=checkbox]:checked + label:after {outline:1pxsolid#939598;border:2pxsolid#fff;width:10px;height:10px;background-color:#63849F;}

Здесь все мега просто:) Использование псевдоэлемента after и состояние чекбокса :checked позволяет добиться желаемого результата. Логика: скрываем настоящий чекбокс. У описания для нужного чекбокса показываем псевдоэлемент и стилизуем его как угодно. При клике по описанию — чекбоксу присваивается свойство (чекнутый) и мы выражением input[type=checkbox]:checked + label:after меняем вид псевдоэлемента на нужный. Profit!

26.03.17

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий