Esempio di Form


NomeINPUT TYPE="TEXT"
Chiave SegretaINPUT TYPE="PASSWORD"
INPUT TYPE="BUTTON"
Campo nascosto INPUT TYPE="HIDDEN"



IMG
IMG border="2"
IMG width="30" height="20"


MaschioRADIO CHECKED
Femmina RADIO


Sport Praticati
Nuoto (INPUT TYPE="CHECKBOX" CHECKED)
Tennis (INPUT TYPE="CHECKBOX")
Calcio (INPUT TYPE="CHECKBOX")
Atletica (INPUT TYPE="CHECKBOX")



Comune Residenza
(SELECT)


Provincia Residenza
(SELECT MULTIPLE)


hobby:
(TEXTAREA ROWS="4" COLS="30")


(INPUT TYPE="SUBMIT")

(INPUT TYPE="RESET")

(INPUT TYPE="IMAGE")




Da HTML.it

INPUT

Per quel che riguarda i campi dei form il tag più utilizzato è l'<input>, che è senza chiusura. Per specificare undeterminato tipo di campo è sufficiente indicare il tipo di input.

Ad esempio:

<input type="text">

crea un campo di testo.

<input type="button">

crea un bottone.

I vari <input> sono dotati di attributi che consentonodi indicare il tipo di campo, il nome (ad esempio per interagire con JavaScript), e il valore (per lo più il testo visualizzato).


FORM

Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali, come il forum di HTML.it .

Per organizzare questo genere di servizi è necessario raccogliere in qualchemodo i dati dell'utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).

L'invio dei dati è solitamente organizzato in due parti:

Noi ci occuperemo della sola pagina principale, dal momento che il modo incui struttura una pagina di programmazione esula dagli obiettivi della presenteguida.

Name e action

Per creare una pagina con dei moduli, bisogna utilizzare l'apposito tag <form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form> lasciauno spazio prima dell'apertura e dopo la chiusura.

<form name="datiUtenti"action="paginaRisposta.php">
...
</form>

Nel caso in non si desideri avere dello spazio superfluo è possibilemodificare i bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:

<form name="datiUtenti" style="border:0px"action="paginaRisposta.php">

Come si può vedere, "name" serve per indicare il nome del form, "action" indica l'URL del programma o della pagina dirisposta che processerà i dati.

Grazie all'"action" è anche possibile far sì che i dativengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:

<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito"
enctype="text/plain" method="POST">

vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.

Method

Quando creiamo un form possiamo scegliere due metodi di invio: GETe POST.

Con il metodo GET la pagina di risposta viene contattata e idati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (piùprecisamente nella "query string", cioè nella "stringa di interrogazione") secondo questa forma:

paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.

Alcuni server hanno tuttaviahanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 carattericomplessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi perl'invio in get è:

<form name="datiUtenti" action="paginaRisposta.php"method="GET">

Nel metodo POST invece l'invio dei dati avviene in due stepdistinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri noncompaiono nella query string (dunque se non si desidera che i parametri siano mostrati all'utente questo metodo è preferibile).

In questo caso non ci sonolimiti sulla lunghezza dei caratteri. La sintassi è:

<form name="datiUtenti" action="paginaRisposta.php"method="POST">

Enctype (tipo di codifica)

Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito ad errori(ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottintesol'invio di semplice testo.

A volte però, come quando è necessario inviare un'immagine, è tuttavia indispensabile dichiarare espressamente quali dativogliamo inviare. Per farlo è necessario utilizzare l'attributo "enctype" ("encoding type", cioè "tipodi codifica").

Come dicevamo normalmente non è necessario farlo, perché viene sottintesoquesto tipo di sintassi:

<form name="datiUtenti" action="paginaRisposta.php"enctype="text/plain">

Ma nel caso di invio di immagini dovremo dichiarare:

<form name="datiUtenti" action="paginaRisposta.php"method="post" enctype="multipart/form-data">

target

Grazie all'attributo "target" è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente (o in una determinata parte di un frameset):

Copyright ©2007