Attraverso i menu a discesa potete offrire ai visitatori un elenco di voci tra cui possono selezionare una voce.
<select name="lingue"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Le liste di selezione vengono definite tramite l'elemento select. Anche qui vale: ogni lista di selezione dovrebbe essere identificata in modo univoco nel documento da un identificatore (name). Le singole voci dell'elenco vengono definite ciascuna tramite un elemento option. Tra il tag di apertura e chiusura di <option> c'è il testo della voce dell'elenco.
Inviando il modulo, di default viene trasmesso il testo della voce selezionata. Tuttavia, è possibile personalizzare il valore di invio in modo diverso. Questo avviene tramite l'attributo value.
<select name="lingue"> <option value="s1">HTML</option> <option value="s2">JavaScript</option> <option value="s3">CSS</option> <option value="s4">XML</option> <option value="s5">Java</option> </select>
Basta assegnare il valore di invio desiderato a questo value.
In genere, è possibile visualizzare solo una voce di un menu a discesa alla volta. Tuttavia, se lo desiderate, potete anche mostrare contemporaneamente più voci.
Per fare ciò, assegnate all'elemento select l'attributo size. Questo size definisce la dimensione dell'area di visualizzazione del menu a discesa.
<select name="lingue" size="3"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Se l'elenco contiene più voci di quante ne possano essere visualizzate, è possibile scorrere l'elenco.
Di base, da un menu a discesa si può selezionare sempre una sola voce. Tuttavia, se necessario, è possibile consentire la selezione multipla.
<select name="lingue" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
La selezione multipla è possibile assegnando l'attributo multiple all'elemento select.
Inizialmente, in un menu a discesa non è preselezionata alcuna voce. Tuttavia, questo può essere modificato tramite l'uso di un attributo appropriato.
<select name="lingue" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option selected>CSS</option> <option>XML</option> <option>Java</option> </select>
Per preselezionare una voce, basta assegnare all'elemento option corrispondente l'attributo selected.
È inoltre possibile preselezionare più voci. Basta utilizzare l'attributo selected più volte.
Pulsanti Radio
Attraverso i cosiddetti pulsanti radio potete definire gruppi di pulsanti.
Dal gruppo, gli utenti possono quindi selezionare una delle opzioni offerte.
I pulsanti radio sono definiti da elementi di input ai quali viene assegnata la combinazione attributo-valore type="radio".
<form action="form.php" method="post">
<p>Vuoi iscriverti alla newsletter?:</p>
<p>
<input type="radio" name="newsletter" value="si" /> Sì<br />
<input type="radio" name="newsletter" value="no" /> No
</p>
</form>
Utilizzate anche qui l'attributo name per assegnare un identificatore ai pulsanti radio. Tutti i pulsanti che hanno lo stesso nome appartengono allo stesso gruppo. Di questi pulsanti, è possibile selezionarne uno solo.
Attraverso l'attributo value si determina il valore di invio dei singoli pulsanti.
Per preselezionare un pulsante, assegnategli l'attributo checked.
<form action="form.php" method="post">
<p>Vuoi iscriverti alla newsletter?:</p>
<p>
<input type="radio" name="newsletter" value="si" /> Sì<br />
<input type="radio" name="newsletter" value="no" checked /> No
</p>
</form>
Tenete presente che è possibile effettuare una preselezione solo su un pulsante di un gruppo.
Caselle di controllo
Anche le caselle di controllo le conoscete da innumerevoli moduli.
Si tratta di un gruppo di rettangoli selezionabili, tra i quali gli utenti possono sceglierne uno, nessuno o più di uno.
<p>Quali argomenti ti interessano ancora?:</p>
<p>
<input type="checkbox" name="thema" value="html" /> HTML<br />
<input type="checkbox" name="thema" value="css" /> CSS<br />
<input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>
Le caselle di controllo sono definite tramite elementi input, cui è assegnata la combinazione attributo-valore type="checkbox". Ogni casella di controllo viene quindi assegnata un identificatore tramite l'attributo name. Tutte le caselle di controllo che hanno lo stesso nome appartengono a un gruppo. Attraverso l'attributo value si determina il valore inviato di ciascuna casella di controllo.
Campi di input nascosti
Potete definire all'interno dei moduli campi che sono invisibili per i visitatori. Quando il modulo viene inviato, i valori contenuti nei campi nascosti vengono trasmessi. Questo è interessante ad esempio quando si desidera calcolare dei valori tramite PHP e inviarli senza che gli utenti se ne accorgano.
I campi di input nascosti sono definiti tramite elementi input a cui è assegnata la combinazione attributo-valore type="hidden".
<input type="hidden" name="id" value="">
All'elemento viene assegnato un identificatore univoco tramite l'attributo name. Il valore del campo viene specificato tramite value. Questo può essere un valore statico oppure, ad esempio, si può assegnare dinamicamente tramite PHP o JavaScript.
Carica campi
Se volete consentire ai visitatori di caricare file, potete offrire un campo corrispondente. Ecco un esempio di come potrebbe apparire un'applicazione simile:
<form action="form.php" method="post" enctype="multipart/form-data"> <p>La tua scelta:<br> <input name="Datei" type="file" /></p> </form>
Nel browser appare così:
I campi di caricamento sono definiti tramite elementi input con la combinazione attributo-valore type="file". Quando usi questo tipo di campo nel tag <form> iniziale, specifica method="post". Inoltre, lì dovrebbe anche essere presente la combinazione attributo-valore enctype="multipart/form-data". Solo in questo modo i file verranno effettivamente trasmessi. Se questa specifica viene ignorata, verrà inviato solo il nome del file.
Pulsanti per inviare e annullare
Per poter inviare i dati del modulo è ovviamente necessario un pulsante corrispondente.
Per inviare i moduli si usa la seguente sintassi:
<input type="submit" value="Invia" />
In questo caso, il valore dell'attributo value determina ciò che appare sul pulsante.
L'opposto di questi pulsanti di invio sono i pulsanti di annullamento.
Facendo clic su un pulsante del genere, tutti i contenuti del modulo saranno cancellati. La sintassi di questi pulsanti è la seguente:
<input type="reset" value="Annulla" />
Anche in questo caso: L'etichettatura viene definita tramite il valore dell'attributo value.
Potete inoltre definire pulsanti mediante l'elemento button.
Vantaggio di questa variante: siete molto flessibili. Infatti, potete determinare voi stessi l'aspetto e la funzionalità di questi pulsanti.
<button name="clicca" type="button" value="Sorpresa" onclick="alert('Sei sicuro?');">Clicca su di me</button>
Nell'esempio attuale, è possibile che cliccando sul pulsante si apra una finestra di dialogo JavaScript tramite l'evento onclick. L'aspetto del pulsante è determinato dal contenuto tra i tag iniziale e finale di <button>. A proposito, questo può essere qualsiasi contenuto. Quindi, non solo il testo è consentito. Potete anche specificare un elemento img qui per generare un pulsante grafico.
