Introduzione

Prima di passare alla trattazione degli argomenti, e' bene precisare che le difficolta' di comprensione dei moduli HTML sono giustificabili con la singolarita' che essi costituiscono nella normale programmazione ipertestuale. Il grosso degli elementi messi a disposizione da HTML, infatti, permette al visitatore di visualizzare i contenuti del nostro sito, ma non di interagire con esso. In altre parole il rapporto utente/pagina diventa unidirezionale e statico. Con i moduli, al contrario, l'utente puo' interagire con il sito spedendo un proprio commento, avanzando richieste senza necessita' di scrivere via e-mail, firmando guestbook, rispondendo a sondaggi e cosi' via. Tutto questo rende il rapporto bidirezionale ed e' possibile solo grazie all'intervento di programmi residenti su server, che prendono il nome di CGI (Common Gateway Interface). Questi programmi rendono possibile cio' che altrimenti non lo sarebbe agendo dal lato client. Questo vuol dire che in realta' la gestione dei moduli dipende in misura preponderante dal server, piuttosto che dalla programmazione HTML in se' e per se'. Perche' un form HTML funzioni e' necessario disporre di un CGI residente sul proprio server o su altro sito. Il Web, come al solito, non lesina servizi gratuiti indirizzati proprio a questo scopo. Spesso si tratta di CGI gratuiti messi a disposizione dei propri cittadini da comunita' virtuali (Geocities, Tripod, Xoom ecc.), ma non mancano servizi specifici svincolati da tali comunita'. Per i piu' smaliziati e' consigliato rivolgersi alla fonte, ed impostare in prima persona sul proprio server uno dei tanti programmi CGI distribuiti gratuitamente dai propri creatori e raccolti in siti specifici.

A dire il vero, un form puo' essere creato anche evitando il passaggio per un CGI, ma con svantaggi e limiti che non possono essere taciuti, e che rendono un tale utilizzo l'estrema ratio da adottare solo in casi di assoluta necessita'. Nelle pagine seguenti parleremo nel dettaglio anche di questa possibilita'.

La creazione di un modulo consta di due fasi:
· impostazione dei tag per la creazione del modulo, dei campi e del tasto di spedizione;
· creazione di uno script CGI su server (o richiamo di uno script gia' impostato)

FORM HTML: i comandi

I moduli sono stati introdotti dalla versione HTML 2.0.

Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form.
<FORM>

<FORM></FORM>

Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso, che puo' variare a seconda dei tag che vedremo oltre. Non e' possibile inserire un modulo all'interno di un altro. In altre parole i form non permettono nidificazioni.

La sintassi del primo tag FORM e' la seguente:

<FORM method="get|post" action="http://www.tuosito.com/cgi-bin/nome_script.cgi">

Se method e' impostato come get i dati vengono spediti al server e separati in due variabili.
Per questo metodo il numero massimo di caratteri contenuti nel form e' di 255.
Utilizzando "method=post" i dati vengono ricevuti direttamente dallo script CGI senza un preventivo processo di decodifica. Questa caratteristica fa si' che lo script possa leggere una quantita' illimitata di caratteri.

Impostato il primo tag <FORM> del modulo e' possibile, sempre che lo script CGI lo permetta, creare alcuni elementi molto utili al fine di una corretta gestione dei dati:

<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Titolo del form">

Questo codice determina il titolo (subject) del messaggio che riceverai via e-mail, e che conterra' il contenuto del form. E' molto utile ricevere messaggi con un proprio titolo, soprattutto per chi usa dei filtri per la posta, ma anche per l'indicizzazione della corrispondenza.

<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.tuosito.it">

Questo codice e' molto utile, in quanto una volta compilato e spedito correttamente il form, da' in risposta una pagina HTML successiva, all'interno della quale e' possibile inserire qualsiasi commento. La cosa piu' ovvia da fare e' visualizzare una pagina di conferma "il tuo form e' stato correttamente inoltrato", ma si puo' anche rimandare direttamente alla pagina principale del sito. Si tratta di comandi non standardizzati che variano a seconda del CGI utilizzato. Quindi il codice riportato sopra non funziona universalmente.

<INPUT>

Il tag di base per la definizione degli elementi di un form e' <INPUT>, che viene utilizzato per aggiungere pulsanti, menu di scelta, password ecc. a <INPUT> possono venire assegnati 8 valori differenti, che andiamo a spiegare.

type="TEXT"

<INPUT type="TEXT" name="nome" maxlength="40" size="33" value="Il tuo nome">

Questo valore crea i tipici campi di testo, dove usualmente vengono richiesti dati quali il nome o l'indirizzo e-mail. E' un valore usato soprattutto per informazioni non predefinite che variano di volta in volta. TEXT ha tre attributi aggiuntivi presenti anche nell'esempio: maxlength (il numero massimo di caratteri inseribili nel campo, oltre il quale non e' possibile aggiungere), size (la larghezza della stringa all'interno della pagina) e value (visualizza un testo di default all'interno della stringa).
ESEMPIO

