I Form (moduli)

L'HTML mette a disposizione una serie di interessantissimi tag il cui scopo è quello di creare moduli con tanto di caselle di testo, opzioni, bottoni di invio ed altro ancora.

Il termine tecnico che riassume tutti questi elemento è form ed il loro scopo è quello di creare interazione e scambio dati tra gli utenti ed il sito.

I form HTML permettono la sola realizzazione dell'interfaccia del modulo, ma da soli non offrono il minimo controllo e la minima gestione sui dati.

Vediamo ora di capire come si creano form completi, quali tag ed elementi in generale sono coinvolti e quali sono le loro specifiche caratteristiche.

Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:

<form method="" action="">

</form>

I principali attributi, come visto nell'esempio, sono i seguenti:

• method - specifica il metodo di invio dei dati ed accetta i valori get o post;
• action - specifica lo script che riceverà, controllerà ed elaborerà i dati.

Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:

• input - genera la maggior parte degli elementi dei form HTML, a seconda del type specificato;
• select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;
• textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi lunghi.

Vediamo un esempio completo di form HTML:

<form method="post" action="esegui.asp">
Nome<br>
<input type="text" name="nome"><br>
Cognome<br>
<input type="text" name="cognome"><br>

Paese<br>
<select name="paese">
<option value="I">Italia</option>
<option value="E">Estero</option>
</select><br>
Sesso<br>

<input type="radio" name="sesso" value="M"> M<br>
<input type="radio" name="sesso" value="F"> F<br>
Hobby<br>
<input type="checkbox" name="hobby" value="S"> Sport<br>

<input type="checkbox" name="hobby" value="L"> Lettura<br>
<input type="checkbox" name="hobby" value="C"> Cinema<br>
<input type="checkbox" name="hobby" value="I"> Internet<br>
Commento<br>

<textarea name="commento" rows="5" cols="30"></textarea>
<br><br>
<input type="submit" name="invia" value="Invia i dati">
</form>

Il risultato è il seguente:

Nome

Cognome

Paese
Italia Estero
Sesso
M
F
Hobby
Sport
Lettura
Cinema
Internet
Commento

Vediamo quindi quali sono le caratteristiche e gli attributi più importanti degli elementi dei form HTML:

• caselle di testo - permettono di inserire testi brevi ed il type da impostare è text;
• selectbox - permettono di selezionare da un elenco il valore desiderato;
• radiobutton - permettono di selezionare una ed una sola opzione per gruppo ed il type da impostare è radio;
• checkbox - permettono di selezionare una o più opzioni per gruppo ed il type da impostare è checkbox;
• textarea - permettono di inserire testi lunghi e di impostare l'altezza (rows) e la larghezza (cols) dell'area;
• bottoni di invio - permettono di inviare i dati, specificando il type submit o button.

Ogni elemento dei form HTML ha una caratteristica in comune, ovvero la specifica del name che dev'essere diverso da elemento a elemento ed uguale solo per gruppi di elementi, come nel caso dei radiobutton e dei checkbox che chiedono uno stesso tipo di dato.

L'attributo value imposta il valore di default dei singoli elementi.

Torna indietro