Struttura del tag <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 qualche modo 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:

• una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, inserire un'immagine
• una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un
  cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale, dal momento che il modo in cui struttura una pagina di programmazione esula dagli obiettivi della presente guida.

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> lascia uno 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 è possibile modificare 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 di risposta che processerà i dati.

Grazie all'"action" è anche possibile far sì che i dati vengano 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):

<form name="datiUtenti" action="paginaRisposta.php" method="get" target="_blank">