O casetă de selectare poate avea doar două stări: bifată și nebifată. Ele pot avea orice valoare, dar la trimiterea formularului fie treceți (starea bifată), fie nu-l treceți (starea nebifată). Starea implicită este debifată. În HTML puteți controla o casetă de selectare ca aceasta:
Vizual, o casetă de selectare poate avea trei stări: bifată, nebifată și nedefinită. Ele ar putea arăta astfel:
Câteva note despre casetele de selectare:
Nu puteți face o casetă de selectare nedefinită în HTML. Nici un atribut special. Deși există o proprietate de casetă de selectare care poate fi modificată în JavaScript:
Var checkbox = document.getElementById("unele-checkbox"); checkbox.indeterminate = adevărat;
sau în jQuery:
$("#une-căsuță").prop("nedeterminat", adevărat); // prop introdus în jQuery 1.6+
Starea nedefinită este doar un efect vizual. Caseta de selectare este încă în stare bifată sau nebifată. Aceasta înseamnă că starea vizuală nedefinită maschează starea reală a casetei de selectare.
La fel ca și caseta de selectare în sine, starea sa nedefinită arată diferit în diferite browsere. Iată un exemplu în Opera 11.50 pe Mac:
Și de ce este necesar acest lucru?
Când se dezvoltă proiecte, este adesea nevoie de o structură de casete de selectare. Fiecare casetă de selectare poate avea descendenți. Dacă toate casetele de selectare descendente sunt bifate, atunci caseta de selectare părinte poate fi, de asemenea, bifată. Dacă niciun moștenitor nu este marcat, atunci părintele nu este marcat. Dar dacă cel puțin un moștenitor este bifat, atunci caseta de selectare a părintelui este într-o stare nedefinită (care poate însemna „parțial bifată”).
Exemplul de cod nu este ideal - doar un nivel este verificat pentru a introduce o stare nedefinită.
De asemenea, puteți organiza comutarea între stări când faceți clic pe butonul mouse-ului pe o casetă de selectare:
Var $check = $("input"), el; $check .data("verificat",0) .click(funcție(e) ( el = $(acest); switch(el.data("verificat")) ( // Stare nebifată, treceți la cazul nedefinit 0: el .data(„verificat”,1); el.prop(„nedeterminat”,true); break; // Stare nedefinită, mergeți la cazul verificat 1: el.data(„verificat”,2); el.prop( " nedeterminat", false); el.prop ("verificat", adevărat); break; // Starea bifată, trece la implicit nedefinit: el.data ("verificat", 0); el.prop ("nedeterminat", false ); el.prop("verificat",fals); ) ));
Continui seria de articole despre îmbunătățirea elementelor de interfață. De data aceasta este rândul nostru să vorbim despre casetele de selectare. Acum poți primi.
Casete de selectare
Casetele de selectare au fost create inițial ca elemente de selecție de grup. Acestea. au fost destinate să desemneze un grup de elemente pentru acțiunile de grup ulterioare cu acestea.
Există casete de selectare bune și reale în Gmail
Un exemplu de utilizare a casetelor de selectare este orice interfață modernă de e-mail. După ce ați marcat mai multe litere, puteți, de exemplu, să le ștergeți pe toate.
Probleme și soluții la utilizarea casetelor de selectare
Să ne uităm la principalele probleme pe care le văd când folosesc casetele de selectare și la ce se poate face cu aceste probleme.
Utilizarea casetelor de selectare pentru stările binare
Adesea, o casetă de selectare este utilizată pentru a selecta între două opțiuni diferite. De exemplu, am văzut o astfel de casetă de selectare într-un magazin online.
Această casetă de selectare nu explică nimic. Nu este clar dacă livrarea se va face prin poștă sau dacă va trebui să merg pentru achiziția mea. În acest caz, ar fi mult mai logic să folosiți butonul radio pentru a selecta opțiunea dorită. Să o refacem.
Acum totul a devenit mult mai clar
Utilizarea casetelor de selectare pentru a activa opțiuni
Destul de des folosesc casetele de selectare pentru a arăta dacă o opțiune este activată sau dezactivată. Ceea ce cred că nu este foarte corect.
Casetele de selectare nu sunt butoane. Acestea sunt elemente destinate operațiunilor de grup. Făcând clic pe o casetă de selectare nu ar trebui să ducă la nicio acțiune. Indicația de culoare este ideală pentru identificarea vizuală a opțiunilor activate și dezactivate dintr-o listă.
În exemplul de mai sus, veți selecta mai multe opțiuni și faceți clic pe butonul Aplicați. Această opțiune este viabilă, dar nu foarte convenabilă. Ce să fac? Va propun aceasta solutie:
Activarea opțiunii într-unul dintre proiectele client
Aici puteți vedea clar starea opțiunii (activată sau nu). Comutatorul este imediat vizibil și s-a rezolvat o altă problemă, despre care vom vorbi mai târziu. Un comutator similar a venit de la interfața iPhone și este un analog demn al unei simple casete de selectare.
Dimensiunea mică a zonei pe care se poate face clic
Conform legii lui Fitts, cu cât elementul este mai mic, cu atât este mai dificil de utilizat. Această problemă poate fi observată nu numai în casetele de selectare. Aceasta este una dintre principalele probleme ale multor controale.
Micul bifă nu este ușor de țintit sau lovit. Chiar dacă faceți clic pe întreaga zonă împreună cu textul, utilizatorii vor continua să vizeze în mod specific bifa.
Care sunt căile de ieșire și tehnicile?
Afișând astfel zona pe care se poate face clic.
Butonul casetei de selectare de pe site-ul Ostrovok.ru
Prin creșterea zonei de clic.
Bifare casetă pe unul dintre proiectele client
3. Transformă o casetă de selectare într-un buton radio. Am scris despre asta mai sus.
„Selectează tot” și „elimină tot”
Pentru confortul de a lucra cu un număr mare de casete de selectare, interfața ar trebui să aibă opțiunile „Selectați toate casetele de selectare” și „Debifați toate casetele de selectare”. În caz contrar, lucrul cu o astfel de interfață va deveni foarte obositor și va consuma mult timp. Imaginați-vă că trebuie să selectați cel puțin 10 articole din 12 disponibile pe listă. Acest lucru este mult mai ușor de făcut selectând totul și deselectând opțiunile inutile.
concluzii
Casetele de selectare au fost create inițial ca instrumente de selecție a grupurilor. Și nu ar trebui să le folosiți pentru nimic altceva în forma lor originală. Cu toate acestea, cu unele reglaje și urmând recomandări simple, acestea pot fi transformate într-un instrument convenabil pentru utilizatorul dvs.
În episoadele precedente și următoare
- . De ce nu ar trebui folosite. Și dacă este folosit, cum?
- . Alegere simplă fără alegere.
- . Cum ar trebui să funcționeze câmpurile de intrare cu diferite tipuri de date.
Toți dezvoltatorii de site-uri web, aplicații web și programe desktop știu ce sunt casetele de selectare. Dar acei oameni care sunt departe de a programa, întâmpinând un cuvânt străin atât de neînțeles, nu înțeleg despre ce vorbesc. De fapt, totul este foarte simplu. Casetele de selectare sunt una dintre cele mai simple controale la crearea formularelor.
Bifă obișnuită
Toți oamenii au întâlnit simboluri precum bifa în viața lor, începând de la școală. Când testați, trebuie să marcați opțiunea corectă cu acest semn. Apoi la completarea diverselor chestionare. Ei bine, în prezent, când utilizatorii efectuează multe acțiuni prin Internet, nu există absolut nicăieri fără căpușe. Chiar și cea mai simplă înregistrare pe orice site necesită să bifezi câteva căsuțe (hobby-uri, abilități).
Comerțul pe internet este, de asemenea, dezvoltat acum. La crearea unei comenzi, utilizatorul marchează articolele care îl interesează. Și adesea, atunci când instalați un joc pe computer, vi se cere să selectați software suplimentar. Și aici trebuie să faci o alegere. Așadar, casetele de selectare sunt aceleași semne de selectare care sunt utilizate pe paginile web.
În crearea site-ului web
Dezvoltatorii de site-uri web văd acest element oarecum mai larg. La urma urmei, crearea este mai dificilă decât să faci clic pe un pătrat o dată și să bifezi o casetă. Site-urile web sunt dezvoltate folosind limbajul de marcare hipertext, care într-un mediu profesional se numește doar patru litere - HTML. Și pentru a crea o bifă în el, trebuie să scrieți un cod.
Cum sunt create casetele de selectare? HTML are un element specializat (tag), care este un câmp dotat cu un tip de casetă de selectare, care este scris după cum urmează: .
Principii de funcționare
Acest element funcționează după cel mai simplu principiu: fie afirmare, fie negație. Dacă un câmp este bifat, browserul web trimite o variabilă care va trimite numele câmpului către server pentru procesare, dar dacă caseta nu este bifată, serverul nu primește nimic. Elementul are un atribut opțional cu valoarea valorii, dar este opțional.
Uneori se întâmplă ca unele casete de pe pagină să fie deja bifate. Pentru a face acest lucru, dezvoltatorii adaugă un atribut special etichetei, care indică caseta de selectare care este deja bifată în mod implicit. Acesta este atributul verificat, adică „verificat”.
Casetele de selectare sunt elemente care nu implică o singură alegere dintre mai multe opțiuni, ci marcarea tuturor celor potrivite. Pentru un dezvoltator, acest lucru contează, deoarece dacă un formular conține mai multe casete de selectare, numele lor trebuie să fie diferite unul de celălalt.
Casete de selectare dependente
În cazul în care trebuie să selectați o singură opțiune dintr-un set, se folosesc alte elemente - butoane radio, nu casete de selectare. Dar uneori este folosit un tip, cum ar fi casetele de selectare dependente. HTML, împreună cu limbajul de programare JavaScript, vă permite să faceți o casetă de selectare principală de care depind celelalte. Când faceți clic pe el, mai multe casete de selectare pot fi bifate simultan. Acest lucru este rar folosit, deoarece contrazice oarecum regula de verificare a casetelor.
Ca toate etichetele din HTML, casetele de selectare sunt elemente care au propriile lor caracteristici. Ce sunt ei? Atributul pentru pre-verificarea unei casete de selectare a fost deja menționat mai sus - bifat. Deoarece casetele de selectare trebuie să aibă nume diferite într-un singur formular, este necesar atributul nume. Doar identifică fiecare casetă de selectare individuală. Pentru a seta valoarea care va fi trimisă serverului, utilizați atributul value.
Este de remarcat faptul că casetele de selectare sunt controale grafice care sunt utilizate în principal în formulare. Și funcționează în trei moduri: neselectat, selectat și nedefinit.
Utilizați în tabele
Casetele de selectare sunt folosite nu numai în HTML atunci când se dezvoltă site-uri web și aplicații web. Software-ul precum 1C folosește și acest element. La urma urmei, o întreprindere are multe componente diferite și, atunci când lucrați cu documentație, toate acestea trebuie remarcate. De exemplu, folosind o casetă de selectare, puteți marca o listă de stocuri din depozit sau de clienți cărora trebuie să le trimiteți mărfuri.
Ce alte programe folosesc acest element? Excel - toată lumea cunoaște acest program de calcul de la Microsoft, care este adesea principiul cum funcționează o casetă de selectare aici: dacă caseta de selectare este bifată, atunci elementul returnează o valoare adevărată, dacă nu este bifat, returnează o valoare falsă. Pentru a introduce o casetă de selectare într-un document, trebuie să activați o filă specială pentru dezvoltator. Acest lucru se face prin parametri care sunt ușor diferiți în fiecare versiune de Excel.
Cum găsesc setările de care am nevoie? Există întotdeauna ajutor sau un motor de căutare. După ce fila este activată, puteți insera un element prin comanda „Inserare” a elementului „Controale”. Lucrul de remarcat aici este că acest meniu conține și controale ActiveX situate sub elementele de formular necesare. Există și casete de selectare acolo. Care este diferența dintre ele? Pentru a utiliza controalele ActiveX, aveți nevoie de limbajul de programare VBA încorporat, pe care puțini oameni îl cunosc. Și casetele de selectare obișnuite pot fi legate imediat la o anumită celulă din document.
Odată ce casetele de selectare sunt introduse în Excel, acestea devin bifate în mod implicit. Făcând clic oriunde în document, marcajul este eliminat. Pentru a inversa selecția, trebuie să faceți clic pe caseta de selectare cu butonul drept al mouse-ului, deoarece butonul din stânga elimină sau bifează caseta de selectare.
Trecând cu mouse-ul peste o casetă de selectare și ținând apăsat butonul din stânga, puteți muta elementul în orice locație din document. De asemenea, este convenabil să faceți acest lucru folosind tastele de pe tastatură. Când treceți cu mouse-ul peste colțurile unui element, îl puteți întinde la o dimensiune mai mare sau îl puteți micșora. Setările speciale vă permit să personalizați caseta de selectare modificându-i culoarea, fundalul și cadrul.
Concluzie
Așadar, așa cum se poate vedea din cele de mai sus, casetele de selectare nu sunt un element complex al interfeței grafice, ci ceva pe care toată lumea îl întâlnește în viața de zi cu zi - o bifă obișnuită. Conceptul este ușor diferit pentru un programator și un utilizator obișnuit, dar esența este aceeași: acesta este un element de control care vă permite să faceți selecții multiple atunci când completați un formular. Este important să nu confundați casetele de selectare cu butoanele radio, care vă permit să selectați doar un articol din mai multe.
Dezvoltatorii de aplicații web, site-uri web și programe desktop ar trebui să știe ce sunt casetele de selectare. Dar utilizatorii care sunt departe de a programa, întâlnind acest cuvânt străin de neînțeles, destul de des nu înțeleg sensul acestuia. De fapt, totul este destul de simplu. Casetele de selectare sunt cel mai simplu element de control la crearea formularelor.
Casetă de selectare: bifă obișnuită
Cu siguranță fiecare dintre noi a întâlnit în viață un astfel de simbol precum o căpușă. Această desemnare ar trebui să ne fie familiară, începând de la școală. Acest semn marchează răspunsul corect în timpul testării. Casetele de selectare sunt, de asemenea, folosite la completarea diferitelor formulare. Astăzi, când utilizatorii efectuează multe acțiuni prin Internet, nu există scăpare fără căpușe. Chiar și cea mai simplă procedură de înregistrare pe orice site necesită verificarea unor puncte. Astăzi, comerțul online este mai dezvoltat ca niciodată. La crearea unei comenzi, utilizatorul poate marca doar acele articole care îl interesează în mod special. Foarte des, atunci când instalează jocuri pe calculator, utilizatorului i se cere să selecteze software suplimentar. În acest caz, va trebui, de asemenea, să faceți o alegere. Deci, casetele de selectare sunt exact aceleași semne de selectare care sunt utilizate pe paginile web.
Utilizarea casetelor de selectare la crearea site-urilor web
Dezvoltatorii de site-uri web văd acest element oarecum mai larg. La urma urmei, a-l crea este mult mai dificil decât a face clic pe un pătrat. Site-urile web sunt dezvoltate folosind limbajul de marcare hipertext. Într-un mediu profesional, acest limbaj se numește HTML. Pentru a crea o astfel de casetă de selectare în această limbă, trebuie să scrieți un cod. Cum sunt create de fapt casetele de selectare? HTML este un element specializat care este un câmp cu un tip de casetă de selectare. Este scris astfel:
Caseta de selectare: principiul de funcționare
Acest element funcționează pe un principiu destul de simplu: fie negare, fie afirmare. Dacă câmpul este bifat, browserul va trimite o variabilă care va trimite numele câmpului către server pentru procesare. Dacă caseta de selectare nu este bifată, serverul nu va primi nimic. Acest element are un atribut care are valoarea valorii. Acest atribut este opțional. Dezvoltatorii adaugă etichetei un atribut special care indică că caseta de selectare este bifată în mod implicit. Acest atribut se numește verificat, ceea ce înseamnă „verificat” în engleză.
Elemente precum casetele de selectare nu implică o singură selecție a mai multor opțiuni, ci mai degrabă marcarea tuturor celor potrivite. Acest lucru este important pentru dezvoltator, deoarece dacă formularul conține mai multe casete de selectare, atunci numele lor trebuie să fie diferite unele de altele.
Casete de selectare dependente
Dacă trebuie să selectați o singură opțiune din multele prezentate, puteți utiliza alte elemente, cum ar fi butoanele radio. În unele cazuri, este utilizat un tip, cum ar fi casetele de selectare dependente. Împreună cu limbajul de programare HTML JavaScript, puteți crea o casetă de selectare principală de care vor depinde toate celelalte. Când faceți clic pe acest element, mai multe casete de selectare pot fi bifate simultan. Acest lucru este folosit destul de rar, deoarece contrazice regula de bifare a casetelor de selectare, ca și alte etichete din HTML, au propriile lor caracteristici. Ce ar putea fi? Am discutat deja despre atributul pentru pre-marcarea casetei de selectare bifate. Deoarece casetele de selectare trebuie să aibă nume diferite pe același formular, este necesar atributul nume. Acest atribut identifică fiecare casetă de selectare în mod individual. Pentru a seta valoarea care va fi trimisă serverului, trebuie să utilizați atributul value. Trebuie remarcat faptul că casetele de selectare sunt controale grafice care sunt utilizate în principal în diferite forme. Acestea funcționează în trei moduri: selectat, neselectat și nedefinit.
Utilizați în tabele
Un element precum o „căsuță de selectare” poate fi folosit nu numai în HTML atunci când se dezvoltă aplicații web și site-uri web. Acest element este folosit și în software, de exemplu, în programele 1C. Există multe componente diferite într-o întreprindere și atunci când lucrați cu documentație, este necesar să rețineți toate acestea. De exemplu, folosind o casetă de selectare puteți marca o listă de clienți sau o listă de stocuri în depozit. În ce alte programe poate fi folosit acest element? Toată lumea cunoaște programul Excel de la Microsoft, care este adesea folosit ca alternativă la 1C. Aici, principiul de funcționare al acestei casete de selectare este următorul: dacă caseta de selectare este bifată, atunci acest element returnează valoarea adevărată. Dacă caseta de selectare este debifată, atunci acest element returnează o valoare falsă. Pentru a introduce o casetă de selectare într-un document, trebuie să activați o filă specială pentru dezvoltator. Acest lucru se poate face folosind parametri care diferă în fiecare versiune de Excel.
Cum puteți găsi setările de care aveți nevoie? În acest scop, puteți utiliza întotdeauna un motor de căutare sau ajutor. Când această filă este activată, puteți insera acest element folosind comanda „Inserare” din elementul „Controale”. Aici trebuie să acordați atenție faptului că meniul conține și elemente ActiveX, care se află sub elementele de formular necesare. Există și casete de selectare aici. Care este diferența Pentru a utiliza controalele ActiveX, aveți nevoie de limbajul de programare VBA încorporat, pe care puțini oameni îl cunosc. Casetele de selectare obișnuite pot fi legate direct la o anumită celulă din document. După ce toate casetele de selectare din Excel sunt bifate, acestea vor deveni bifate în mod implicit. Dacă faceți clic oriunde în document, bifa va fi eliminată. Pentru a efectua o selecție inversă, trebuie să faceți clic dreapta pe steag. Butonul din stânga debifează sau setează o bifă.
Câmpul de introducere vă permite să specificați o valoare folosind tastatura.
Când să utilizați
Utilizați câmpul de introducere pentru text scurt sau valori numerice fără un format previzibil.
În HTML5, câmpul de introducere poate fi de diferite tipuri - culoare, dată, e-mail, parolă, text, url etc. În serviciile Contour, utilizați numai tipurile de text și parolă. Tipurile rămase fie nu sunt acceptate de browserele majore, fie oferă o interfață de utilizator slabă și o validare care va diferi ca design de al nostru.
Nume
Numele câmpului este scris cu majuscule.
Consultați câmpul de introducere ca un substantiv care indică ceea ce doriți să introduceți. Evitați cuvintele „al dumneavoastră”, „introduceți” și altele asemenea din titlu - nu au sens.
Nu pune două puncte după titlu: fără el totul este clar, creează doar zgomot vizual suplimentar.
Descrierea muncii
Substituent
Dacă din nume nu este evident cum să completați un câmp, utilizați un substituent - un indiciu care este afișat în interiorul câmpului până când este completat.
Substituent (din engleză substituent) este un substituent. Sinonimul „filigran” este adesea folosit, dar substituentul este un nume mai corect, deoarece se potrivește cu atributul corespunzător al etichetelor de intrare și textarea.
Când câmpul primește focalizare, substituentul devine mai ușor și dispare când este introdus primul caracter.
Substituentul nu ar trebui să vă solicite o anumită valoare de introdus în câmp.
Dacă câmpul este calculat și ați calculat valoarea, utilizați câmpul automat:
Dacă asumați o valoare, completați în prealabil câmpul, utilizatorul o va putea edita:
Puteți plasa numele câmpului într-un substituent în cazuri excepționale: când trebuie să economisiți spațiu sau scopul câmpului este evident:
Nu utilizați un substituent pentru a specifica numele câmpurilor în formular. Când este completat, acest formular devine „oarb”:
Curățarea câmpului
Dacă utilizatorul trebuie să șterge adesea câmpul și să introducă o nouă valoare, utilizați un buton încrucișat special pentru aceasta.
O cruce este afișată atunci când este introdus cel puțin 1 caracter în câmp. Crucea este afișată chiar și atunci când focalizarea este în afara câmpului.
Când faceți clic pe cruce, focalizarea se duce pe câmp, valoarea introdusă este ștearsă:
Zona pe care se poate face clic este egală ca înălțime cu câmpul de introducere și 28 px în lățime:
Internet Explorer 10 își desenează propria cruce pentru orice câmp de intrare cu focus. Pentru ca această cruce să nu se suprapună pictogramei noastre, trebuie să adăugăm un stil:
Dimensiunea și locația
Câmpul de introducere, ca și butonul, poate avea trei dimensiuni. Folosiți câmpuri de intrare medii și mari dacă acestea sunt comenzile principale de pe pagină. De exemplu, un câmp de căutare într-un director. În cele mai mari câmpuri, dimensiunea fontului este de 16 px.
Titlul câmpului ar trebui să fie aliniat la linia de bază a textului din câmp:
Faceți ca lățimea câmpului să se potrivească cu lățimea valorii introduse. Acest lucru îi spune utilizatorului ce valoare este așteptată de la el și îl ajută pe utilizator să se asigure că a completat corect câmpul.
