Tabelle Indice Frame

W3 - progettazione e realizzazione di ipertesti per siti Web

7. Form

In questo capitolo vengono presentati i concetti fondamentali circa il tag 'form' che è uno dei principali tag che permettono l'interazione tra un documento HTML e l'utente. Tramite un tag 'form' è possibile permettere ad un utente di inserire/modificare dati, compiere delle scelte, ecc. all'interno di un documento HTML, che verranno successivamente elaborate da programmi appositi.

Che cosa è un form

Un form è un oggetto che consente agli utenti di fornire dei dati di input, svolgendo una delle tante azioni possibili:

Dopo avere immesso i dati nel form, l'utente fa clic su un apposito pulsante per trasmettere i dati al server o per inviarli via e-mail. L'invio di dati al server o l'invio di una mail sarà trattato in un altro modulo.

Come creare un form

Analizziamo ora i singoli tag e gli attributi che possono essere specificati. Tutti i tag di seguito descritti rispettano lo standard HTML 4.01 della W3C.

<form> </form>

Il tag <form> contiene tutti gli elementi di una form. Il tag </form> non deve essere omesso. Un form può contenere qualsiasi elemento HTML, non è possibile incorporare un form all'interno di un'altra. Di solito i form si utilizzano assieme alle tabelle in modo da rendere gradevole la visualizzazione dei form. Gli attributi che possono essere specificati sono: accept-charset, action, class, dir, enctype, id, lang, method, name, style, target e title. Gli attributi action, method sono necessari.

Attributo Funzione
accept-charset è un esempio delle nuove funzionalità che il W3C ha aggiunto per internazionalizzare il linguaggio HTML. Permette di specificare un gruppo di set di caratteri che il browser deve supportare per presentare correttamente le pagine Web.
action identifica il programma o la pagina web che dovrà elaborare i dati immessi nella form.
method indica al browser come trasmettere i dati. Ci sono due possibili valori che può assumere: GET e POST.
enctype consente di specificare un formato di codifica per i dati da trasmettere. Raramente si utilizza tale attributo, serve soltanto per trasmettere dati binari o non-ASCII, di solito come parte di un file.
target consente di indirizzare i dati elaborati da uno script verso una finestra diversa da quella che conteneva la form originale.
style è una novità introdotta dalla specifica HTML4.0. È utilizzato per creare uno stile solo per le form, in modo da annullare la formattazione preesistente.
class consente di applicare una classe predefinita alla form.
name consente di associare un nome alla form.
title è ignorato dai browser grafici, ma può svolgere un ruolo importante nei browser non grafici. È stato ideato per assegnare un titolo alla form che viene pronunciato quando l'utente usa un browser per non vedenti.

<input>

Il tag <input> crea un elemento di input all'interno di un form. E' lo strumento più utilizzato. La specifica HTML 4.0 definisce controllo di input qualsiasi zona della form in cui l'utente può immettere dei dati. Grazie a tale tag è possibile creare capi di testo, liste di selezione, immagini cliccabili, pulsanti di opzione e pulsanti per confermare o annullare i dati immessi in un form. Gli attributi che possono essere specificati sono: accept, accesskey, align, alt, border, checked, class, dir, disabled, id, lang, maxlength, name, readonly, size, src, style, tabindex, title, type, usemap e value. L'attributo type è necessario.

L'attributo type definisce il tipo di controllo di input che la form deve fornire all'utente. Vediamo ora tutti i possibili valori che tale attributo può assumere:

