Nell’economia generale di un sito Web, la presenza di form HTML è, oltre che una consuetudine, un elemento di fondamentale importanza per un rapporto più diretto con gli utenti. Introdotti nella versione 2.0 di HTML, i form sono stati, fino all’avvento dell’HTML dinamico, gli unici elementi realmente interattivi all’interno di pagine Web. La creazione di un form si articola in due fasi distinte: l’inserimento dei Tag HTML nel documento, e l’impostazione di uno script CGI sul server per gestire i contenuti del modulo inviato. Quest’ultima operazione non è obbligatoria, nel senso che un form può essere spedito anche direttamente, senza l’intervento di un CGI, attraverso l’inserimento di una semplice stringa di codice:

L’inconveniente maggiore di questa scelta è nella mancata formattazione del contenuto del form; laddove, invece, il CGI agisce in modo molto efficace. Quando un form viene inviato al server, il valore di ciascuno dei controlli corrispondenti è incluso in una singola stringa.Tale stringa è composta da coppie di valori nome-valore ed è delineata da "&" commerciali. Ad essa vengono assegnati tutti i valori degli elementi denominati, in una sorta di concatenamento.

Ecco, di seguito, il confuso risultato di un form nel quale, senza il passaggio per un CGI, sono stati inseriti alcuni dati personali:

Nome=Massimiliano+Valente&E-mail=valente@tecnet.it&citta%27=Roma&eta%25

Mentre un CGI avrebbe dato il seguente risultato:

(Nome) Massimiliano Valente

(Email) valente@tecnet.it

(Città) Roma

(Età) 25

HTML dinamico permette di gestire la convalida e la formattazione diretta di dati dal lato client, utilizzando il modello di oggetti, e agendo sui controlli intriseci.

L’esempio principale considerato in queste pagine è concettualmente semplice e compatibile con le versioni di ultima generazione di Netscape e Internet Explorer.

Il modulo dell’esempio simula un normalissimo guestbook e si compone di 6 voci. Ad ognuna di esse corrisponde un Layer che, a seconda delle scelte, viene nascosto o esposto alla vista del browser. E’ bene precisare che tutti i Layer vengono caricati all’apertura della pagina, e che quindi la comunicazione tra server e client si limita a tale operazione.

E’ prima di tutto necessario impostare il Form inserendo i seguenti Tag:

<form NAME="mainForm" action="http://www.server.com/cgi-bin/mail.pl?nome "

method="post">

<input type="hidden" name="subject" VALUE="Guestbook">

<input type="hidden" name="next-url" VALUE="pagina_di_risposta.htm">

Il codice contenuto nella prima riga si riferisce al CGI verso il quale vengono indirizzati i dati del Form, dopo la pressione del tasto "Submit", e che provvede a reindirizzarli ad un indirizzo precedentemente impostato.

Il campo name="subject" indica l’oggetto (subject) della mail che conterrà i dati del form; mentre il campo "next-url" indica la pagina che viene caricata successivamente alla compilazione del form. Tale pagina deve essere creata ed inserita nel sito e, spesso, si limita ad avvertire che i dati sono stati correttamente inoltrati.

Il codice che segue l’impostazione del form, contenuto all’interno di Tag "INPUT", indica i nomi delle sei voci che compongono il modulo: nome, homepage, giudizio, comunicazioni, miglioramenti e commenti.

Il modello di HTML dinamico adottato da Netscape non prevede che i Layer e i Form possano lavorare congiuntamente. Ciò perché Netscape considera i Layer come documenti indipendenti l’uno dall’altro, impendendo ai form di gestirne l’Input. In altre parole, Netscape non crea le correlazioni necessarie affinchè, alla pressione del tasto "Submit" le informazioni dei vari Layer vengano raggruppate e spedite.

La soluzione più ovvia a questo problema è nell’inserimento di un form in ogni Layer. Scelta, questa, che a sua volta crea l’interrogativo su come riunire in un solo form i dati provenienti da moduli differenti. Una delle caratteristiche principali dei form HTML è, infatti, proprio quella di evitare l’inserimento di moduli all’interno di altri moduli.

