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.
- 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.
<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:
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.
L'attributo value imposta il valore di default dei singoli elementi.
