I moduli

   Raccogliere le informazioni

Nel capitolo precedente abbiamo visto come introdurre un modulo in una pagina web; però un modulo così introdotto non serve a niente, non è neanche in grado di visualizzare qualcosa sullo schermo, occorre inserire degli elementi adatti a raccogliere le informazioni inserite dall'utente.
Questi elementi possono essere campi in cui l'utente possa scrivere, pulsanti da selezionare, bottoni da cliccare o altri elementi su cui effettuare una scelta.

Il tag principale e quello più utilizzato è <INPUT> che specifica un dato in ingresso per il modulo. Il tag <INPUT> riceve alcuni attributi che indicano la natura della informazione introdotta. L'attributo NAME="testo" specifica l'identificativo di quell'elemento introdotto, in pratica il nome della variabile a cui l'utente fornisce il valore.
Infine l'attributo TYPE="tipo" che indica il tipo di informazione da raccogliere. Può assumere i valori "text", "password", "hidden", "checkbox", "radio", "submit", "reset" e "image". Esaminiamo in dettaglio i valori di questo tipo di dato:

• TYPE="text" è utilizzato per ricevere del testo come input dall'utente, infatti esso visualizza una casella in cui scrivere; esso utilizza anche alcuni attributi supplementari: MAXLENGHT="n" indica il numero massimo di caratteri che è possibile inserire (se non specificato, non viene posto alcun limite), SIZE="n" indica in caratteri la dimensione della casella di testo, VALUE="testo" indica il valore di default iniziale a cui è settata la variabile, se l'utente non scrive nulla sarà questo ad essere trasmesso.
  
• TYPE="password" si comporta allo stesso identico modo di "text" con la sola eccezione che i caratteri vengono visualizzati come asterischi '*'; in ogni caso il valore è passato al programma senza alcuna criptazione e quindi nella forma originale inserita dall'utente.
  
• TYPE="hidden" si comporta alla stregua di "text", ma non visualizza alcunché sullo schermo. È utilizzato per passare dei valori allo script e/o per contenere valori temporanei acquisiti in moduli che si sviluppano su più pagine.
  
• TYPE="checkbox" visualizza sullo schermo delle caselle quadrate spuntabili per indicare delle situazioni di tipo vero/falso; un attributo che si può usare con questo tipo di dato è VALUE="testo" ed indica il valore da ritornare allo script nel caso in cui la casella venga spuntata; se non specificato viene ritornato il valore 'on'; altro attributo è CHECKED, senza valori, che se utilizzato rende la casella già spuntata al momento della visualizzazione.
  
• TYPE="radio" definisce delle caselle di selezione a mutua esclusione, ossia è possibile selezionare solo una voce alla volta tra quelle disponibili; graficamente è rappresentato da un cerchio che se pieno contrassegna la voce come selezionata; per definire un gruppo di voci a mutua esclusione devono essere definiti tutti i pulsanti con <INPUT TYPE="radio" NAME="nome"> e avere tutti lo stesso nome, ossia lo stesso valore assegnato all'attributo name di ogni pulsante; a questo tipo si applica anche l'attributo VALUE="testo" che è il valore ritornato al programma e può essere diverso da casella a casella, e l'attributo CHECKED, senza valori, per selezionare un valore iniziale (si consiglia, pena comportamenti imprevedibili da parte del browser, di settare come checked una sola voce per ogni gruppo).
  
• TYPE="submit" crea il pulsante per l'invio dei dati raccolti; mediante l'attributo VALUE="testo" è possibile definire un'etichetta diversa da quella di default che è "Submit".
  
• TYPE="reset" crea un pulsante per annullare tutti i valori inseriti dall'utente, in modo che possa ricominciare da capo; mediante l'attributo VALUE="testo" è possibile definire un'etichetta diversa da quella di default che è "Reset".
  
• TYPE="image" si comporta esattamente come il pulsante "submit" ma visualizza un immagine al posto del pulsante di invio; l'immagine è specificata dall'attributo aggiuntivo SRC="immagine.gif". Assegnando all'immagine anche l'attributo NAME="nome", si fa sì che al programma vengano passate anche le informazioni sulla posizione del cursore del mouse al momento del clic; queste vengono passate nella forma nome.x=CoordX&nome.y=CoordY; nome indica il nome che si è assegnato all'immagine tramite l'attributo name, mentre CoordX e CoordY sono le coordinate x e y del cursore all'interno dell'immagine.
  

Vediamo adesso un esempio di modulo, in cui utilizziamo alcuni dei controlli del tag <INPUT>; sarà solo un esempio di visualizzazione delle caselle, non sarà un modulo vero e proprio, perché non possiamo ancora progettare il programma che riceverà ed elaborerà i dati, in quanto occorrono delle ulteriori conoscenze di programmazione per farlo; occorrerà conoscere linguaggi di programmazione come il C, oppure di scripting come il Perl, e di questi ce ne occuperemo nella prossima guida.

<HTML> <HEAD> <TITLE>Guida di HTML</TITLE>   .... </HEAD> <BODY BGCOLOR="#BBFFBB">  <H2 ALIGN="center">I moduli</H2> <P ALIGN="justify">Inserisci i dati richiesti. <FORM ACTION="..url.." METHOD="post"> Nome : <INPUT TYPE="text" NAME="nome" SIZE="18"><BR> Password : <INPUT TYPE="password" NAME="pwd" SIZE="15"><BR> Stato familiare<BR> single <INPUT TYPE="radio" NAME="sfam" VALUE="single" CHECKED>,  coniugato <INPUT TYPE="radio" NAME="sfam" VALUE="coniugato"><BR> Hobbies<BR> pesca <INPUT TYPE="checkbox" NAME="pesca">,  disegno <INPUT TYPE="checkbox" NAME="disegno"><BR> <INPUT TYPE="reset" VALUE="Annulla"> <INPUT TYPE="submit" VALUE="Invia"><BR> </FORM>   </BODY> </HTML>

I moduli   Inserisci i dati richiesti.   Nome :   Password :   Stato familiare:   single , coniugato   Hobbies:   pesca , disegno

Nel prossimo capitolo descriveremo altri due tag utilizzati per reperire informazioni, <SELECT> e <TEXTAREA>.