Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Html: checkbox e radio button

Effettuare scelte multiple

In alternativa alle select multiple, è possibile utilizzare le checkbox per effettuare scelte multiple.
Una checkbox è da intendersi come un elenco di scelte ognuna contraddistinta da un box, ogni box spuntato equivale alla scelta della voce associata. In altre parole ogni casella di controllo (box) se spuntata indica si altrimenti no.
La sintassi per definire una checkbox è:

<input type="checkbox" name="..." value="..." />

Nonostante spesso le checkbox si presentino in gruppo è necessario assegnare ad ognuna un name diverso, sarà compito del programmatore lato server verificare tramite opportuno codice quale checkbox è stata selezionata.
Se la chekbox è selezionata, il value ad esso associato sarà passato al programma che gestirà la form. In caso contrario, se il box non è selezionato, il value non verrà passato.
Vediamo quindi il codice html per realizzare un elenco di chekbox:

</pre>
<form action="pagin.php" method="GET" name="form">
    Scegli i tuoi frutti preferiti:
    <input type="checkbox" name="mela" value="M" /> Mela
    <input type="checkbox" name="pera" value="P" /> Pera
    <input type="checkbox" name="banana" value="B" /> Banana
    <input type="checkbox" name="uva" value="U" /> Uva
    <input type="checkbox" name="arancia" value="A" /> Arancia
    <input type="submit" value="Conferma" />
</form>

Ad ogni checkbox abbiamo associato un name diverso ed un value indicativo che contiene l’iniziale del frutto.

Checkbox HTML

Selezionare valori di default

Così come per la select, anche per un checkbox è possibile impostare di default la selezione. Scrivendo ad esempio:

<input type="checkbox" name="mela" value="M" checked="checked" />

si ottiene un chekbox spuntato. Inoltre cliccando su un box spuntato si otterrà la pulitura del box stesso.

Checkbox html - Default check

Effettuare scelte esclusive

Qualora lo sviluppatore intenda invece fornire la possibilità di una singola scelta tra una serie di opzioni, è consigliabile l’uso dei rabio button. In questo caso quindi una scelta esclude l’altra, a condizione che i radio button abbiano lo stesso name ma valori diversi.
Il browser visualizza questi elementi come dei bottoni circolari, da ciò il nome radio button. La sintassi è la seguente:

<input type="radio" name="..." value="..." />

Il type è impostato alla parola chiave ‘radio‘ e il name sarà uguale al name degli altri radio button qualora questi appartengano ad una stessa lista.
Vediamo quindi il codice html completo per una lista radio button:

</pre>
<form action="pagin.php" method="GET" name="form">
    Scegli i tuoi frutti preferiti:
    <input type="radio" name="frutto" value="Mela" /> Mela
    <input type="radio" name="frutto" value="Pera" /> Pera
    <input type="radio" name="frutto" value="Banana" /> Banana
    <input type="radio" name="frutto" value="Uva" /> Uva
    <input type="radio" name="frutto" value="Arancia" /> Arancia
    <input type="submit" value="Conferma" />
</form>

Il risultato nella finestra del browser è il seguente:

Radiobutton HTML

E’ interessante notare come la selezione di un radio button della lista influisca su un’eventuale scelta precedente. Difatti come detto, i radio button prevedono una singola scelta così come le select viste precedentemente.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×