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.
<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>
![]() |
![]() |
![]() |