Moduli


I moduli, o form, rendono interattive le pagine Web. Attraverso essi è infatti possibile per il browser interagire con l'utente e trasferire informazioni al server, dove possono essere utilizzate per creare dinamicamente pagine personalizzate (sulla base, per esempio, dei risultati di una ricerca su database o di altre azioni eseguite sul lato server).


Per creare un elemento modulo si usa il tag:

<form action="URI" method="post" | "get">....</form>

L'attributo ACTION specifica l'URI della risorsa a cui il browser invierà i dati. METHOD indica il metodo utilizzato nella trasmissione dei dati:

Nel modulo possono essere usati altri elementi, ma non è consentito l'annidamento di moduli.


Un modulo può contenere più elementi INPUT, aventi diverse funzioni, definiti nel modo seguente:

<input type="text"|"password"|"radio"|"checkbox"|
                    "submit"|"reset"|"button"|"image"
           name="string" [value="string"] [checked] [size="n"]
           [maxlength="n"] [src="URL"]
           [align="top"|"middle"|"left"|"right"] >

I tipi e le funzioni degli elementi INPUT, definiti dall'attributo TYPE, sono:


<select name="string" >......</select>

crea un menu di voci opzionali. Le singole voci sono definite dall'elemento <option>:

<option value="string" [selected] > ...... </option>

Se una voce è SELECTED, sarà quella selezionata per default.



<textarea name="string" rows="n" cols="n">.......</textarea>

crea un'area di testo su più righe, utile per immettere più stringhe di testo (es.  commenti, proposte). Le dimensioni dell'area di testo sono definite dagli attributi COLS e ROWS.


Esempio

<html>
<head>
<title>I Forms</title>
</head>
<body>
<form action="http://www.esempio.com/cgi-bin/esempio.cgi"
method="post">
<p align="left">TEXT:</p>
<input type="text" value="Testo di default" size="20">
<p align="left">RADIO:</p>
<input type="radio" name="uno" value="uno1" checked>Prima opzione<br />
<input type="radio" name="uno" value="uno2">Seconda opzione<br />
<input type="radio" name="uno" value="uno3">Terza opzione<br />
<p align="left">CHECKBOX:</p>
<input type="checkbox" name="uno">Prima opzione<br />
<input type="checkbox" name="due">Seconda opzione<br />
<input type="checkbox" name="tre">Terza opzione<br />
<p align="left">SELECT:</p>
<select name="uno">
<option value="uno" selected>uno</option>
<option value="due">due</option>
<option value="tre">tre</option>
<option value="quattro">quattro</option>
</select>
<p align="left">RESET:</p>
<input type="reset" value="cancella tutto">
<p align="left">SUBMIT:</p>
<input type="submit" value="spedisci i dati">
</form>
</body>
</html>