Consentire delle scelte (checkbox, radio, select)

In questa lezione esaminiamo alcuni dei componenti di base per creare interfacce utente, in particolare vediamo quegli elementi che permettono agli utenti di effettuare delle scelte tra valori preimpostati.

Checkbox

Con le checkbox possiamo consentire all’utente di operare delle scelte multiple. Ad esempio:

<form action="">
<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>
</form>

che produce:

Si possono anche selezionare uno o più valori che vengono spuntati di default, grazie all’attributo checked:

<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Ecco il risultato:

Inoltre, grazie all’attibuto disabled possiamo rendere una casella non accessibile:

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

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:

<form action="">
<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>
</form>

che viene così visualizzato:

Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante.

<form action="">
<input type="radio" name="linguaggio" value="html" checked="checked" disabled="disabled"/>
</form>

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:

<form>
<fieldset>
<legend>Siti per webmaster</legend>
<select name="siti" >
<option value="http://www.html.it" selected="selected">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
</select>
</fieldset>
</form>

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:

HTML.itJavaScript HTML.itCSS HTML.it
font.html.itcgipoint.html.it

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:

<form action="">
<label>Quale siti visiti?<br>
<select name="siti" multiple="multiple">
<option value="http://www.html.it">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
<option value="http://font.html.it">font.html.it </option>
<option value="http://cgipoint.html.it" >cgipoint.html.it </option>
</select>
</label>
</form>

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.

<form action="">
<label>Quale siti visiti?<br>
<select name="siti" size="5" multiple="multiple">
<option value="http://www.html.it">www.html.it </option>
<option value="http://freephp.html.it">frephp.html.it </option>
<option value="http://freasp.html.it">freasp.html.it </option>
<option value="http://font.html.it">font.html.it </option>
<option value="http://cgipoint.html.it" >cgipoint.html.it </option>
</select>
</label>
</form>

che viene così visualizzato:

>> Scopri come personalizzare Chekbox e Radio Buttons con i CSS