Cum se face obligatoriu un câmp de casetă de selectare. Gestionarea casetelor de selectare în PHP
Acest ghid vă va prezenta casetele de selectare HTML și vă învață cum să le gestionați în PHP.
Formular de casetă de selectare unică
Să creăm un formular simplu cu o singură casetă de selectare.
Într-un script PHP (fișier checkbox-form.php) este posibil să citiți valoarea câmpului folosind matricea $_POST. Dacă $_POST["formWheelchair"] este setat la YES, atunci caseta de selectare a fost selectată. Dacă caseta de selectare nu este bifată, atunci variabila $_POST["formWheelchair"] nu este setată.
Iată un exemplu de procesare a formularelor în PHP:
Variabila $_POST["formWheelchair"] este setată la YES deoarece atributul de valoare al etichetei de intrare este setat la "YES" .
Vă rugăm să rețineți că toate casetele de selectare au același nume (formDoor). Un nume indică faptul că toate casetele de selectare sunt interconectate. Parantezele pătrate indică faptul că toate valorile vor fi accesate dintr-o singură matrice. Adică, $_POST["formDoor"] nu va returna un șir, ca în exemplul de mai sus, ci va returna în schimb o matrice care conține valorile casetelor de selectare care au fost selectate de utilizator.
De exemplu, dacă bifez toate casetele, $_POST["formDoor"] va returna o matrice de (A,B,C,D,E) . În exemplul de mai jos obținem și afișăm toate valorile matricei.
Funcția goală este utilă în cazul în care utilizatorul nu a selectat nimic. Dacă matricea nu este goală, numărăm numărul de casete de selectare selectate utilizând funcția de numărare și afișăm toate valorile folosind pentru buclă.
Dacă caseta de selectare „Clădire Acorn” este bifată, matricea va conține valoarea „A”.
Verificarea dacă este selectată o anumită casetă de selectare
Adesea trebuie să verificați dacă o anumită casetă de selectare este selectată. Pentru a face acest lucru, puteți utiliza următoarea funcție:
Funcția IsChecked($chkname,$value) ( dacă(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] ca $chkval) ( if($chkval == $valoare) ( return true; ) ) return false;
Acum trebuie doar să apelați funcția IsChecked(chkboxname,value). De exemplu:
If(IsChecked("formDoor","A")) ( //do ... )
Datorită CSS3, putem obține aproape orice efect de care avem nevoie pe ecran. În această lecție ne vom uita la modul în care putem stila casetele de selectare și butoanele radio.
Intrare: bifat + etichetă: înainte ( conținut: „\2022”; culoare: #f3f3f3; dimensiunea fontului: 30px; alinierea textului: centru; înălțimea liniei: 18px; )
Acum, când apăsăm butonul radio, ar trebui să apară un mic cerc alb în cercul gri principal.
Casete de selectare pentru stil
Acum să începem să proiectăm casetele de selectare. Mai întâi, să ascundem elementul din nou:
Intrare (afișare: niciuna; )
Deoarece eliminăm afișarea casetei de selectare standard folosind pseudo-elementul :before, vom adăuga pur și simplu un chenar:
Etichetă casetă de selectare: înainte ( chenar-rază: 3px; )
Apoi vom adăuga un simbol „verificare”, care va apărea când faceți clic pe caseta de selectare. Să facem asta prin analogie cu un cerc radio. De data aceasta va trebui să ne convertim Simbol HTML? ✓.
Intrare: bifat + etichetă: înainte ( conținut: „\2713”; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; culoare: #f3f3f3; text-align: center ;linie-inaltime: 15px;
Ca urmare, iată ce ar trebui să obținem:
Rezultate
În această lecție, am analizat o metodă pe care o puteți utiliza pentru a afișa butoanele radio și casetele de selectare de care aveți nevoie. Deoarece am folosit CSS3, această tehnică va funcționa numai în browsere care acceptă această tehnologie. Pentru a obține rezultate similare în browserele mai vechi, puteți utiliza cea corespunzătoare
În acest articol vom vorbi despre caseta de selectare a tipului de intrare HTML și despre modul în care acestea sunt gestionate în PHP.
O singură casetă de selectare
Să creăm formă simplă cu o singură casetă de selectare:
Într-un script PHP ( checkbox-form.php) putem obține opțiunea selectată din matricea $_POST. Dacă $_POST['formWheelchair'] este " Da", apoi caseta de selectare pentru opțiune este bifată. Dacă caseta de selectare nu a fost bifată, $_POST['formWheelchair'] nu va fi setat.
Iată un exemplu de procesare a formularelor în PHP:
$_POST['formSubmit'] a fost setat la " Da”, deoarece această valoare este specificată în atributul de valoare al casetei de selectare:
În loc de " Da„puteți seta valoarea” 1 " sau " pe". Asigurați-vă că și codul de validare din scriptul dvs. PHP este actualizat.
Grupul Che-box
Uneori trebuie să afișați un grup de casete de selectare a tipului de intrare PHP într-un formular. Avantajul unui grup de casete de selectare este că utilizatorul poate selecta mai multe opțiuni. Spre deosebire de un buton radio, unde dintr-un grup poate fi selectată o singură opțiune.
Să luăm exemplul de mai sus și pe baza acestuia vom oferi utilizatorului o listă de clădiri:
Rețineți că casetele de selectare pentru tipul de intrare au același nume (formDoor ). Și că fiecare nume se termină în . Folosind un singur nume, indicăm că casetele de selectare sunt legate. Cu aceasta indicăm că valorile selectate vor fi disponibile pentru scriptul PHP ca o matrice. Adică, $_POST['formDoor'] nu returnează un singur rând, ca în exemplul de mai sus; în schimb, se returnează o matrice constând din toate valorile casetei de selectare care au fost selectate.
De exemplu, dacă am selectat toate opțiunile, $_POST['formDoor'] va fi o matrice formată din: (A, B, C, D, E). Mai jos este un exemplu despre cum să scoateți valoarea unui tablou:
Dacă nicio opțiune nu este selectată, $_POST['formDoor'] nu va fi setat, așa că utilizați funcția „gol” pentru a testa acest caz. Dacă este dată o valoare, atunci trecem prin matrice folosind funcția count(), care returnează dimensiunea matricei și imprimă clădirile care au fost selectate.
Dacă caseta de selectare este bifată pentru opțiunea " Clădirea Acorn„, atunci matricea va conține valoarea „A”. La fel, dacă „ Complexul Carnegie", matricea va conține C.
Verificarea dacă este selectată o anumită opțiune
Adesea, doriți să verificați dacă este selectată o anumită opțiune din toate elementele disponibile dintr-un grup Intrare HTML caseta de selectare tip . Iată o funcție care efectuează această verificare:
funcția IsChecked($chkname,$value) ( dacă(!empty($_POST[$chkname])) (foreach($_POST[$chkname] ca $chkval) ( if($chkval == $valoare) ( return true; ) ) return false;
Pentru a-l folosi, trebuie doar să sunați la IsChecked ( checkbox_name, valoare). De exemplu:
if(IsChecked("formDoor","A")) ( //faceți ceva... ) //sau folosiți în calcul... $preț += IsChecked("formDoor","A")? 10:0; $preț += IsChecked("formDoor","B") ? 20:0;
Descărcați exemplu de cod
Descărcați codul PHP pentru un exemplu de formular cu caseta de selectare tip de intrare PHP.
Această publicație este o traducere a articolului „ Caseta de selectare Gestionare în a formular PHP procesor„, pregătit de echipa prietenoasă de proiect
Bifați formular HTML, sau „checkbox” este specificată de etichetă intrare, al cărui tip este specificat caseta de selectare.
O bifă indică fie acord, fie dezacord. Dacă caseta de selectare este bifată, browserul trimite o variabilă cu numele câmpului către server. Dacă lipsește, atunci, în consecință, browserul nu trimite nimic. Prin urmare, atributul valoare nu poate fi considerată obligatorie.
Dacă este nevoie ca caseta de selectare să fie prezentă în mod implicit, atunci trebuie să adăugați atributul etichetei verificat. Va arăta astfel:
Iată cum arată caseta de selectare în browser:
Prezența unei casete de selectare nu înseamnă că ar trebui selectat niciun element dintre cei prezenți. În acest sens, dacă există mai multe casete de selectare într-un singur formular, atunci ar trebui să li se dea nume diferite.
Codul pentru formularul dat la începutul articolului va fi următorul:
În ceea ce privește numele, într-un mediu profesional domeniul se numește „căsuță de selectare”.
Pentru a proiecta casete de selectare și butoane radio, așa cum este cerut de design, astăzi nu este necesar să utilizați soluții JavaScript (cum ar fi pluginul meu), deoarece Pentru a face acest lucru, puteți utiliza numai CSS și cu compatibilitate cu versiunea precedentă pentru browsere mai vechi (adică, fără a sacrifica gradul de utilizare) care nu acceptă regulile CSS moderne.
Cu alte cuvinte – în browsere moderne casetele de selectare și butoanele radio vor arăta frumos, în conformitate cu designul dorit și în cele vechi (acest lucru se aplică pentru Internet versiuni Explorer 8 și mai jos) vor rămâne cu designul „implicit”, caracteristic fiecărui sistem de operare specific.
In plus, Validarea HTML5 este încă posibilă elemente cu stil (ceea ce poate să nu fie cazul când utilizați pluginuri JavaScript). În browserele moderne, suportul său a fost mult timp norma.
Caracteristici importante
Pentru ca totul să funcționeze, este important să luați în considerare următoarele:
- Cu excepția, de fapt, eticheta elementului în sine, pe care vrem să o decoram frumos ( sau ), veți avea nevoie de o etichetă
- Etichetă trebuie să fie înaintea etichetei
Trucul este să folosiți pseudo-selectorii :checked și :not. În acest caz, caseta de selectare sau butonul radio în sine devine invizibil, iar emularea lor se realizează folosind pseudo-elemente:before și:after pentru etichetă
Styling pentru browsere moderne
Să luăm în considerare ambele opțiuni pentru locația elementului de formular care urmează să fie stilat. Care este cel mai convenabil rămâne la latitudinea dvs. să decideți. Esența nu se schimbă de aici.
Etichetele casetei de selectare și butoanele radio sunt situate înaintea etichetei
În cod HTML arata cam asa:
Încă o dată vreau să vă atrag atenția asupra etichetei Neapărat trebuie localizat înainte etichetă
Cod CSS pentru caseta de selectare va fi asa:
Casetă de selectare (poziție: absolut; index z: -1; opacitate: 0; margine: 10px 0 0 20px; ) .căsuță de selectare + etichetă (poziția: relativă; umplutură: 0 0 0 60px; cursor: pointer; ) .casetă de selectare + etichetă :before (conținut: ""; poziție: absolut; sus: -4px; stânga: 0; lățime: 50px; înălțime: 26px; chenar-rază: 13px; fundal: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); tranziție: .2s; -radius: 10px; fundal: #FFF: 0 2px rgba(0,0,0,.3) casetă de selectare:bifată + etichetă:după ( stânga: 26 px; ) . casetă de selectare: focalizare + etichetă: înainte ( umbră casetă: inserție 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255.255 , 0,.7);
Cod CSS pentru butonul radio va fi asa:
Radio ( poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px; ) .radio + etichetă ( poziție: relativă; padding: 0 0 0 35px; cursor: pointer; ) .radio + etichetă :înainte (conținut: „”; poziție: absolut; sus: -3px; stânga: 0; lățime: 22px; înălțime: 22px; chenar: 1px solid #CDD1DA; chenar-rază: 50%; fundal: #FFF; ) . radio + etichetă:după ( conținut: ""; poziție: absolut; sus: 1px; stânga: 4px; lățime: 16px; înălțime: 16px; chenar-rază: 50%; fundal: #9FD468; umbră casetă: inserție 0 1px 1px rgba(0,0,0,.5); opacitate: 0,2s. 0 0 0 3px rgba(255,255,0,.7);
Folosind proprietățile de poziție, z-index și opacitate pentru clasele .checkbox și .radio, ascundem vizual elementele originale, în timp ce acestea rămân în același loc în care vor fi elementele stilizate. Și folosind marginea, le deplasăm puțin, astfel încât mesajul de validare HTML5 să pară armonios. În funcție de designul casetei de selectare și al butonului radio, această indentare poate fi ajustată.
Etichetele casetei de selectare și butoanele radio se află în interiorul etichetei
cod HTMLîn acest caz va fi după cum urmează:
Prin analogie cu opțiunea anterioară - etichetă Neapărat trebuie localizat înainte etichete cu clasa .checkbox__text și .radio__text .
Cod CSS pentru caseta de selectare va fi asa:
Introducere casetă de selectare (poziție: absolut; index z: -1; opacitate: 0; margine: 10px 0 0 20px; ) .checkbox__text (poziție: relativ; umplutură: 0 0 0 60px; cursor: pointer; ) .checkbox__text:before ( conținut: ""; poziție: înălțime: 26px; absolute: -2px latime: 22px; : .2s; .checkbox input:bifat + .checkbox__text:înainte ( fundal: #9FD468; ) .checkbox input :bifat + .checkbox__text:după (stânga: 26px; ) .checkbox input:focus + .checkbox__text:before ( umbră: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255,255,0,.7);
Cod CSS pentru butonul radio va fi asa:
Intrare radio (poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px; ) .radio__text (poziție: relativ; padding: 0 0 0 35px; cursor: pointer; ) .radio__text:before ( conținut: ""; poziție: absolută: 0: 22px; înălțime: 16px; border-radius: 50%: #9FD468 box-shadow: inset 0 1px rgba(0, 0,0,.5) .radio input: checked + .radius; :după ( opacitate: 1; ) .radio input:focus + .radio__text:before (box-shadow: 0 0 0 3px rgba(255,255,0,.7 )
Stilurile de aici sunt aceleași ca în metoda anterioară, doar că sunt aplicate altor selectoare.
Stil pentru browsere mai vechi
Cod CSS pentru caseta de selectare. În comentariile la cod am adăugat explicații referitoare la browsere:
/* În primul rând, desemnăm stilurile pentru IE8 și versiunile mai vechi, de exemplu. Aici îmbunătățim puțin caseta de selectare standard. */ .checkbox ( vertical-align: top; lățime: 17px; înălțime: 17px; margin: 0 3px 0 0; ) /* Aceasta este pentru toate browserele, cu excepția celor foarte vechi care nu acceptă selectoare plus. Arătăm că eticheta se poate face clic. */ .checkbox + etichetă ( cursor: pointer; ) /* Urmează designul casetei de selectare în browserele moderne, precum și IE9 și versiuni ulterioare. Datorită faptului că browserele mai vechi nu acceptă selectoarele :not și :checked, toate stilurile următoare nu vor funcționa în ele. În acest caz, bifat este specificat fără două puncte în față, din anumite motive funcționează așa. */ .checkbox:not(bifat) (poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 20px; ) .checkbox:not(bifat) + etichetă (poziția: relativă; padding: 0 0 0 60px; .checkbox:not(bifat) + etichetă:înainte (conținut: ""; poziție: absolut; sus: -4px; stânga: 0; lățime: 50px; înălțime: 26px; chenar-rază: 13px; fundal : #CDD1DA-box-shadow: inset 0 2px 3px rgba(0,0,0,.2s) .checkbox:not(bifat) + label:after (conținut: ""; poziție: absolută); top: -2px; lățime: 22px; stânga: 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 )
Cod CSS pentru butonul radio:
Radio ( aliniere verticală: sus; lățime: 17 px; înălțime: 17 px; margine: 0 3px 0 0; ) .radio + etichetă ( cursor: indicator; ) .radio:not(bifat) ( poziție: absolut; z-index: -1; opacitate: 0; margine: 10px 0 0 7px ). : ""; poziție: absolută: 0: 22px; rază: 50%; ; înălțime: 16px; bifat + label:after ( opacitate: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7);
Exemple
Așa se face într-un mod atât de simplu. Datorită această metodă, proiectați casete de selectare și butoane radio cu folosind CSS o poți face cum vrei.