Checkbox: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Inseritore (discussione | contributi)
Inseritore (discussione | contributi)
Riga 1:
[[File:Checkbox States.svg|thumb|Esempio di ''checkbox'', con i tre possibili stati, selezionato, indeterminato, non selezionato]]
 
In [[informatica]], un '''''checkbox''''' ('''''casella di spunta''''', '''''check box''''', '''''tickbox''''', o '''''tick box''''') è un controllo grafico con cui l'utente può effettuare selezioni multiple. Solitamente, i ''checkbox'' sono mostrati 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|sito=www.w3schools.com|accesso=2021-02-22}}</ref><ref>{{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 al ''checkbox'' è solitamente mostrata una breve descrizione. Per invertire lo stato (selezionato/non selezionato) del ''checkbox'' è sufficiente cliccare sul riquadro o sulla descrizione.
Riga 8:
{{Vedi anche|Form}}
===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.
Riga 24:
 
== Esempio ==
{{Vedi anche|CSS|HTML5}}
HTML:<syntaxhighlight lang="html">
HTML:
[[File:CHECKBOX-CSS.png|alt=Esempi di checkbox|miniatura|Esempi di checkbox formattati con CSS]]
HTML:<syntaxhighlight lang="html">
<label class="container">1
<input type="checkbox" checked="checked">
Riga 44 ⟶ 47:
<span class="checkmark"></span>
</label>
</syntaxhighlight>CSS (con effetto transizione del checkbox quando viene cliccato dall'utente e cambia stato)<ref>{{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>:<syntaxhighlight lang="css">
.container {
max-width: 640px;
Riga 163 ⟶ 166:
Esempio:<syntaxhighlight lang="html">
<h3 id="id-group-label">
Condimenti per SandeichSandwich
</h3>
<div role="group" aria-labelledby="id-group-label">