Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Moduli interattivi

Moduli interattivi

di GDesign, 27 Giugno 2002

Versione StampabileDownload in pdf


Uno dei metodi fondamentali per interagire con gli utenti di un sito web è quello di porre domande e raccogliere delle risposte. Il linguaggio Html ci dà la possibilità di creare dei moduli interattivi che hanno come fine quello di interagire con gli utenti e raccogliere dati. Essenzialmente un modulo interattivo è un'insieme di testi e funzioni che consentono ai visitatori di compilare ed inviare dati al server o al gestore del sito. Per inserire un modulo in una pagina web, si usa la coppia di tag <FORM>......</FORM>; all'interno di questi tag, mediante l'uso di altri tag si impostano i vari dispositivi grafici per la raccolta dei dati. Tali dispositivi vengono anche definiti controlli e si dividono in due categorie fondamentali:quelli che funzionano con l'etichetta INPUT e quelli che hanno le proprie etichette. Vediamo allora quali sono i controlli di tipo INPUT:

<INPUT TYPE=text NAME=name>
Campo di testo a 1 riga
la casella di testo è il campo di base per digitare una riga di testo.

<INPUT TYPE=password NAME=name>
Campo di testo password
la casella della password funziona allo stesso modo della casella di testo, con la differenza che oscura la digitazione con dei caratteri asterisco.

<INPUT TYPE=checkbox NAME=name>
Ckeck box
la casella di controllo viene usata per il tipo di dati si/no.

<INPUT TYPE=radio NAME=name VALUE=value>
Radio button
pulsante d'opzione che si usa per l'immissione di dati a scelta multipla. In una serie può essere attivato solo un pulsante alla volta.

<INPUT TYPE=submit NAME=name>
Pulsante di inoltro
il pulsante di inoltro che consente di inviare il modulo.

<INPUT TYPE=reset NAME=name>
Pulsante di reset
il pulsante reset ripristina il modulo sui valori predefiniti.

<INPUT TYPE=image NAME=name SRC=invia.gif>
Submit con img
anziché il pulsante di inoltro, si può usare un'immagine con tutti i suoi attributi per inviare il modulo.

Vediamo adesso due controlli che hanno le proprie etichette:la casella di selezione e l'area di testo.

<SELECT>
<OPTION>Opzione 1
<OPTION>Opzione 2
<OPTION>Opzione 3
<OPTION>Opzione 4
</SELECT>
Select box
la casella di selezione è un tipo di controllo per l'immissione di dati a scelta multipla. Questa casella si usa quando si hanno elenchi troppo lunghi per i pulsanti d'opzione.

<TEXTAREA>Testo di default</TEXTAREA>
Text area
l'area di testo consente di digitare testi di una certa lunghezza.

Adesso che conosciamo i controlli maggiormente usati in un modulo interattivo, viene da chiedersi come fanno ad arrivarci i dati raccolti attraverso il modulo stesso. La risposta a questa domanda và oltre il campo dell'Html, in quanto i dati del modulo non vengono gestiti direttamente dalla pagina web ma vengono elaborati attraverso appositi script di tipo CGI (Common Gateway Interface) presenti sul server del sito. La gestione e la realizzazione di script CGI è un argomento abbastanza complesso, e non è necessario che, chiunque voglia realizzare un modulo interattivo per il proprio sito web, ne sia a conoscenza. Infatti, sui server dei siti web, si trovano spesso apposite funzioni CGI già configurate e funzionanti; è sufficiente quindi chiedere all'amministratore del server, sul quale avete il vostro sito web, quali sono gli script CGI installati e dove si trovano.

Supponiamo ad esempio, che l'amministratore del server abbia installato nella directory "cgi-bin" del nostro spazio web lo script "formail.pl" che ha il compito raccogliere i dati ed inviarceli via e-mail. Allora per creare il modulo interattivo scriveremo il seguente codice:

<FORM ACTION="http://www.nomesito.suffisso/cgi-bin/formail.pl" METHOD="post"> --controlli del modulo-- </FORM>

I due attributi ACTION e METHOD sono entrambi obbligatori. ACTION="destinazione" specifica la destinazione dei dati. METHOD="tipo di elaborazione" specifica il trattamento da effettuare ai dati e puo essere GET (i dati vengono elaborati subito e viene fornita in risposta una certa pagina Html) oppure POST (i dati vengono raccolti e trasmessi alla destinazione indicata).

Esistono anche modi alternativi di creare moduli interattivi senza ricorrere a script CGI. Ad esempio si può impostare un modulo in modo tale che quando l'utente fa clic sul pulsante di invio dati, questi vengano spediti all' indirizzo e-mail specificato. La sintassi è:

<FORM ACTION="mailto:email@dominio.it" METHOD="post"> --controlli del modulo-- </FORM>

L'uso di questo metodo presenta però uno svantaggio non trascurabile: solo i browser più recenti sono in grado di spedire dati ad indirizzi di posta elettronica. Di conseguenza, è preferibile scegliere l'alternativa dell'invio dati attraverso posta elettronica solo nel caso in cui non si ha alcuna possibilità di avere script CGI o non si hanno le conoscenze adatte per realizzarlo.

^Top

Dai un voto a questo articolo:   HITS: 59 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 2