HTML dinamico permette, attraverso l’inserimento di codice JavaScript, di ovviare a tale problema attraverso la creazione di un Form principale (mainForm) che raccoglie e gestisce i valori provenienti dagli altri moduli.

L’aspetto, la larghezza, l’altezza e il posizionamento dei vari Layer, vengono gestiti dai fogli di stile presenti tra i Tag <HEAD>:

<STYLE TYPE="text/css">

<!--

#nomeLyr {position:absolute; left:100px; top:100px; width:400px; visibility:visible; font-size:14px; font-family:arial; font-weight:bold; color:blue;}

Dove i valori numerici sono espressi in pixel (px) e i Layer suddivi per nome: #nomeLyr, #homepageLyr, #giudizioLyr, #comunicazioniLyr, #miglioramentiLyr e #commentiLyr.

"Left" indica la distanza dal margine sinistro della pagina, mentre "Top" da quello superiore. "Width" determina la larghezza dei vari Layer e "visibility:visible", quale dei Layer debba essere esposto all’atto del caricamento della pagina. Il codice successivo gestisce la formattazione del testo secondo le regole dei fogli di stile. Il riferimento all’interno del documento avviene tramite il Tag <DIV ID=#nomeLyr>, compatibile con Netscape e IE (quest’ultimo non implementa il Tag <LAYER>, riconosciuto esclusivamente da Netscape).

Il modello di oggetti di Netscape ha accesso ad un numero limitato di elementi rispetto a IE. Il browser di Microsoft, per esempio, rende programmabile l’elmento DIV e il suo contenuto, in qualsiasi parte del documento esso sia posizionato, senza che sia necessario accedere al modello di oggetti. In Navigator 4, al contrario, lo stile deve modificare il modello per accedere agli elementi. Ciò avviene attraverso l’esposizione di un nuovo documento all’interno dei Layer.

Così, mentre IE accede a tutti gli elementi del documento, Netscape accede soltanto a quelli esposti all’interno della collezione Layer:

n = (document.layers) ? 1:0

ie = (document.all) ? 1:0

Se si rimuovono le informazioni relative al posizionamento del Tag DIV, l’oggetto Layer non è creato e si ha accesso al documento solanto dal suo livello più alto.

La funzione "avanti":

function avanti(hideobj,showobj) {

hidenon(hideobj)

shownon(showobj)

}

gestisce lo script che permette di avanzare nella visualizzazione progressiva dei Layer.

Le funzioni in JavaScript sono delle istruzioni speciali che contengono altre istruzioni da eseguire quando richiamate da un gestore di eventi.

La funzione:

function sendForm()

viene richiamata quando si clicca sul tasto "spedisca" nell’ultimo Layer.

Mediante l’oggetto "Form" è possibile gestire i singoli controlli ed inviare o reimpostare il form. Tra tali oggetti e il documento intercorre una relazione speciale che permette di accedere in modo diretto ai moduli.

E’ possibile inserire testo e immagini all’interno dei vari Layer senza alcuna difficoltà di interpretazione da parte di IE. Netscape, al contrario, rivela alcuni problemi per la gestione di immagini animate che creano un sorta di sovrapposizione.

Le nuove raccomandazioni di HTML 4.0 permettono di gestire in modo più interattivo i form e soprattutto il loro aspetto. I fogli di stile consentono di formattare, nascondere ed esporre il contenuto dei diversi campi di un form senza troppe difficoltà. Il modello di oggetti adottato da IE permette di compiere queste operazioni in modo semplice ed intuitivo, e per questo motivo gli esempi che seguono sono compatibili esclusivamente con il browser Microsoft. Seppure considerato singolarmente, il codice che segue può adattarsi in modo del tutto intuitivo ad altri documenti.

Grazie ai fogli di stile (CSS1) è, per esempio, possibile nascondere i campi di un form per esporli successivamente al verificarsi di eventi generati dagli utenti:

<INPUT TYPE="checkbox" ONCLICK="document.all.mostraBox.style.display = (document.all.mostraBox.style.display == 'none') ? '' : 'none'"><BR>

<INPUT TYPE=TEXT STYLE="display:none" ID="mostraBox" size=25>

