Esempio di form in HTML

Il seguente documento HTML contiene una form con tutte le possibilità che essa offre.

<HTML> <HEAD> <TITLE>Form esemplificativa in HTML</TITLE> <H1>Prototipo di form in HTML </H1> </HEAD> Questo documento mostra tutte le possibilità che offrono le form in HTML <P>

<FORM ACTION="http://lisa.dfc.unifi.it/cgi-bin/post-query" METHOD="POST">

<HR> <H1>Campi di testo (INPUT)</H1>

Campo di base per inserimento di testo: <INPUT TYPE="text" NAME="var_1" VALUE=""> <P>

Campo per inserimento di testo con valore di default: <INPUT TYPE="text" NAME="var_2" VALUE="Questo e' il testo di default"> <P>

Campo per inserimento di testo di 40 caratteri: <INPUT TYPE="text" NAME="var_3" SIZE=40 VALUE=""> <P>

Campo per inserimento di testo, massimo 5 caratteri: <INPUT TYPE="text" NAME="var_5" SIZE=5 MAXLENGTH=5 VALUE=""> <P>

Campo per inserimento di password (sono visualizzzati degli *): <INPUT TYPE="password" NAME="chiave" SIZE=8 MAXLENGTH=8 VALUE=""> <HR>

<H1>Area di testo (TEXTAREA)</H1> Una area di testo di 60 colonne x 3 linee scorribile: <P> <TEXTAREA NAME="area_testo" COLS=60 ROWS=3>NOTA: Qui può essere inserito del testo di default. </TEXTAREA> <HR>

<H1>Caselle (CHECKBOX)</H1> Ecco qui due caselle: <INPUT TYPE="checkbox" NAME="Casella_1" VALUE="VERO">, di cui una selezionata di default: <INPUT TYPE="checkbox" NAME="Casella_2" VALUE="VERO" CHECKED> <HR>

<H1>Caselle con selezione esclusiva (RADIO)</H1> Si può selezionare una sola di queste caselle: <OL> <LI> <INPUT TYPE="radio" NAME="radio_1" VALUE="valore_1"> Prima scelta. <LI> <INPUT TYPE="radio" NAME="radio_1" VALUE="valore_2" CHECKED> Seconda scelta (selezionata di default). <LI> <INPUT TYPE="radio" NAME="radio_1" VALUE="valore_3"> Terza scelta. </OL> <HR>

<H1>Menu di opzioni (SELECT/OPTION)</H1> Una sola opzione selezionabile (la terza opzione è selezionata didefault): <SELECT NAME="primo_menu"> <OPTION>Prima opzione</OPTION> <OPTION>Seconda opzione</OPTION> <OPTION SELECTED>Terza opzione</OPTION> <OPTION>Quarta opzione</OPTION> <OPTION>Ultima opzione</OPTION> </SELECT> <P> Più opzioni selezionabili (la prima e terza delezionate per default): <SELECT NAME="secondo_menu" MULTIPLE> <OPTION SELECTED>Prima opzione</OPTION> <OPTION>Seconda opzione</OPTION> <OPTION SELECTED>Terza Opzione</OPTION> <OPTION>Quarta opzione</OPTION> <OPTION>Ultima opzione</OPTION> </SELECT> <P> <B>NOTA: Per selezioni multiple tenere premuto CTRL e fare click </B>

<!-- Assegnazione nascosta per l'utente con il tipo HIDDEN--> <INPUT TYPE="hidden" NAME="nascosto" VALUE="invisibile"> <HR>

<H1>Pulsanti speciali</H1> Pulsante di invio dati (SUBMIT): <INPUT TYPE="submit" VALUE="Invio dati al server"> <P> Pulsante di RESET (facoltativo): <INPUT TYPE="reset" VALUE="Cancella valori immessi"> <P> </FORM>

<HR> Fine della form. Qui il documento HTML può proseguire normalmente <HR> </HTML>

 Documento HTML prodotto.