Caseta de bifat

Exemplu de casetă de selectare , cu cele trei stări posibile, selectate, nedeterminate, neselectate

În informatică , o casetă de selectare ( casetă de selectare , casetă de selectare , casetă de selectare sau casetă de selectare ) este un control grafic cu ajutorul căruia utilizatorul poate face mai multe selecții. De obicei, casetele de selectare sunt afișate pe ecran ca pătrate care pot conține spațiu alb (când nu sunt selectate), bifă (când sunt selectate) sau un pătrat (nedeterminat) ^{[1] [2]} .

O scurtă descriere este de obicei afișată lângă caseta de selectare . Pentru a inversa starea (selectată / neselectată) a casetei de selectare, trebuie doar să faceți clic pe casetă sau pe descriere.

Descriere

Același subiect în detaliu: Formular .

Sintaxa HTML

În limbaj HTML caseta de selectare este un subelement al formularului și are următoarea sintaxă ^[3] :

<form>...</form>

Creați un formular care conține (imbricat) următoarele subelemente, inclusiv caseta de selectare.

<method=post action=url>

Atributul de metodă specifică, cu valoarea sa, că datele vor fi trimise la server cu metoda HTTP Post îndreptată, prin atributul de acțiune , către pagina de procesare URL respectivă specificată; acest element este de obicei întotdeauna prezent.

<input type=checkbox>

Creați o casetă de selectare.

Stare nedeterminată

Starea nedeterminată este de obicei utilizată în casetele de selectare care determină selectarea / deselectarea unui grup de casete de selectare (prin selectarea / deselectarea casetei de selectare „părinte” se selectează / deselectează întregul grup de casete de selectare), pentru a indica faptul că grupul de casete de selectare este parțial selectat. Casetele pot fi apoi activate în același timp.

Dezactivat

La fel ca toate comenzile, caseta de selectare poate fi, de asemenea, dezactivată pentru a împiedica utilizatorul să-și schimbe starea; când este dezactivat, toate comenzile vor fi închise.

Exemplu

Același subiect în detaliu: CSS și HTML5 .

HTML:

Exemple de casete de selectare formatate cu CSS

 < label class = "container" > 1
  < input type = "checkbox" bifat = "bifat" >
  < span class = "checkmark" > </ span >
</ etichetă >

< label class = "container" > 2
  < input type = "checkbox" >
  < span class = "checkmark" > </ span >
</ etichetă >

< label class = "container" > 3
  < input type = "checkbox" >
  < span class = "checkmark" > </ span >
</ etichetă >

< label class = "container" > 4
  < input type = "checkbox" >
  < span class = "checkmark" > </ span >
</ etichetă >

CSS (cu efect de tranziție a casetei de selectare când faceți clic de utilizator și schimbă starea) ^[2] :

 . container {
    lățime maximă : 640 px ;
    font-family : „Segoe UI” , Tahoma , Geneva , Verdana , sans-serif ;
    dimensiunea fontului : 13 px ;
}
ul . ks-cboxtags {
    list-style : nici unul ;
    căptușeală : 20 px ;
}
ul . ks-cboxtags li {
  display : inline ;
}

ul . ks-cbox le marchează eticheta {
    căptușeală : 8 px 12 px ;
    cursor : pointer ;
}
ul . ks-cbox le etichetează eticheta :: înainte {
    afișaj : bloc în linie ;
    stil font : normal ;
    font-variantă : normal ;
    redare text : auto ;
    -webkit- font-smoothing : antialiased ;
    font-family : "Font Awesome 5 Free" ;
    greutate-font : 900 ;
    dimensiunea fontului : 12 px ;
    umplutură : 2 px 6 px 2 px 2 px ;
    conținut : "\ f067" ;
    tranziție : transformă .3 s ușurință-în-ieșire ;
}

ul . ks-cboxtags li input [ type = "checkbox" ] : bifat + etichetă :: înainte de {
    conținut : "\ f00c" ;
    transformare : rotire ( -360deg );
    tranziție : transformă .3 s ușurință-în-ieșire ;

}
ul . ks-cboxtags li input [ type = "checkbox" ] {
  poziție : absolută ;
  opacitate : 0 ;
}
ul . ks-cboxtags li input [ type = "checkbox" ] : focus + etichetă {
  chenar : 2 px solid # e9a1ff ;
}

Accesibilitate

Același subiect în detaliu: Accesibilitate (web) , Accesibilitate (design) și Wai-aria .

Exemplu de cod cu etichete WAI-ARIA adecvate pentru accesibilitate ^{[4] [5]} :

Suport pentru tastatură

Rol, proprietate, stare și atribute tabindex

Exemplu:

 < h3 id = "id-group-label" >
Garnituri pentru Sandwich
</ h3 >
< div role = "group" aria-labeledby = "id-group-label" >
  < ul class = "checkboxes" >
    < ei >
      < div role = "checkbox"
           aria-verificat = "fals"
           tabindex = "0" >
      Salată verde
      </ div >
    </ li >
    < ei >
      < div role = "checkbox"
           aria-verificat = "adevărat"
           tabindex = "0" >
Tomate </ div >
    </ li >

Notă

Elemente conexe

• Buton de radio

Alte proiecte

• Wikționarul conține lema dicționar « casetă de selectare »
• Wikimedia Commons conține imagini sau alte fișiere în caseta de selectare

Portal IT : accesați intrările Wikipedia care se ocupă cu IT