type="PASSWORD"

<INPUT type="PASSWORD" name="nome" maxlength="40" size="33">

Questo campo funziona similmente a TEXT visto in precedenza, ma con una piccola differenza che ne giustifica il nome: quando si digita all'interno della stringa bianca, non appaiono le lettere ma i classici asterischi delle password. In realta' i dati non vengono in alcun modo codificati, per cui rimane un'insicurezza di fondo che questo comando non elimina.
ESEMPIO

type="CHECKBOX"

<INPUT type="CHECKBOX" name="età" value="yes" checked>

Questo attributo viene solitamente utilizzato per informazioni del tipo "si/no" e "vero/falso". Crea delle piccole caselle quadrate da spuntare o da lasciare in bianco. Se la casella e' sputanta input restituisce un valore al CGI, al contrario non restituisce alcun valore. Value impostato su "yes" significa che di default la casella e' spuntata. Checked controlla lo stato iniziale della casella, all'atto del caricamento della pagina.
ESEMPIO

type="RADIO"

<INPUT type="RADIO" name="giudizio" value="sufficiente">
<INPUT type="RADIO" name="giudizio" value="buono">
<INPUT type="RADIO" name="giudizio" value="ottimo">

Questo attributo ha funzioni simili a quello visto in precedenza, ma presenta piu' scelte possibili. Selezionando una voce tra quelle presenti, qualora abbiano tutte valore "name" identico, si deselezionano automaticamente le altre.
SUFFICIENTE
BUONO
OTTIMO

type="SUBMIT"

<INPUT type="SUBMIT" value="spedisci">

Il classico bottone che invia il form con tutti i suoi contenuti. La grandezza del bottone dipende dalla lunghezza del testo.
ESEMPIO

type="RESET"

<INPUT type="RESET" value="Ricomincia">

Bottone che reimposta l'intero form eliminando i dati inseriti.
ESEMPIO

type="IMAGE"

<INPUT type="IMAGE" src="pulsante.gif">

Funzione simile a quella del tasto "SUBMIT" ma con la differenza che al posto del bottone di default, viene visualizzata un'immagine.
ESEMPIO

TEXTAREA

<TEXTAREA cols=40 rows=5 WRAP="physical" name="commento"></textarea>

Textarea e' utilizzato per commenti o campi che prevedono l'inserimento di molto testo. La larghezza e' impostata da "cols" e l'altezza da "rows". WRAP="physical" stabilisce che qualora il testo inserito superi la larghezza della finestra, venga automaticamente riportato a capo.
ESEMPIO

SELECT

<SELECT size=1 cols=4 NAME="giudizio">
<OPTION selected Value=nessuna>
<OPTION value=buono> Buono
<OPTION value=sufficiente> Sufficiente
<OPTION Value=ottimo> Ottimo
</select>

Select e' un elemento che permette la creazione di elenchi a discesa con varie possibilita' di scelta. Nel nostro esempio abbiamo simulato la richiesta di un giudizio su un sito Web.
ESEMPIO