Si tratta di controlli intrinseci che vengono inviati insieme al form.

L’attributo "display" dei fogli di stile controlla, secondo le specifiche ufficiali di CSS1, il comportamento generale degli altri elementi piuttosto che specificarne direttamente l’aspetto. Nel particolare identifica quando un elemento associato a uno stile deve essere usato. Quattro parole chiave ne identificano il comportamento:

Inline: crea un nuovo box nella stessa linea degli elementi di testo adiacenti;

Block: un nuovo box creato in posizione relativa agli elementi che lo circondano

List-item: permette di aggiungere marcatori di elementi di elenco;

None: disabilita al visualizzazione dell’elemento.

HTML non prevede funzioni predefinite per la convalida dei form. A colmare questa lacuna interviene il linguaggio di scripting che, in questo modo, evita che tale attività sia di esclusiva competenza del server. La convalida immediata è un ottimo strumento per filtrare l’INPUT dell’utente.

Il codice seguente, per esempio, convalida l’INPUT assegnando un valore diverso ai campi compilati, rispetto a quelli lasciati in bianco:

function checkSfondo(f) {

for (var intLoop = 0; intLoop<f.elements.length; intLoop++)

if ("Sfondo"==f.elements[intLoop].className) {

alert("Tutti i campi in gialli devono essere compilati.");

return false;

}

}

L’attibuto "sfondo" assicura che venga immesso un valore nella casella TEXT, e dimostra come estendere il testo intrinseco nei form HTML.

Il colore viene assegnato dal foglio di stile:

<STYLE TYPE="text/css">

.sfondo {background: #FFFF80}

</STYLE>

L’elemento TEXT crea una casella di testo a riga singola, mentre SELECT consente di visualizzare un elenco di opzioni.

Per avere effetti particolari sui Form non è sempre necessario usare degli script.

E’ possibile, infatti, creare elementi OPTION di diverso colore con semplice codice HTML. E’ bene precisare, però, che gli elementi OPTION rappresentano, per il modello di oggetti dell’HTML dinamico un’eccezione, in quanto non vengono esposti nell’insieme "all" del documento. Ciò significa che l’elemento OPTION viene esposto soltanto mediante il corrispondente elemento select di livello superiore.

<SELECT STYLE="width:90pt">

<OPTION STYLE="background:yellow; color:black" VALUE="Giallo">

Ottima

</OPTION>

<OPTION STYLE="background:green; color:white" VALUE="Verde">

Buona

</OPTION>

<OPTION STYLE="background:red; color:white" VALUE="Rosso">

Discreta

</OPTION>

<OPTION STYLE="background:blue; color:white" VALUE="Blue">

Sufficiente

</OPTION>

</SELECT>

L’elemento LABEL descrive e incorpora gli eventi intrinseci del form quando la pagina viene visualizzata da un browser a sintesi vocale. Le etichette possono essere implicite o esplicite, e risultano utili con caselle di controllo e pulsanti di opzione. Un’etichetta associata a un pulsante consente di selezionare e deselezionare lo stesso.

Seguendo questo principio si può creare un modulo all’interno del quale un elemento TEXT, se selezionato, deseleziona gli elementi RADIO presenti nel form stesso:

<SCRIPT LANGUAGE="JavaScript">

function checkRadio(f) {

f.disattiva.disabled=!f.Q1["altro"].checked;

if ("altro"==event.srcElement.id)

f.disattiva.focus();

}

</SCRIPT>

Quando un utente fa clic su un elemento LABEL, l’elemento e i suoi corrispondenti di livello superiore ricevono l’evento onclick:

<FORM NAME="Demo" ONCLICK="checkRadio(this);">

<P><INPUT ID="edicola" TYPE=RADIO NAME="Q1" VALUE="edicola">

<LABEL FOR="edicola"> In edicola</LABEL>

<INPUT ID="disattiva" NAME="altro" TYPE=TEXT DISABLED>

</FORM>

OnClick è un gestore di eventi utlizzato con pulsanti di invio e di reset, oltre che con caselle di testo.

In risposta ad un clic del mouse viene eseguito lo script specificato, che in questo caso disattiva il campo TEXT.