Attributo Funzione
type="text" questo tipo, campi di testo, sono il tipo di <input> più comune in molte form. L'unico attributo obbligatori da impostare per tale valore e name.
type="password" serve per proteggere da occhi indiscreti i dati che l'utente immette in un form. Tutto ciò che l'utente digita in un campo della form apparirà sullo schermo come una serie di caratteri asterischi.
type="file" tale opzione è stata ideata per aiutare gli utenti a trovare i file che intendono trasmettere con la form. Quando si utilizza tale valore si deve utilizzare l'attributo enctype="multipart/form-data", se non si specifica il browser invierà il nome del file e non il contenuto.
type="checkbox" il valore checkbox permette di creare una lista di caselle di opzioni predefinite che l'utente può selezionare. Si possono selezionare più di una casella.
type="radio" ha le stesse funzionalità di checkbox ma tale valore permette di selezionare una casella solo; se si seleziona una seconda la prima viene deselezionata. Assicurano che l'utente selezioni una sola opzione fra quelle disponibili.
type="submit" il valore submit crea un pulsante che avvia il processo di codifica e di trasmissione dei dati della form.
type="reset" il valore reset crea un pulsante che indica al browser di riportare tutte le aree di input ai valori originari che esistevano quanto l'utente ha aperto la pagina.
type="button" tale valore è stato introdotto dalla specifica HTML 4.0. Con tale valore è possibile creare un controllo che non ha una funzione predefinita. Attualmente, l'unica applicazione di questo controllo è quella di innescare un programma JavaScript.
type="image" consente di utilizzare una immagine al posto di un semplice bottone. Con tale opzione è dunque necessario specificare l'attributo src="nomefile" per caricare l'immagine. Quando si clicca su tale immagine oltre al valore desiderato vengono inviate anche le coordinate della posizione corrente del puntatore del mouse all'interno dell'immagine, in pixel.
type="hidden" tale valore permette di inviare dati dalla form senza essere visualizzati. Ne l'utente ne il browser potranno vedere questo campo.

Analizziamo ora gli altri attributi:

Attributo Funzione
checked server per preselezionare un pulsante RADIO.
disabled permette di disattivare il pulsante definito dal tag <button>.
maxlength limita il numero effettivo di caratteri che l'utente può immettere in un campo di testo.
name è richiesto da quasi tutti i controlli di input, tranne i pulsanti "submit", "reset" e il pulsante semplice. Specifica il nome che per i dati che vengono spediti. È buona norma scegliere nomi significativi, utilizzare solo caratteri minuscoli, non inserire spazi nel nome.
size specifica la dimensione di un campo di testo. È buona norma impostare size ad un valore minore o uguale a maxlength.
src indica l'immagine da assegnare se si è impostato l'attributo type a image.
tabindex gli elementi all'interno del form si possono "scorrere" con il tasto Tab. Tale attributo serve per assegnare l'ordine di scorrimento. Se si vuole che un elemento venga escluso basta impostare tale attributo a "0"(zero).
value è il valore di default che si può assegnare a un campo di testo e che viene visualizzato al suo interno.

<button> Pulsante di controllo </button>

Il tag <button> è una novità introdotta dalla specifica HTML 4.0. Permette di creare un pulsanti all'interno di una form. Attualmente, soltanto Internet Explorer supporta questo tag. La differenza con il controllo <input type="button"> è che <button> è in grado di accettare elementi più complessi al suo interno.

<textarea> Area di testo </textarea>

Tutti gli strumenti finora descritti limitano l'input dell'utente a una sola riga. Il tag contenitore <textarea> ... </textarea> consente all'utente di immettere i suoi dati in un'area più ampia della pagina, anzichè su una sola riga. E' possibile includere un testo di default in un campo <textarea> per dare istruzioni all'utente. Gli attributi possibili per tale tag sono:class, cols, dir, disabled, id, lang, name, readonly, rows, style, tabIndex, title e warp. Analizziamo i singoli attributi:

