Checkbox: differenze tra le versioni

Versione delle 03:05, 22 lug 2011

Versione attuale delle 18:56, 30 mar 2025

(32 versioni intermedie di 25 utenti non mostrate)

Riga 1:

[[File:Checkbox States.PNGsvg|thumb|Esempio di ''checkbox'', con i tre possibili stati, selezionato, indeterminato, non selezionato]]

In [[informatica]], ununa '''''checkbox''''' ('''''checko box''''',casella di spunta'''''tickbox''''', o(anche '''''tick boxtickbox''''') è un controllo grafico con cui l'utente può effettuare selezioni multiple. Solitamente, ile ''checkbox'' sono mostratimostrate sullo [[schermo]] come dei quadrati che possono contenere spazio bianco (quando non sono selezionati), [[segno di spunta]] (quando sono selezionati) o un quadrato (indeterminato)<ref>{{Cita web|url=https://www.w3schools.com/howto/howto_css_custom_checkbox.asp|titolo=How To Create a Custom Checkbox and Radio Buttons|accesso=2021-02-22}}</ref><ref name=":0">{{Cita web|url=https://www.html.it/articoli/personalizzare-checkbox-e-radio-button-con-i-css/|titolo=Checkbox CSS e radio button personalizzati e responsive|autore=Cesare Lamanna|sito=HTML.it|lingua=it-IT|accesso=2021-02-22}}</ref>.

Adiacente alalla ''checkbox''casella è solitamente mostrata una breve descrizione. Per invertire lo stato (selezionato/non selezionato) deldella ''checkbox''casella è sufficiente cliccare sul riquadro o sulla descrizione.

==Descrizione==

== Stato indeterminato ==

{{Vedi anche|Form}}

Lo stato indeterminato è solitamente usato in checkbox che determinano la selezione/deselezione di un gruppo di checkbox (selezionando/deselezionando il checkbox 'padre' l'intero gruppo di checkbox viene selezionato/deselezionato), per indicare che il gruppo di checkbox è parzialmente selezionato.

===Sintassi HTML===

Nel linguaggio [[HTML]] il checkbox è un sottoelemento del [[form]] ed ha la seguente [[sintassi (informatica)|sintassi]]<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox|titolo=- HTML: HyperText Markup Language {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-22}}</ref>:

;<code>&lt;form>...&lt;/form></code>

:Crea un modulo dove all'interno è contenuto (annidati) i seguenti sottoelementi tra cui il checkbox.

;<code>&lt;method=post action=url></code>

:L'attributo ''method'' specifica con il suo valore che i dati saranno inviati al server col metodo ''Post'' dell'[[Hypertext Transfer Protocol|HTTP]] puntando, tramite l'attributo ''action'', alla rispettiva pagina di elaborazione di ''[[URL]]'' specificato; questo elemento è tipicamente sempre presente.

;<code>&lt;input type=checkbox></code>

:Crea una casella di spunta (checkbox).

=== Stato indeterminato ===

== Disabilitato ==

Lo stato indeterminato è solitamente usato in checkbox che determinano la selezione/deselezione di un gruppo di checkbox (selezionando/deselezionando il checkbox 'padre' l'intero gruppo di checkbox viene selezionato/deselezionato), per indicare che il gruppo di checkbox è parzialmente selezionato. Le caselle possono quindi essere attivate contemporaneamente.

=== Disabilitato ===

Come tutti i controlli, anche il ''checkbox'' può essere disabilitato per impedire all'utente di cambiarne lo stato; quando disabilitato tutto il controllo risulterà in grigio.

== Voci correlateEsempio ==

{{Vedi anche|CSS|HTML5}}

HTML:

[[File:CHECKBOX-CSS.png|alt=Esempi di checkbox|miniatura|Esempi di checkbox formattati con CSS]]

<syntaxhighlight lang="html">

<label class="container">1

<input type="checkbox" checked="checked">

<span class="checkmark"></span>

</label>

<label class="container">2

* [[Radio button]]

<input type="checkbox">

<span class="checkmark"></span>

</label>

<label class="container">3

{{portale|informatica}}

<input type="checkbox">

<span class="checkmark"></span>

</label>

<label class="container">4

[[Categoria:interazione uomo-computer]]

<input type="checkbox">

<span class="checkmark"></span>

</label>

</syntaxhighlight>CSS (con effetto transizione del checkbox quando viene cliccato dall'utente e cambia stato)<ref name=":0" />:<syntaxhighlight lang="css">

.container {

max-width: 640px;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

font-size: 13px;

}

ul.ks-cboxtags {

list-style: none;

padding: 20px;

}

ul.ks-cboxtags li{

display: inline;

}

ul.ks-cboxtags li label {

[[az:Qutucuq]]

padding: 8px 12px;

[[ca:Casella de verificació]]

cursor: pointer;

[[de:Checkbox]]

}

[[en:Checkbox]]

ul.ks-cboxtags li label::before {

[[es:Casilla de verificación]]

display: inline-block;

[[fi:Valintalaatikko]]

font-style: normal;

[[fr:Case à cocher]]

font-variant: normal;

[[ja:チェックボックス]]

text-rendering: auto;

[[kk:Қанатша көзі]]

-webkit-font-smoothing: antialiased;

[[ko:체크 상자]]

font-family: "Font Awesome 5 Free";

[[nl:Selectievakje]]

font-weight: 900;

[[pl:Przycisk wyboru]]

font-size: 12px;

[[ru:Переключатель (элемент интерфейса программ)]]

padding: 2px 6px 2px 2px;

[[sv:Kryssruta]]

content: "\f067";

[[uk:Прапорець (елемент GUI)]]

transition: transform .3s ease-in-out;

[[zh:核取方塊]]

}

ul.ks-cboxtags li input[type="checkbox"]:checked + label::before {

content: "\f00c";

transform: rotate(-360deg);

transition: transform .3s ease-in-out;

}

ul.ks-cboxtags li input[type="checkbox"] {

position: absolute;

opacity: 0;

}

ul.ks-cboxtags li input[type="checkbox"]:focus + label {

border: 2px solid #e9a1ff;

}

</syntaxhighlight>

== Accessibilità ==

{{Vedi anche|Accessibilità (web)|Accessibilità (design)|WAI-ARIA}}

Esempio di codice con tag appositi [[WAI-ARIA]] per l'[[Accessibilità (web)|accessibilità]]<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role|titolo=ARIA: form role - Accessibility {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-16}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html|titolo=Checkbox Example (Two State) {{!}} WAI-ARIA Authoring Practices 1.1|accesso=2021-02-22}}</ref>:

=== Supporto per tastiera ===

{| class="wikitable"

!Chiave

!Funzione

|-

!<kbd>Tab</kbd>

|Sposta lo stato attivo della tastiera su <code>checkbox</code>.

|-

!<kbd>Space</kbd>

|Alterna gli stati selezionati e deselezionati della casella di controllo.

|}

=== Attributi di ruolo, proprietà, stato e tabindex ===

{| class="wikitable"

!Ruolo

!Attributo

!Elemento

!Utilizzo

|-

!

|

|<code>h3</code>

|

* Fornisce un'etichetta di raggruppamento per il gruppo di caselle di controllo.

|-

!<code>group</code>

|

|<code>div</code>

|

* Identifica l'elemento <code>div</code> come contenitore <code>group</code> per le caselle di controllo.

|-

!

|<code>aria-labelledby</code>

|<code>div</code>

|

* L'attributo <code>aria-labelledby</code> fa riferimento all'attributo <code>id</code> dell'elemento<code>h3</code> per definire il nome accessibile per il gruppo di caselle di controllo.

|-

!<code>checkbox</code>

|

|<code>div</code>

|

* Identifica l'elemento <code>div</code> come un file<code>checkbox</code>.

* Il contenuto di testo figlio di questo <code>div</code>fornisce il nome accessibile della casella di controllo.

|-

|

!<code>tabindex="0"</code>

|<code>div</code>

|Include la casella di controllo nella sequenza di schede della pagina.

|-

|

!<code>aria-checked="false"</code>

|<code>div</code>

|

* Indica che non è selezionata<code>checkbox</code> .

* I selettori di attributi CSS (ad esempio <code>[aria-checked="false"]</code>) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo <code>aria-checked</code>.

* Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l'elemento pseudo CSS <code>::before</code> e la proprietà <code>content</code> vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo.

|-

|

!<code>aria-checked="true"</code>

|<code>div</code>

|

* Indica che è selezionato <code>checkbox</code>.

* I selettori di attributi CSS (ad esempio <code>[aria-checked="true"]</code>) vengono utilizzati per sincronizzare gli stati di visualizzazione con il valore dell'attributo <code>aria-checked</code>.

* Per supportare le impostazioni del sistema operativo e del browser ad alto contrasto, l'elemento CSS <code>::before</code> e la proprietà <code>content</code> vengono utilizzati per generare gli indicatori visivi dello stato della casella di controllo.

|}

Esempio:<syntaxhighlight lang="html">

<h3 id="id-group-label">

Condimenti per Sandwich

</h3>

<div role="group" aria-labelledby="id-group-label">

<ul class="checkboxes">

<li>

<div role="checkbox"

aria-checked="false"

tabindex="0">

Lattuga

</div>

</li>

<li>

<div role="checkbox"

aria-checked="true"

tabindex="0">

Pomodoro </div>

</li>

</syntaxhighlight>

== Note ==

<references />

== Voci correlate ==

* [[Radio button]]

== Altri progetti ==

{{Interprogetto|wikt=checkbox|wikt_etichetta=checkbox|preposizione=sulla}}

{{portale|informatica}}

[[Categoria:Interazione uomo-computer]]