Come detto nell'articolo precedente per costruire un modulo o form è necessario utilizzare il tag <FORM> e i tag per definire i vari controlli: <INPUT>, <SELECT> e <TEXTAREA>.

La sintassi del tag <INPUT> è la seguente:

<INPUT type="NomeControllo" name="Identificativo">

L'attributo type specifica il nome del controllo e può assumere i seguenti valori: TEXT, PASSWORD, HIDDEN, CHECKBOX, RADIO, SUBMIT, RESET e IMAGE; l'attributo name serve per specificare un identificativo usato dallo script per accedere alle variabili.

Vediamo in dettaglio i vari tipi di controllo:

• type="TEXT"
  Questo controllo è utilizzato per prendere del testo come input dall'utente, infatti visualizza quella che per i programmatori viene definita casella di modifica o Edit Box.
  Utilizza anche altri attributi supplementari:
  - 'maxlength' indica il numero massimo di caratteri che è possibile inserire ( se non specificato, non viene posto alcun limite ).
  - 'size' indica in caratteri la dimensione del controllo nella finestra del browser.
  - 'value' indica il valore di default iniziale.
  
  
• type="PASSWORD"
  Questo controllo si comporta allo stesso modo di TEXT, ma con l'unica differenza che visualizza i caratteri inseriti come asterischi '*'. In tutti i casi il valore è passato allo script senza alcuna criptazione e quindi nella forma originale inserita dall'utente.
  
  
• type="HIDDEN"
  Questo tipo di controllo si comporta alla stregua di TEXT, ma non visualizza alcunché sullo schermo. E' utilizzato per passare dei valori allo script e/o per contenere valori temporanei acquisiti in moduli che si sviluppano su più pagine.

• type="CHECKBOX"
  Questo tipo di controllo disegna sullo schermo delle caselle quadrate spuntabili per indicare delle situazioni si/no o vero/falso.
  Un attributo che si può usare con questo controllo è value 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 che se utilizzato rende la casella già spuntata al momento della visualizzazione.
  
  
• type="RADIO"
  Con questo controllo si definiscono delle caselle di selezione a mutua esclusione, è possibile ciò 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> e avere tutti lo stesso nome, ciò comporta avere lo stesso valore assegnato all'attributo name di ogni pulsante.
  A questo tipo si applica anche l'attributo value che è il valore ritornato allo script e l'attributo checked 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"
  Questo attributo crea il pulsante di invio dei dati allo script.
  Per definire un'etichetta diversa da quella di default che è Submit è necessario specificarne il nome con il tag value.

• type="RESET"
  Questo attributo permette di creare un pulsante che resetta il contenuto del form.
  I valori assunti in seguito al reset sono quelli specificati come default nei vari controlli.
  Per cambiare l'etichetta Reset di default per questo pulsante è necessario utilizzare il tag aggiuntivo value.
  
  
• type="IMAGE"
  Questo attributo si comporta come SUBMIT, ma visualizza un immagine al posto del pulsante di invio.
  Il percorso dell'immagine è da specificare tramite il tag aggiuntivo src.
  Es. <INPUT type="IMAGE" src="URL">
  Assegnando all'immagine anche l'attributo name, si fa sì che allo script vengano passate anche le informazioni sulla posizione del cursore 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. Questa caratteristica è utilizzata per implementare una sorta di immagine mappata, di questo abbiamo parlato in un articolo precedente.
  

Vedremo i restanti tag <TEXTAREA> e <SELECT>, nonché un esempio di modulo, nel prossimo articolo.

Torna all'indice Generale del corso di Corso di HTML di Software Planet