utilizarea checkboxes este o opțiune bună atunci când doriți să oferiți vizitatorilor dvs. opțiunea de a alege mai multe elemente dintr-un grup de opțiuni. În acest sens, caseta de selectare funcționează opus unui buton radio, care vă permite doar să selectați un element dintr-un grup de opțiuni., În cea mai simplă formă, o casetă de selectare este pur și simplu un element de intrare cu tipul de proprietate set pentru selectare, astfel:
<input type="checkbox">cu toate Acestea, ca și cu toate elementele de intrare, aveți nevoie pentru a defini un nume pentru a fi utilizabile, fără un nume, elementul nu va fi identificat atunci când a posta formularul înapoi la un server pentru procesare. De asemenea, doriți să setați o valoare – aceasta va fi valoarea trimisă serverului dacă caseta de selectare a fost bifată., Iată un exemplu:
<input type="checkbox" name="nameOfChoice" value="1">Cu acest exemplu, cazul în care caseta a fost verificat și formularul este transmis la un server, serverul va fi capabil să citească element de formă „nameOfChoice” și valoarea acestuia va fi de 1.
verificat sau nu verificat?
observați cum toate casetele de selectare de până acum nu au fost bifate de la început – utilizatorul ar trebui să interacționeze cu caseta de selectare pentru a-și schimba starea de la necontrolat la verificat., Aceasta ar putea fi ceea ce doriți, dar uneori doriți ca caseta de selectare să fie bifată în mod implicit, fie pentru a sugera o alegere utilizatorului, fie pentru că afișați o casetă de selectare cu o valoare care corespunde unei setări existente, de exemplu dintr-o bază de date., Din fericire, acest lucru este foarte simplu – trebuie doar să adăugați verificat atribut pentru selectare:
<input type="checkbox" name="nameOfChoice" value="1" checked>În zilele vechi de XHTML, unde fiecare atribut ar trebui să aibă întotdeauna o valoare, chiar boolean atribute, acesta ar arata astfel:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />oricum ar trebui să lucreze în toate browserele moderne, dar prima cale este mai scurtă și mai „HTML5-ca”.până în prezent, toate casetele noastre de selectare au fost comutatoare simple, de exemplu pentru a defini dacă o opțiune este activată sau dezactivată., Casetele de selectare sunt excelente pentru asta, dar, după cum am menționat, pot fi utilizate și pentru a permite utilizatorului o selecție de opțiuni posibile. Lasă-mă să-ți arăt un elegant exemplu în acest sens:
Observați cum avem acum mai multe casete de selectare, dar toate au același nume („favorite_pet”), dar de valori diferite (de exemplu, „Câine”). Când acest formular este trimis înapoi la server, toate aceste casete de selectare vor fi reprezentate de un singur nume, dar valoarea va fi o matrice de 0-3 elemente., Dacă ați fi folosit butoane radio în loc de casete de selectare, utilizatorul ar avea voie să aleagă doar un singur animal preferat, dar cu casetele de selectare, nu pot selecta niciuna dintre ele, toate sau unele dintre ele.
etichete pentru casetele de selectare
Dacă ați testat exemplul anterior, veți observa că putem pune text lângă o casetă de selectare, dar acestea sunt încă două lucruri separate – nu puteți face clic pe text pentru a declanșa caseta de selectare. Acest lucru poate fi foarte enervant pentru utilizator, dar, din fericire pentru noi, este ușor de rezolvat: folosiți doar elementul de etichetă!, Iată un exemplu de bază pentru a vă arăta diferența:
două casete de selectare – una fără etichetă și una cu. Ar putea părea aproape identice, dar cea cu eticheta poate fi declanșată făcând clic atât pe caseta de selectare reală, cât și pe eticheta atașată. Acest lucru este frumos dacă stați pe un computer desktop cu un mouse, dar și mai bine atunci când utilizați un dispozitiv tactil precum un smartphone, unde casetele de selectare mici pot fi greu de lovit cu degetul.,
eticheta este foarte simplă – folosește atributul for Pentru a se atașa la un element de formular cu un atribut id de potrivire (observați cum am „câini” în ambele locuri).
lucrând dinamic cu o casetă de selectare
la fel ca orice alt element DOM, puteți manipula o casetă de selectare folosind JavaScript. În această privință, ar putea fi interesant să verificați dacă o casetă de selectare este bifată sau nu și poate să adăugați o logică pentru a controla câte opțiuni poate selecta un utilizator., Pentru a vă arăta cum se poate face acest lucru, am extins un exemplu anterior (selectorul „favorit pentru animale de companie”) pentru a include unele magie JavaScript:
permiteți-mi să trec rapid prin ceea ce face acest cod. Avem același formular ca înainte, dar am adăugat un handler de evenimente la fiecare dintre casetele de selectare, ceea ce le determină să apeleze la o funcție JavaScript (ValidatePetSelection) atunci când utilizatorul face clic pe ele. În această funcție, obținem toate casetele de selectare relevante folosind funcția getElementsByName și apoi le parcurgem pentru a vedea dacă sunt verificate sau nu – pentru fiecare element verificat, adăugăm la un număr., Acest număr este apoi verificat și dacă depășește două, atunci alertăm utilizatorul despre problemă (pot fi selectate doar două animale de companie) și apoi returnăm false. Returnarea falsă va împiedica bifarea casetei.
acesta a fost doar un exemplu simplu de a lucra cu casetele de selectare folosind JavaScript. Puteți face mult mai mult, mai ales dacă utilizați un cadru JavaScript ca jQuery, ceea ce va face mult mai ușor să selectați și să manipulați elementele DOM.,
rezumat
casetele de selectare vă permit să configurați opțiuni selectabile pentru utilizatorii dvs. – fie pentru a activa sau dezactiva o singură setare, fie pentru a permite mai multe opțiuni, ca în exemplul Pet preferat. Ar trebui să utilizați etichete pentru a lega caseta de selectare și textul descriptiv împreună, pentru a permite utilizatorului să facă clic pe o zonă mai mare atunci când manipulează caseta de selectare – acest lucru este de asemenea bun pentru asistarea tehnologiilor precum cititoarele de ecran pentru persoanele cu deficiențe de vedere.
