HTML.itHTML.it


 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: GET e POST.

Con il metodo GET la pagina di risposta viene contattata e i dati 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:

http://www.html.it/esempioForm/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 tuttavia hanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per l’invio in get è:

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

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).
In questo caso non ci sono limiti 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é è sottinteso l’invio di semplice testo. A volte però, come quando è necessario inviare un’immagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo è necessario utilizzare l’attributo "enctype" ("encoding type", cioè "tipo di codifica").

Come dicevamo normalmente non è necessario farlo, perché viene sottinteso questo 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">

    Torna a inizio pagina