HTML.itHTML.it


 Consentire delle scelte (checkbox, radio, select)


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à:

     Linguaggi conosciuti
html      
css      
JavaScript 

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:

     Linguaggi conosciuti     HTML      CSS        JavaScript

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:

     Siti per webmaseter     

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:

    Torna a inizio pagina