La Guida On-Line all'HTML per l'Internet Publishing tutta in Italiano
(C) 1995-98 by Flavio Del Greco e Valerio Zanini

Creare schede per l'immissione di dati

  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>
Inserisci il tuo nome:

  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&igrave;-cos&igrave;
<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.
Informazioni facoltative
Nome:     
E-Mail:   

Come giudichi questa guida? : Eccellente : Buona : Gradevole : Così-così : Scarsa

Avete qualche suggerimento da darci?




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:

<HTML>
<HEAD><TITLE>Registrazione utente</TITLE></HEAD>
<BODY>
<ALIGN=CENTER><CENTER>
<H1>Registrazione e convalida dell'Utente</H1>
<HR>
<FORM METHOD="POST" ACTION="http://.my.www.server/cgi-bin/register.cgi">
<ALIGN=LEFT></CENTER>
<PRE>
Nome: <INPUT TYPE="text" NAME="nome" SIZE="15">
Password: <INPUT TYPE="password" NAME="password" SIZE="8">
</PRE>
<BR>
<ALIGN=CENTER><CENTER>
Per quale categoria desiderate registrarvi?<BR>
<SELECT NAME="classes">
<OPTION SELECTED VALUE="HTMLAvanzato"> Programmatore HTML Esperto
<OPTION VALUE="Medio"> Medio
<OPTION VALUE="Principiante"> Principiante
<OPTION VALUE="Casuale"> Lettore casuale
<OPTION VALUE="Provider"> Fornitore servizi
</SELECT>
<BR>
<ALIGN=LEFT></CENTER>
Selezionate quale argomento preferireste venisse approfondito:
<BR>
<INPUT TYPE="checkbox" NAME="HTML" VALUE="HTML"> Informazioni su HTML <BR>
<INPUT TYPE="checkbox" NAME="immagini" VALUE="immagini"> Immagini <BR>
<INPUT TYPE="checkbox" NAME="collegamenti" VALUE="collegamenti"> Collegamenti e URL <BR>
<INPUT TYPE="checkbox" NAME="multimedia" VALUE="multimedia"> Oggetti multimediali <BR>
<INPUT TYPE="checkbox" NAME="HTML3" VALUE="HTML3"> HTML versione 3 <HR>
<ALIGN=CENTER><CENTER>
<INPUT TYPE="submit" VALUE="Invia!">
<INPUT TYPE="reset" VALUE="Cancella tutto!>
</FORM>
<ALIGN=LEFT></CENTER>
</BODY>
</HTML>



Registrazione e convalida dell'Utente
Nome:     
Password:        

Per quale categoria desiderate registrarvi?



Selezionate quale argomento preferireste venisse approfondito:
Informazioni su HTML
Immagini
Collegamenti e URL
Oggetti multimediali
HTML versione 3



  *** 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.


Indietro all'INDICE GENERALE


WebKit
(C) 1995-98 by Valerio Zanini e Flavio Del Greco
Tutti i diritti riservati.

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.