Как да направите полето за отметка задължително. Боравене с квадратчета за отметка в PHP
Това ръководство ще ви запознае с HTML полета за отметка и ще ви науча как да боравите с тях в PHP.
Форма с едно поле за отметка
Нека създадем проста форма с едно квадратче за отметка.
В PHP скрипт (файл checkbox-form.php) е възможно да се прочете стойността на полето с помощта на масива $_POST. Ако $_POST["formWheelchair"] е зададено на YES, тогава квадратчето за отметка в е избрано. Ако квадратчето за отметка не е избрано, тогава променливата $_POST["formWheelchair"] не е зададена.
Ето пример за обработка на формуляр в PHP:
Променливата $_POST["formWheelchair"] е зададена на YES, защото атрибутът стойност на входния таг е зададен на "YES".
Моля, обърнете внимание, че всички квадратчета за отметка имат едно и също име (formDoor). Едно име показва, че всички квадратчета за отметка са свързани помежду си. Квадратните скоби показват, че всички стойности ще бъдат достъпни от един масив. Тоест, $_POST["formDoor"] няма да върне низ, както в примера по-горе, а вместо това ще върне масив, съдържащ стойностите на квадратчетата за отметка, избрани от потребителя.
Например, ако отметна всички квадратчета, $_POST["formDoor"] ще върне масив от (A,B,C,D,E). В примера по-долу получаваме и показваме всички стойности в масив.
Празната функция е полезна в случай, че потребителят не е избрал нищо. Ако масивът не е празен, преброяваме броя на избраните отметки с помощта на функцията за броене и показваме всички стойности с за цикъл.
Ако е поставена отметка в квадратчето „Acorn Building“, масивът ще съдържа стойността „A“.
Проверка дали е поставена отметка в конкретно квадратче
Често трябва да проверите дали е избрано конкретно квадратче за отметка. За да направите това, можете да използвате следната функция:
Функция IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] като $chkval) ( if($chkval == $value) ( върни вярно; ) ) ) върни невярно; )
Сега просто трябва да извикате функцията IsChecked(chkboxname,value). Например:
If(IsChecked("formDoor","A")) ( //направи ... )
Благодарение на CSS3 можем да постигнем почти всеки ефект, от който се нуждаем на екрана. В този урок ще разгледаме как можем да стилизираме квадратчета за отметка и радио бутони.
Input:checked + label:before (съдържание: "\2022"; цвят: #f3f3f3; размер на шрифта: 30px; подравняване на текст: център; височина на линия: 18px; )
Сега, когато натиснем бутона за избор, трябва да се появи малък бял кръг в основния сив кръг.
Квадратчета за стилизиране
Сега нека започнем да проектираме квадратчетата за отметка. Първо, нека отново скрием елемента:
Вход ( дисплей: няма; )
Тъй като премахваме стандартното показване на квадратчето за отметка с помощта на псевдоелемента :before, просто ще добавим рамка:
Етикет на полето за отметка:преди ( радиус на границата: 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 ; височина на реда: 15px; )
В резултат на това трябва да получим:
Резултати
В този урок разгледахме метод, който можете да използвате за показване на радио бутоните и квадратчетата за отметка, от които се нуждаете. Тъй като използвахме CSS3, тази техника ще работи само в браузъри, които поддържат тази технология. За да постигнете подобни резултати в по-стари браузъри, можете да използвате подходящия
В тази статия ще говорим за полето за отметка на типа въвеждане HTML и как те се обработват в PHP.
Единична отметка
Нека създадем прост формуляр с едно квадратче за отметка:
В PHP скрипт ( checkbox-form.php) можем да получим избраната опция от масива $_POST. Ако $_POST['formWheelchair'] е " да“, тогава квадратчето за отметка за опцията е избрано. Ако квадратчето за отметка не е поставено, $_POST['formWheelchair'] няма да бъде зададено.
Ето пример за обработка на формуляр в PHP:
$_POST['formSubmit'] беше зададено на " да”, тъй като тази стойност е посочена в атрибута стойност на квадратчето за отметка:
Вместо " да"можете да зададете стойността" 1 " или " На". Уверете се, че валидиращият код във вашия PHP скрипт също е актуализиран.
Che-box група
Понякога трябва да покажете група от квадратчета за отметка на свързани типове въвеждане на PHP във формуляр. Предимството на група квадратчета за отметка е, че потребителят може да избере множество опции. За разлика от бутона за избор, където може да бъде избрана само една опция от група.
Нека вземем горния пример и въз основа на него ще предоставим на потребителя списък със сгради:
Обърнете внимание, че квадратчетата за отметка на типа въвеждане имат едно и също име (formDoor). И че всяко име завършва на . Използвайки едно име, ние показваме, че квадратчетата за отметка са свързани. С това показваме, че избраните стойности ще бъдат достъпни за PHP скрипта като масив. Тоест, $_POST['formDoor'] не връща нито един ред, както в примера по-горе; вместо това се връща масив, състоящ се от всички стойности на квадратчетата за отметка, които са били избрани.
Например, ако избрах всички опции, $_POST['formDoor'] ще бъде масив, състоящ се от: (A, B, C, D, E). По-долу е даден пример как да изведете стойността на масив:
Ако нито една от опциите не е избрана, $_POST['formDoor'] няма да бъде зададено, така че използвайте функцията "empty", за да тествате за този случай. Ако е дадена стойност, тогава преминаваме през масива с помощта на функцията count(), която връща размера на масива и отпечатва избраните сгради.
Ако има отметка в квадратчето за опцията " Сграда Acorn", тогава масивът ще съдържа стойността "A". По същия начин, ако „ Комплекс Карнеги", масивът ще съдържа C.
Проверка дали е избрана определена опция
Често искате да проверите дали някоя конкретна опция е избрана от всички налични елементи в група HTML въвежданетип поле за отметка. Ето функция, която извършва тази проверка:
функция IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] като $chkval) ( if($chkval == $value) ( върни вярно; ) ) ) върни невярно; )
За да го използвате, просто извикайте IsChecked ( име_на_отметка, стойност). Например:
if(IsChecked("formDoor","A")) ( //направете нещо... ) //или използвайте в изчислението... $price += IsChecked("formDoor","A")? 100; $price += IsChecked("formDoor","B")? 20:0;
Изтеглете примерен код
Изтеглете PHP код за примерен формуляр с квадратче за отметка тип въвеждане на PHP.
Тази публикация е превод на статията “ Отметка за обработка в a PHP формапроцесор“, подготвен от приятелския екип на проекта
Поставете отметка HTML форма, или "чекбокс" е посочено от маркера вход, чийто тип е посочен отметка.
Отметката показва съгласие или несъгласие. Ако квадратчето е отметнато, браузърът изпраща променлива с името на полето до сървъра. Ако липсва, тогава, съответно, браузърът не изпраща нищо. Следователно атрибутът стойностне може да се счита за задължително.
Ако има нужда квадратчето да присъства по подразбиране, тогава трябва да добавите атрибута към тага проверено. Ще изглежда така:
Ето как изглежда полето за отметка в браузъра:
Наличието на квадратче за отметка не означава, че някой елемент от присъстващите трябва да бъде избран. В тази връзка, ако има няколко квадратчета за отметка в една форма, те трябва да имат различни имена.
Кодът за формуляра, даден в началото на статията, ще бъде както следва:
Що се отнася до името, в професионална среда полето се нарича „чекбокс“.
За да се проектират квадратчета за отметка и радио бутони, както се изисква от дизайна, днес не е необходимо да се използват решения на JavaScript (като моя плъгин), т.к. За да направите това, можете да използвате само CSS и с обратна съвместимост за по-стари браузъри (т.е. без да жертвате използваемостта), които не поддържат съвременни CSS правила.
С други думи – в модерни браузъриквадратчетата за отметка и радио бутоните ще изглеждат красиви в съответствие с предвидения дизайн и в старите (това се отнася за интернет Версии на Explorer 8 и по-долу) ще останат с дизайна по подразбиране, характерен за всяка конкретна операционна система.
Освен това, Валидирането на HTML5 остава възможностилизирани елементи (което може да не е така при използване на плъгини за JavaScript). В съвременните браузъри поддръжката му отдавна е норма.
Важни функции
За да се получи всичко, е важно да имате предвид следното:
- С изключение всъщност на самия етикет на елемента, който искаме да украсим красиво ( или ), ще ви е необходим етикет
- Етикет трябва да е преди етикета
"Номерът" е да използвате псевдо-селекторите:checked и:not. В този случай самото поле за отметка или радио бутон става невидимо и емулацията им се извършва с помощта на псевдоелементи: преди и: след за етикета
Стил за съвременните браузъри
Нека разгледаме и двете опции за местоположението на елемента на формуляра, който ще бъде стилизиран. Кое е най-удобното, решавате вие. Същността не се променя от това.
Етикетите на полето за отметка и радио бутоните се намират преди етикета
В HTML кодизглежда така:
Още веднъж искам да обърна внимание на етикета Задължителнотрябва да се намират предиетикет
CSS код за квадратчето за отметкаще бъде така:
Квадратче за отметка ( позиция: абсолютна; z-индекс: -1; непрозрачност: 0; марж: 10px 0 0 20px; ) .чекбокс + етикет ( позиция: относителна; подложка: 0 0 0 60px; курсор: показалец; ) .чекбокс + етикет :before ( съдържание: ""; позиция: абсолютна; горе: -4px; ляво: 0; ширина: 50px; височина: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); преход: .2s; ) .checkbox + label:after ( съдържание: ""; позиция: абсолютна; горе: -2px; ляво: 2px; ширина: 22px; височина: 22px; граница -радиус: 10px; фон: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); преход: .2s; ) .checkbox:checked + label:before (фон: #9FD468; ) .checkbox:checked + label:after ( ляво: 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 код за радио бутонще бъде така:
Радио (позиция: абсолютна; z-индекс: -1; непрозрачност: 0; поле: 10px 0 0 7px; ) .radio + етикет (позиция: относителна; подложка: 0 0 0 35px; курсор: показалец; ) .radio + етикет :before (съдържание: ""; позиция: абсолютна; горе: -3px; ляво: 0; ширина: 22px; височина: 22px; граница: 1px плътен #CDD1DA; радиус на границата: 50%; фон: #FFF; ) . радио + етикет:след (съдържание: ""; позиция: абсолютна; горе: 1px; ляво: 4px; ширина: 16px; височина: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); непрозрачност: 0; преход: .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, ние визуално скриваме оригиналните елементи, докато те остават на същото място, където ще бъдат стилизираните елементи. И използвайки марж, ние ги изместваме малко, така че съобщението за валидиране на HTML5 да изглежда хармонично. В зависимост от дизайна на квадратчето за отметка и бутона за избор, този отстъп може да се коригира.
Етикетите на полето за отметка и радио бутоните са вътре в етикета
HTML кодв този случай ще бъде както следва:
По аналогия с предишния вариант - етикет Задължителнотрябва да се намират предитагове с клас .checkbox__text и .radio__text .
CSS код за квадратчето за отметкаще бъде така:
Въвеждане на квадратче за отметка ( позиция: абсолютна; z-индекс: -1; непрозрачност: 0; марж: 10px 0 0 20px; ) .checkbox__text ( позиция: относителна; подложка: 0 0 0 60px; курсор: показалец; ) .checkbox__text:before ( съдържание: ""; позиция: абсолютна; горе: -4px; ляво: 0; ширина: 50px; височина: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0 ,0,.2); преход: .2s; ) .checkbox__text:after ( съдържание: ""; позиция: абсолютна; горе: -2px; ляво: 2px; ширина: 22px; височина: 22px; border-radius: 10px; фон: #FFF; кутия-сянка: 0 2px 5px rgba(0,0,0,.3); преход: .2s; ) .checkbox input:checked + .checkbox__text:before ( фон: #9FD468; ) .checkbox input :checked + .checkbox__text:after ( ляво: 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 код за радио бутонще бъде така:
Радио вход (позиция: абсолютна; z-индекс: -1; непрозрачност: 0; поле: 10px 0 0 7px; ) .radio__text (позиция: относителна; подложка: 0 0 0 35px; курсор: показалец; ) .radio__text:before ( съдържание: ""; позиция: абсолютна; горе: -3px; ляво: 0; ширина: 22px; височина: 22px; граница: 1px плътен #CDD1DA; border-radius: 50%; фон: #FFF; ) .radio__text:after (съдържание: ""; позиция: абсолютна; горе: 1px; ляво: 4px; ширина: 16px; височина: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0,0,.5); непрозрачност: 0; преход: .2s; ) .radio input: отметнато + .radio__text:after (opacity: 1; ) .radio input: фокус + .radio__text:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7); )
Стиловете тук са същите като в предишния метод, само че се прилагат към други селектори.
Стил за по-стари браузъри
CSS код за квадратчето за отметка. В коментарите към кода добавих обяснения относно браузърите:
/* Първо, ние определяме стиловете за IE8 и по-стари версии, т.е. Тук подобряваме малко стандартното квадратче за отметка. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* Това е за всички браузъри, с изключение на много старите, които не поддържат плюс селектори. Показваме, че върху етикета може да се кликне. */ .checkbox + label ( cursor: pointer; ) /* Следва дизайнът на квадратчето за отметка в съвременните браузъри, както и IE9 и по-нови. Поради факта, че по-старите браузъри не поддържат селекторите :not и :checked, всички от следните стилове няма да работят в тях. В този случай проверено е посочено без двоеточие отпред, по някаква причина работи по този начин. */ .checkbox:not(отметнато) ( позиция: абсолютна; z-индекс: -1; непрозрачност: 0; поле: 10px 0 0 20px; ) .checkbox:not(отметнато) + етикет ( позиция: относителна; подложка: 0 0 0 60px; ) .checkbox:not(отметнато) + label:before ( съдържание: ""; позиция: абсолютна; горе: -4px; ляво: 0; ширина: 50px; височина: 26px; border-radius: 13px; фон : #CDD1DA; кутия-сянка: вмъкване 0 2px 3px rgba(0,0,0,.2); преход: .2s; ) .checkbox:not(отметнато) + label:after ( съдържание: ""; позиция: абсолютна ; отгоре: -2px; отляво: 2px; ширина: 22px; височина: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); преход: .2s; ) .checkbox:checked + label:before ( фон: #9FD468; ) .checkbox:checked + label:after ( ляво: 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 код за радио бутон:
Радио (vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label (cursor: pointer; ) .radio:not(checked) ( position: absolute; z-index: -1; непрозрачност: 0; поле: 10px 0 0 7px; ) .radio:not(отметнато) + етикет ( позиция: относителна; подложка: 0 0 0 35px; ) .radio:not(отметнато) + label:before ( съдържание : ""; позиция: абсолютна; горе: -3px; ляво: 0; ширина: 22px; височина: 22px; граница: 1px плътна #CDD1DA; border-radius: 50%; фон: #FFF; ) .radio:not( отметнато) + label:after ( съдържание: ""; позиция: абсолютна; горе: 1px; ляво: 4px; ширина: 16px; височина: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); непрозрачност: 0; преход: .2s; ) .radio:checked + label:after (opacity: 1; ) .radio:focus + label:before (box-shadow : 0 0 0 3px rgba(255,255,0,.7); )
Примери
Ето как се прави по толкова прост начин. Благодарение на този метод, дизайн на квадратчета за отметка и радио бутони с използвайки CSSможете да го направите както искате.