Un altro strumento molto potente
messo a disposizione dall'HTML sono le SCHEDE che vanno inizializzate tramite il comando <FORM> . Le schede hanno costituito
l'importante innovazione dell'HTML versione 2. Dato che lo standard è
ancora in evoluzione, ci limiteremo ad una rassegna delle possibili forme
che una scheda può assumere. Per avere maggiori informazioni sugli ultimi
comandi vi consigliamo di procurarvi via Internet un elenco completo delle
nuove caratteristiche presso il CERN. Una scheda è un'area della
pagina predisposta per accettare dei dati in ingresso dall'utente. Questi
dati possono poi essere gestiti in vario modo, in particolare possono
essere inviati ad un server che può analizzarli e fornire poi una
determinata risposta all'utente. Si può usare una scheda, ad esempio, per
richiedere i dati anagrafici di una persona e per farseli inviare sul
proprio server. Ogni scheda è definita da un'istruzione d'inizio
ed una di fine, in mezzo alle quali ci sono tutti gli elementi che la
costituiscono. Un primo esempio di scheda è la seguente:
<HTML> <HEAD> <TITLE>Semplice scheda
</TITLE></HEAD> <BODY> <FORM METHOD=GET
ACTION="script.cgi"> Inserisci il tuo nome: <INPUT
TYPE="text" NAME="nome"
SIZE=20> </FORM> </BODY> </HTML>
L'idea fondamentale
della scheda è di presentare dei campi di input al lettore in modo che
questo possa inserirvi delle informazioni testuali, oppure selezionare una
tra varie possibilità di scelta tra elementi di una lista. Tutti i dati
inseriti dall'utente vengono poi inviate al server per l'opportuna
elaborazione. Nella definizione della FORM si definiscono due
campi, METHOD e ACTION. METHOD indica in quale modo i dati devono essere
comunicati al server e ACTION permette di specificare l'URL di
destinazione. Da qualche parte nella scheda si definiscono due pulsanti di
azione: Submit e Reset che permettono rispettivamente di dar
corso all'azione indicata in ACTION inviando i dati al server oppure di
cancellare tutti i dati inseriti fino a quel momento.
Il
campo METHOD accetta due valori:
POST è il metodo comunemente usato e permette di inviare le
informazioni inserite all'URL specificato. In genere questo indica uno
script CGI che il server esegue al ricevimento dei dati per compiere la
dovuta elaborazione. Si può, ad esempio, inserire una FORM che chiede il
nome dell'utente e lo invia al server. Qui lo script confronta quanto
ricevuto con una lista di nomi di utenti abilitati a ricevere una
determinata pagina e se il confronto è positivo invia la pagina
all'utente, altrimenti restituisce errore di "Utente non riconosciuto".
GET ha la stessa funzione del precedente, ma accoda i dati all'URL
inviato per la richiesta di collegamento. Chi li riceve può usarli come
parametri per un determinato comando.
Il campo ACTION
contiene l'URL a cui la FORM dovrà essere inviata. Se l'ACTION non viene
specificato, i dati sono inviati allo stesso URL da cui proviene la pagina
corrente. Per permettere l'adeguato utilizzo dei dati ricevuti
da una FORM è necessario programmare uno script CGI e ciò richiede
naturalmente l'accesso al computer che gestisce il server. Gli script sono
normalmente memorizzati nella directory "/cgi-bin/..." e costituiscono in
genere una sequenza di comandi di un apposito linguaggio, il
PERL.
Nel precedente esempio si è utilizzato un primo
comando per ricevere dati dall'utente, il comando INPUT. INPUT: Questo
comando definisce una riga per l'inserimento dei dati, in cui l'utente può
scrivere ciò che vuole o selezionare quanto visualizzato. Ciò che viene
selezionato è quindi memorizzato nella variabile specificata in NAME con
il valore dato in VALUE (se presente) ed inviato al momento opportuno al
destinatario. I suoi parametri sono:
NAME: Definisce il nome della variabile in cui memorizzare quanto
immesso. Questo campo è OBBLIGATORIO per tutti i tipi di input eccetto
che per i tipi SUBMIT e CLEAR.
SIZE: Definisce la dimensione, in caratteri, del campo di input.
MAXLENGTH: Definisce il massimo numero di caratteri accettati in
input.
VALUE: Per un campo di tipo TEXT o di tipo PASSWORD definisce il
valore di default. Per un campo di tipo bottone definisce il valore che
deve essere assegnato alla variabile al momento della selezione di quel
bottone.
CHECKED: Se il campo è di tipo bottone, lo imposta a "selezionato",
come default. Non ha significato per gli altri tipi di campi.
TYPE: Imposta il tipo di campo di immissione desiderato, e può
assumere i seguenti valori:
TEXT: E' il valore di default per INPUT TYPE e visualizza una
semplice linea di testo delle dimensioni date in SIZE. La variabile
specificata in NAME assume per valore quanto digitato nel campo
dall'uente.
PASSWORD: Anche in questo caso viene visualizzata una semplice
linea di testo, ma è utilizzata per inserire una password: quanto
viene digitato dall'utente non è visualizzato sullo schermo, per
mantenerlo segreto agli occhi di un possibile "spione".
CHECKBOX: Visualizza un semplice bottone di selezione che può
essere selezionato o non selezionato. Se è selezionato allora la
variabile specificata in NAME assume il valore dato in VALUE.
RADIO: Visualizza anch'esso un bottone, ma la sua gestione è
leggermente più complessa di quella di CHECKBOX: non consente scelte
multiple. Inserendo una serie di bottoni RADIO con la stessa variabile
specificata in NAME si fa in modo che l'utente possa selezionarne UNO
SOLO tra tutti. La variabile assume allora il valore dato nel campo
VALUE del bottone corrispondente.
RESET: Visualizza un pulsante che se selezionato azzera tutte i
dati finora inseriti. Se si specifica il VALUE allora il nome del
pulsante cambia da "reset" a quanto specificato, mantenendo la sua
funzione originaria.
SUBMIT: Visualizza il pulsante che se premuto invia tutti i dati
inseriti all'indirizzo URL specificato nel campo ACTION di FORM. Anche
in questo caso è possibile utilizzare VALUE per cambiare il testo del
pulsante.
HIDDEN: Serve per un campo nascosto, cioè un campo che non compare
effettivamente sulla pagina. Può essere comodo per ricevere comunque
dei dati (specificati con l'attributo "VALUE") associati alla scheda.
Vediamo ora un esempio di scheda che permette
di inserire vari tipi di dati, e di scegliere tra alcune possibilità.
Vengono programmati due campi per il Nome e l'indirizzo E-Mail
dell'utente, quindi una serie di bottoni "RADIO" tra cui compiere una
scelta ed infine un campo dove inserire del testo. I bottoni radio sono
tali da permettere la selezione di una sola delle possibili scelte
presentate. Nel campo TEXTAREA si può inserire qualsiasi testo vogliate,
siano domande, suggerimenti o battute.
<HTML> <HEAD><TITLE>Richiesta
Informazioni</TITLE></HEAD> <BODY>
<CENTER><ALIGN=CENTER> <H1>Scheda
Informazioni Utente</H1> Vi saremo molto grati se voleste
compilare la scheda seguente.<BR> Ci aiuterà a conoscere
meglio i vostri desideri. <HR> <FORM METHOD="POST"
ACTION="script.cgi"> <I><FONT SIZE=4>Informazioni
facoltative</FONT></I>
<ALIGN=LEFT></CENTER> <PRE> Nome:
<INPUT TYPE="text" NAME="nome" SIZE="20"> E-Mail:
<INPUT TYPE="text" NAME="email" SIZE="30"> <HR>
Come giudichi questa guida? <INPUT TYPE="radio"
NAME="rating" VALUE="Eccellente">: Eccellente <INPUT
TYPE="radio" NAME="rating" VALUE="Buona">: Buona <INPUT
TYPE="radio" NAME="rating" VALUE="Gradevole">:
Gradevole <INPUT TYPE="radio" NAME="rating"
VALUE="Cosi-cosi">: Così-così <INPUT
TYPE="radio" NAME="rating" VALUE="Scarsa">:
Scarsa </PRE> <BR>
<CENTER><ALIGN=CENTER> Avete qualche
suggerimento da darci?<BR> <TEXTAREA NAME="commenti"
ROWS=6 COLS=30></TEXTAREA> <P> <INPUT
TYPE="submit" VALUE="Invia!">
<ALIGN=LEFT></CENTER> </FORM>
</BODY> </HTML>
Scheda Informazioni Utente
Vi saremo molto grati se voleste
compilare la scheda seguente. Ci aiuterà a conoscere meglio i
vostri desideri.
TEXTAREA: Il comando TEXTAREA consente di
introdurre un'area delle dimensioni desiderate in cui l'utente può
scrivere tutto ciò che vuole, fornendo automaticamente le barre laterali
di scorrimento qualora quanto inserito non entri nell'area specificata. I
suoi parametri sono:
NAME: E' necessario in quanto definisce la variabile in cui sarà
memorizzato quanto introdotto.
ROWS: Definisce l'altezza in righe dell'area.
COLS: Definisce la larghezza in colonne dell'area.
Testo: Qualsiasi testo compreso tra <TEXTAREA> e
</TEXTAREA> viene visualizzato di default all'interno dell'area.
Le schede consentono molte possibilità di
personalizzazione, offrendo diversi tipi di bottoni e di aree per il testo
o per la selezione di voci. Abbiamo appena visto l'uso dei bottoni RADIO,
consideriamo adesso un nuovo tipo di bottoni, quelli CHECKBOX. Questi
possono essere selezionati in maniera indipendenti, consentendo di
attivare più di una scelta. L'area testuale è ora composta di un requester
per la selezione di una delle voci tramite il mouse. Ecco il sorgente HTML
e di seguito quanto viene visualizzato dal browser:
*** ATTENZIONE
*** Come avrete sicuramente notato, in quest'ultimo esempio abbiamo
dovuto cambiare l'impaginazione del listato HTML e della visualizzazione a
schermo. Siamo stati obbligati a farlo per evitare dei problemi nella
gestione di alcuni comandi delle FORM. In effetti le FORM, come le TABLE,
sono piuttosto delicate. Bisogna stare molto attenti a come vengono
inseriti i comandi e tutti i parametri, in quanto potrebbero dar luogo ad
effetti inaspettati o al blocco del browser. Ciò è dovuto presumibilmente
al fatto che lo standard riguardante questi comandi non è ancora stato
definitivamente stabilito e i browser possono insorgere in alcuni problemi
di interpretazione dei comandi. In questo caso, ci siamo accorti
che esisteva una incompatibilità tra il comando SELECT della FORM di
esempio e il comando TABLE che abbiamo usato precedentemente per
formattare con un bordo i testi dei sorgenti e tutti gli esempi. Abbiamo
quindi dovuto porre la FORM di esempio al di fuori della TABLE, ed è per
questo motivo che la trovate formattata diversamente dai casi
precedenti.
SELECT: Il comando
SELECT, come già visto nell'esempio precedente, presenta una lista di
possibili scelte in un pop-up menù o in una lista a scorrimento. In questo
caso si è utilizzato il pop-up menù: le voci selezionabili compaiono
premendo sulla freccia in basso. I suoi parametri sono:
NAME: E' necessario in quanto definisce la variabile in cui sarà
memorizzato quanto introdotto.
SIZE: Definisce quante scelte devono essere mostrate. Se viene
omesso allora si utilizza un pop-up menù. Se è settato a 2 o più, allora
si utilizza una lista scorrevole. Se il numero di voci è inferiore a
quanto qui specificato vengono introdotti automaticamente dei campi
"Nothing".
MULTIPLE: Permette di selezionare scelte multiple. Viene utilizzata
comunque una lista scorrevole senza tener conto del valore di SIZE.
Voci: Le voci tra cui è possibile scegliere compaiono tra
<SELECT> e </SELECT> utilizzando il comando <OPTION> che ha i seguenti
parametri:
VALUE: Il valore che sarà assegnato alla selezione. Quanto qui
specificato è ciò che vaerrà trasmesso al server, senza tener conto
dell'eventuale testo al di fuori del comando OPTION.
SELECTED: Indica la scelta che deve essere selezionata per
default.
Questi sono solo alcuni esempi di
applicazione delle FORM. Possono essere agevolmente usate per implementare
sistemi di sicurezza tramite password, per creare dei questionari, e tante
altre applicazioni. Potete provare a creare delle vostre schede
personali, modificando quelle qui presentate o creandone di nuove. Girando
per il WWW è molto facile incorrere in una delle applicazioni di questo
comando.
Se avete qualsiasi suggerimento o correzione vi
preghiamo di contattarci attraverso E-Mail specificando come soggetto
"WebKit". I diritti di riproduzione di
questa guida appartengono agli autori. Per richiedere permessi di duplicazione
parziale di quanto qui contenuto o per ulteriori informazioni non esitate a
scriverci.