Gestire le form con DHTML
Massimiliano Valente
Nell'economia generale di un sito Web, la loro presenza Φ, oltre che una consuetudine, un elemento di fondamentale importanza per stabilire un rapporto pi∙ diretto con gli utenti
Introdotte nella versione 2.0 di Html, fino all'avvento dell'Html dinamico le form hanno
rappresentato gli unici elementi realmente interattivi all'interno di pagine Web. La loro
creazione 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 una form pu≥ essere spedita
anche direttamente, senza l'intervento di un CGI, attraverso l'inserimento di una semplice
stringa di codice:
form action="mailto:valente@tecnet.it" method="post"
L'inconveniente maggiore di questa scelta Φ nella mancata formattazione del contenuto
del form; laddove, invece, il CGI agisce in modo molto efficace. Quando una form Φ
inviata al server, il valore di ciascuno dei controlli corrispondenti Φ incluso in una
singola stringa. Essa Φ composta da coppie di dati nome-valore concatenati dal simbolo
½&╗. A questo carattere vengono assegnati tutti i valori degli elementi denominati.
Di seguito riportiamo il confuso risultato di una form nella 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
L'Html dinamico permette di gestire la convalida e la formattazione diretta di dati dal
lato client, utilizzando il modello a oggetti e agendo sui controlli intrinseci. L'esempio
principale considerato in queste pagine Φ concettualmente semplice e compatibile con le
versioni di ultima generazione di Navigator e Internet Explorer. Il modulo che abbiamo
utilizzato simula un normalissimo guestbook e si compone di 6 voci. A ognuna corrisponde
un layer che, a seconda delle scelte, viene nascosto o esposto alla vista del browser. ╚
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.
╚ prima di tutto necessario impostare la 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 sono indirizzati i dati della form, dopo la pressione del tasto ½Submit╗, e che provvede a ridirezionarli a un indirizzo precedentemente impostato. Il campo name="subject" indica l'oggetto (subject) della e-mail che conterrα i dati della form; mentre il campo next-url indica la pagina che viene caricata dopo la compilazione della form. Questa pagina deve essere creata e inserita nel sito e, spesso, si limita ad avvertire che i dati sono stati correttamente inoltrati. Il codice che segue l'impostazione della form, contenuto all'interno del tag INPUT, indica i nomi delle 6 voci che compongono il modulo: nome, home page, giudizio, comunicazioni, miglioramenti e commenti.
Problemi e soluzioni
Il modello di Html dinamico adottato da Netscape non prevede che i layer e le form
possano lavorare congiuntamente. Ci≥ perchΘ Netscape considera i layer come documenti
indipendenti l'uno dall'altro e impedisce alle form di gestirne l'ingresso. 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 Φ quella di inserire una form in ogni layer;
scelta, questa, che a sua volta crea l'interrogativo su come riunire in una sola form i
dati provenienti da moduli differenti. Una delle caratteristiche principali delle form
Html Φ, infatti, proprio quella di evitare l'inserimento di moduli all'interno di altri
moduli. Attraverso l'inserimento di codice JavaScript, Html dinamico permette di risolvere
l'incognita con la creazione di una 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, sono 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 suddivisi 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 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 a oggetti di Netscape ha accesso a un numero limitato di elementi rispetto a
IE. Il browser Microsoft, per esempio, rende programmabile l'elemento DIV, e il suo
contenuto, indifferentemente dalla posizione nel quale Φ posizionato all'interno del
documento, senza che sia necessario accedere al modello a 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 viene creato e si ha accesso al documento soltanto 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. La funzione:
function sendForm()
viene richiamata quando si clicca sul tasto ½spedisca╗ nell'ultimo layer. Mediante l'oggetto Form Φ possibile gestire i singoli controlli e inviare o reimpostare la form.
Come l'interpretano i browser
Tra tali oggetti e il documento intercorre una relazione speciale che permette di
accedere in modo diretto ai moduli. ╚ possibile inserire testo e immagini all'interno dei
vari layer senza alcuna difficoltα d'interpretazione da parte di IE. Netscape, al
contrario, rivela alcuni problemi per la gestione di immagini animate che creano una sorta
di sovrapposizione.
Le nuove raccomandazioni di HTML 4.0 permettono di gestire in modo pi∙ interattivo le
form e soprattutto il loro aspetto. I fogli di stile consentono di formattare, nascondere
ed esporre il contenuto dei diversi campi senza troppe difficoltα. Il modello a oggetti
adottato da IE, permette di compiere queste operazioni in modo semplice e intuitivo; per
questo motivo gli esempi che seguono sono compatibili esclusivamente con il browser
Microsoft. Seppure considerato singolarmente, il codice compilato pu≥ adattarsi in modo
del tutto intuitivo ad altri documenti. Grazie ai fogli di stile (CSS1) Φ, per esempio,
possibile nascondere i campi di una 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 inviati insieme alla form.
Le parole chiave
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 la visualizzazione dell'elemento.
Html non prevede funzioni predefinite per la convalida delle form. A colmare questa lacuna
interviene il linguaggio di scripting che, in questo modo, evita che tale attivitα sia
d'esclusiva competenza del server. La convalida immediata Φ un ottimo strumento per
filtrare l'input dell'utente. Il codice sottostante, 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'attributo ½sfondo╗ assicura che venga immesso un valore nella casella TEXT, e
dimostra come estendere il testo intrinseco nelle 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 nelle form non Φ sempre necessario usare degli script. ╚
possibile, infatti, creare elementi OPTION di diverso colore con semplice codice Html. ╚
bene precisare, per≥, che gli elementi OPTION rappresentano, per il modello ad 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 delle 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 nella stessa form:
<SCRIPT LANGUAGE="JavaScript">
function checkRadio(f)
{
if.disattiva.disabled=!f.Q1["altro"].checked;
if ("altro"==event.srcElement.id)
if.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 utilizzato con pulsanti d'invio e di reset, oltre che
con caselle di testo.
In risposta a un clic del mouse viene eseguito lo script specificato, che in questo caso
disattiva il campo TEXT.
(mvalente@tecnet.it)