Attributo Funzione
rows e cols definiscono le dimensioni iniziali di un'area di testo. rows specifica il numero di righe mentre cols specifica il numero di caratteri di ogni riga. E' consigliabile specificare sempre tali attributi.
warp tale attributo produce lo stesso effetto dell'accapo automatico dei word processor: il browser interrompe i testi della riga corrente, senza sillabare le parole, in prossimità del margine destro. Tale attributo può avere tre impostazioni differenti: warp="virtual" fa si che la riga di testo venga interrotta in prossimità del margine dello schermo, ma quando il testo viene trasmesso soltanto i caratteri di nuova riga che l'utente ha effettivamente immesso saranno inclusi nella stringa di dati; warp="physical" opera come il precedente con la differenza che i caratteri di nuova riga vengono aggiunti al testo di input, come se l'utente li avesse effettivamente immessi, warp="off" imposta il funzionamento standard del browser: l'accapo si verifica solo se l'utente preme invio altrimenti i testi continueranno a scorrere verso destra.

Vediamo il codice per creare un form è completo:

Codice HTML Resa del browser 
<form method="POST" action="Nome programma" 
         name="PW"  enctype="multipart/form-data"> 
  <table cellspacing="0" cellpadding="3" 
         class="bordo" border="1" >
   <tr> 
    <td>Select a file:  </td>
    <td><input type="file" name="FILE1"></td>
   </tr>
   <tr>      
    <td width="150">Text :  </td>
    <td width="324"><input type="TEXT" name="myText" 
                   value=""></td>
   </tr>
    <tr>  
    <td width="150">Text Area :  </td>
    <td width="324"><textarea name="myTextArea" rows="4" 
                   value=""
            cols="20"></textarea>
    </td>    
   </tr>
   <tr>
    <td>Password :  </td>
    <td><input type="PASSWORD" name="myPASSWORD" 
                   value=""></td>
   </tr>
   <tr>
    <td>Hidden :  </td>
    <td><input type="hidden" name="myHidden" 
                   value="hidden"></td>
   </tr>
   <tr> 
    <td>CheckBox :  </td>
    <td><input type="CHECKBOX" name="myCheckBox" 
                   value="Value 1">Value 1
       <br>
       <input type="CHECKBOX" name="myCheckBox" 
                   value="Value 2">Value 2
       <br>
       <input type="CHECKBOX" name="myCheckBox" 
                  value="Value 3">Value 3
       <br>
    </td> 
   </tr>
   <tr>
   <td>Radio :  </td>
    <td><input type="radio" name="radio" 
                   value="Value 1">Value 1
       <br>
       <input type="radio" name="radio" 
                   value="Value 2">Value 2
       <br>
       <input type="radio" name="radio" 
                   value="Value 3">Value 3
       <br>
    </td> 
   </tr>
   <tr>
    <td>Simple Select :  </td>
    <td><select name="mySimpleSelect" >
            <option value="Value 1">Value 1</option>
            <option value="Value 2">Value 2</option>
            <option value="Value 3">Value 3</option>
            </select>
    </td>
   </tr>
   <tr>
    <td>Multiple Select :  </td>
    <td><select multiple name="myMultSelect" >
            <option value="Value 1">Value 1</option>
            <option value="Value 2">Value 2</option>
            <option value="Value 3">Value 3</option>
            </select>
    </td>
   </tr>
   <tr>  
    <td colspan="2" width="474">
           <input type="Submit"> <input type="reset"> 
    </td>  
   </tr> 
  </table>
</form>
Select a file: 
Text: 
Text Area: 
Password: 
Hidden: 
CheckBox:  Value 1
Value 2
Value 3
Radio:  Value 1
Value 2
Value 3
Simple Select: 
Multiple Select: 

Esercizi

1. Quali attributi sono richiesti per usare il tag <form>?

2. A cosa servono gli attributi name e value?

3. Qual è la differenza tra una casella e un'area di testo?

4. Scrivere un form per l'inserimento dei commenti di un libro. Deve essere possibile inserire il proprio nome, cognome ed inoltre deve essere possibile selezionare il proprio sesso.

5. Scrivere un form per l'inserimento dei dati relativi alla carta d'identità. Utilizzare i pulsanti 'submit' e 'reset', naturalmente all'attributo action assegnate valore nullo. Il form deve essere contenuto in una tabella in modo da rendere gradevole il layout.

Tabelle Indice Frame

Valid HTML 4.01!