Checkbox
Con i checkbox possiamo consentire all’utente di operare delle scelte
multiple. Ad esempio:
<fieldset>
<legend>Linguaggi
conosciuti</legend><br>
<input
type="checkbox" name="html" value="html">
html
<br>
<input type="checkbox" name="css"
value="css"> css
<br>
<input type="checkbox"
name="javascript" value="javascript">
JavaScript
</fieldset>
che dà:
Si possono anche selezionare uno o più valori di default:
<input name="html" type="checkbox" value="html"
checked>
cioè
ed è possibile disabilitare una casella:
<input name="html" type="checkbox" value="html"
disabled>
cioè:
Radio button
I "radio button" ("bottoni circolari")
invece consentono di effettuare una scelta esclusiva. In questo caso quindi una
scelta esclude l’altra. Per ottenere questo effetto i campi devono avere lo
stesso nome e differente valore:
<fieldset>
<legend>Linguaggi conosciuti</legend>
HTML<input type="radio" name="linguaggio"
value="html">
CSS <input
type="radio" name="linguaggio" value="css">
JavaScript <input type="radio" name="linguaggio"
value="javascript">
</fieldset>
che viene così visualizzato:
Anche in questo caso è possibile assegnare un valore di default o
disabilitare un pulsante.
<input type="radio" name="linguaggio" value="html"
checked disabled>
cioè:
Menu di opzioni (select)
Grazie al tag <select> è possibile costruire dei menu
di opzioni. In questo caso ciascuna voce deve essere compresa all’interno del
tag <option> (la chiusura del tag è opzionale) e il
valore deve essere specificato attravero l'attributo "value".
Con l’attributo "selected" si può indicare una scelta
predefinita:
<fieldset>
<legend>Siti
per webmaseter</legend>
<select
name="siti" >
<option
value="http://www.html.it"
selected>www.html.it
<option
value="http://freephp.html.it">frephp.html.it
<option
value="http://freasp.html.it">freasp.html.it
</select>
</fieldset>
che da luogo a:
Siccome i menu di scelta tendono a diventare particolarmente lunghi,
nell’HTML 4 è stato introdotto il tag <optgroup> che
consente di suddividere le varie possibilità di scelta in gruppi tramite
l’utilizzo di apposite etichette. Ecco l’esempio:
<select name="siti"
>
<optgroup label="siti per
webmaster">
<option
value="http://www.html.it">www.html.it
<option
value="http://freephp.html.it">frephp.html.it
<option
value="http://freasp.html.it">freasp.html.it
</optgroup>
<optgroup
label="risorse per
webmaster">
<option
value="http://font.html.it">font.html.it
<option
value="http://cgipoint.html.it">cgipoint.html.it
</optgroup>
</select>
che dà luogo al seguente menu:
Infine con il tag select è possibile impostare anche delle
scelte multiple. Come si può vedere, utilizzando l’attributo
"multiple" l’aspetto del tag select cambia notevolmente:
<label>Quale siti visiti?<br>
<select
name="siti"
multiple>
<option
value="http://www.html.it">www.html.it
<option
value="http://freephp.html.it">frephp.html.it
<option
value="http://freasp.html.it">freasp.html.it
<option
value="http://font.html.it">font.html.it
<option
value="http://cgipoint.html.it"
>cgipoint.html.it
</select>
</label>
cioè:
utilizzando il tasto "ctrl" l’utente può così effettuare
delle scelte multiple.
Tramite l’attributo "size" si può specificare il numero
delle voci che devono comparire nel menu, e conseguentemente regolare l’altezza
del menu, aggiungendo o togliendo la barra di scorrimento verticale.
<label>Quale siti visiti?<br>
<select
name="siti" size="5"
multiple>
<option
value="http://www.html.it">www.html.it
<option
value="http://freephp.html.it">frephp.html.it
<option
value="http://freasp.html.it">freasp.html.it
<option
value="http://font.html.it">font.html.it
<option
value="http://cgipoint.html.it"
>cgipoint.html.it
</select>
</label>
che viene così visualizzato: