I Moduli (Forms)

Struttura del tag form

Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali, come il forum di HTML.it .

Per organizzare questo genere di servizi è necessario raccogliere in qualchemodo i dati dell'utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).

L'invio dei dati è solitamente organizzato in due parti:

• una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, inserire un'immagine
• una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma sitratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro

Noi ci occuperemo della sola pagina principale, dal momento che il modo incui struttura una pagina di programmazione esula dagli obiettivi della presenteguida.

Name e action

Per creare una pagina con dei moduli, bisogna utilizzare l'apposito tag <form>: si tratta di un elemento di blocco, come il <p>, quindi il tag <form> lasciauno spazio prima dell'apertura e dopo la chiusura.

<form name="datiUtenti"action="paginaRisposta.php">
...
</form>

Nel caso in non si desideri avere dello spazio superfluo è possibilemodificare i bordi del tag utilizzando i fogli di stile. Con questa semplice sintassi:

<form name="datiUtenti" style="border:0px"action="paginaRisposta.php">

Come si può vedere, "name" serve per indicare il nome del form, "action" indica l'URL del programma o della pagina dirisposta che processerà i dati.

Grazie all'"action" è anche possibile far sì che i dativengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). Il codice è questo:

<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito"
enctype="text/plain" method="POST">

vedremo in una delle prossime lezioni come utilizzare concretamente questa sintassi.

Method

Quando creiamo un form possiamo scegliere due metodi di invio: GETe POST.

Con il metodo GET la pagina di risposta viene contattata e idati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (piùprecisamente nella "query string", cioè nella "stringa di interrogazione") secondo questa forma:

paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.

Alcuni server hanno tuttaviahanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 carattericomplessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi perl'invio in get è:

<form name="datiUtenti" action="paginaRisposta.php"method="GET">

Nel metodo POST invece l'invio dei dati avviene in due stepdistinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri noncompaiono nella query string (dunque se non si desidera che i parametri siano mostrati all'utente questo metodo è preferibile).

In questo caso non ci sonolimiti sulla lunghezza dei caratteri. La sintassi è:

<form name="datiUtenti" action="paginaRisposta.php"method="POST">

Enctype (tipo di codifica)

Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito ad errori(ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottintesol'invio di semplice testo.

A volte però, come quando è necessario inviare un'immagine, è tuttavia indispensabile dichiarare espressamente quali dativogliamo inviare. Per farlo è necessario utilizzare l'attributo "enctype" ("encoding type", cioè "tipodi codifica").

Come dicevamo normalmente non è necessario farlo, perché viene sottintesoquesto tipo di sintassi:

<form name="datiUtenti" action="paginaRisposta.php"enctype="text/plain">

Ma nel caso di invio di immagini dovremo dichiarare:

<form name="datiUtenti" action="paginaRisposta.php"method="post" enctype="multipart/form-data">

target

Grazie all'attributo "target" è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente (o in una determinata parte di un frameset):

<form name="datiUtenti" action="paginaRisposta.php" method="get" target="_blank">

Un po' d'ordine: raggruppare i moduli

Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l'HTML 4 sono statiintrodotti dei tag per fare un po' d'ordine all'interno dei form.

Grazie al tag <fieldset> possiamo creare dellemacro-aree all'interno dei form, e grazie al tag <legend>, possiamo indicare il nome di ciascunamacro-area.

Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendodati anagrafici, residenza, domicilio e reperibilità sul lavoro.

Possiamo farlo con la seguente sintassi:

<form action=ìì>
<fieldset>
  <legend>Datianagrafici</legend>
  <br><br><br>
</fieldset>

<fieldset>
  <legend>Residenza</legend>
  <br><br><br>
</fieldset>

eccetera

</form>
 

che dà:

come si può vedere vengono creati dei riquadri con un indicazione del tipo dicontenuto.

Un altro tag particolarmente utile - si può utilizzare con ogni tipo di campoche vedremo d'ora in poi - è il tag <label>, che permette di indicare un'etichetta per il nome del campo.

Ad esempio:

<form action=ìì>
 <fieldset>
  <legend>Datianagrafici</legend>
  <label>Anno di nascita: <input type="text"></label>
 </fieldset>
</form>
 

che dà:

oppure (cambiando la posizione del testo):

<fieldset>
  <legend>Dati anagrafici</legend>
  <label><input type="text">: anno di nascita</label>
</fieldset>
 

che dà:

Come si può vedere il campo su cui si vogliono dare delle indicazioni deve essere compreso all'interno del tag label stesso.

Il tag Input

Ad esempio:

<input type="text">

crea un campo di testo.

<input type="button">
 

crea un bottone.

I vari <input> sono dotati di attributi che consentono di indicare il tipo di campo, il nome (ad esempio per interagire con JavaScript), e il valore (per lo più il testo visualizzato).

<input type="text" name="tuoTesto" value="qui il tuo testo">

che dà:

I bottoni (sumbit, reset, button, image)

Non c'è form che si rispetti senza bottone di invio. La sintassi tradizionale per creare un bottone di invio è:

<input type="submit" value="invia I dati">

Ad esempio:

<form action=http://www.isolajava.com target="_blank">
  <input type="submit"value="visita Isolajava.com>
</form>

cioè:

Un altro bottone utile è il "reset" che - una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall'utente. Ecco un esempio:

<form action=ìì>
    <inputtype="text"><br>
    <input type="reset" value="cancella">
</form>

cioè

Esiste infine un tipo di bottone generico, che non esegue nessuna azione particolare, ma che può essere ad esempio utilizzato per associare degli eventi tramite JavaScript.

<form action=ìì>
    <input type="button"value="bottone generico">
</form>

che dà:

Il tag <button>

Con l'HTML 4 è stato introdotto il tag <button> che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.

Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire il testo del bottone tra l'apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice HTML all'interno del tag.

I bottoni che abbiamo appena visto dovrebbero dunque avere questa forma:

<form action=http://www.isolajava.com" target="_blank">

 <input type="text"><br>

 <buttontype="button">
   bottone generico
 </button>

 <buttontype="reset">
   cancella
 </button>

 <button type="submit">
   invia
 </button>

</form>
 

cioè:

Ed ecco un esempio complesso:

<form action=http://www.isolajava.com target=_blank>
 <button name="vai" type="submit">
   invia
   
   <img src="puntoEsclamativo.gif" width="23" height="67" title="invia adesso" border="1" vspace="5"
alt="invia adesso" align="middle">    
   <b>invia adesso</b>
 </button>
</form>
 

che dà:

invia invia adesso

Grazie all'attributo "disable" è infine possibile disabilitare i bottoni.

Es:

<input type="submit" value="invia" disabled>

o anche:

<form action=ìì>
 <input disabled="disabled" type="submit" value="invia">

 <button disabled="disabled" type=submit>
   invia
 </button>
</form>
 

cioè:

Il campo image

Il campo "image" ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice:

<form action=http://www.isolajava.com target=_blank>
 
 <input name="invia il modulo" type="image" src="invia.gif" alt="invia il modulo" title="invia il modulo" width="78"
height="38">
</form>
 

cioè:

come si può vedere, se non si specifica nulla, l'immagine ha valore di submit.
Gli attributi del campo immagine sono molto simili a quelli del tag <img>.

Inserire testo (campo testo, textarea, password)

Per consentire all'utente di inserire del testo è possibile utilizzare un "campo testo". Se il campo è su una singola linea avremo:

L'attributo

maxlength

indica il numero massimo di caratteri che l'utente può inserire, con

size

si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).

Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una "textarea" (area di testo). Ecco la sintassi:

L'attributo

rows

indica il numero di righe della textarea,

 cols

il numero di caratteri (cioè di colonne) che ogni riga può contenere.

Come si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra l'apertura e la chiusura del tag.

Esiste infine il campo password che mostra degli asterischi (o palline) al posto dei caratteri inseriti :

risultato:

Nota:

la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell'utente. L'invio dei dati attraverso il Web, se non vengono adottate altre misure di sicurezza, avviene 'in chiaro'.

Possiamo prevedere campi di testo accessibili solo in lettura. Ad esempio:

che risulta:

Oppure possiamo impostare le aree di testo come campi disabilitati:

cioè

Consentire delle scelte (checkbox, radio, select)

Checkbox

Con le checkbox possiamo consentire all'utente di operare delle scelte multiple. Ad esempio:

<form action=ìì>
<fieldset>
 <legend>Linguaggi conosciuti</legend><br>
 <input type="checkbox" name="html" value="html"/> html
 <br>
 <input type="checkbox" name="css" value="css"/> css
 <br>
 <input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>
 

che dà:

Si possono anche selezionare uno o più valori di default:

<form action=ìì>
 <input name="html" type="checkbox" value="html" checked="checked"/>
</form>
 

cioè

ed è possibile disabilitare una casella:

<form action=ìì>
 <input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>
 

cioè:

Radio button

I "radio button" ("bottoni circolari") invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l'altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:

<form>
 <fieldset>
  <legend>Linguaggi conosciuti</legend>
  HTML<input type="radio" name="linguaggio" value="html"/>
  CSS <input type="radio" name="linguaggio" value="css"/>
  JavaScript <input type="radio" name="linguaggio" value="javascript"/>
</fieldset>
</form>
 

che viene così visualizzato:

Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante.

<form action=ìì>
 <input type="radio" name="linguaggio" value="html" checked="checked" disabled="disabled"/>
</form>
 

cioè:

Menu di opzioni (select)

Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all'interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attravero l'attributo "value". Con l'attributo "selected" si può indicare una scelta predefinita:

<form>
 <fieldset>
  <legend>Siti per webmaster</legend>

  <select name="siti" >
   <option value="http://www.isolajava.com" selected="selected">www.isolajava.com  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
  </select>
 </fieldset>
</form>
 

che da luogo a:

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell'HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie possibilità di scelta in gruppi tramite l'utilizzo di apposite etichette. Ecco l'esempio:

<form action=ìì>
 <select name="siti" >
  <optgroup label="siti per webmaster">
   <option value="http://www.isolajava.com">www.isolajava.com  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
  </optgroup>

  <optgroup label="risorse per webmaster">
   <option value="http://font.isolajava.com">isolajava.com  </option>
   <option value="http://cgipoint.html.it">cgipoint.html.it  </option>
  </optgroup>
 </select>
</form>
 

che dà luogo al seguente menu:

Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l'attributo "multiple" l'aspetto del tag select cambia notevolmente:

<form action=ìì>
 <label>Quale siti visiti?<br>

  <select name="siti" multiple="multiple">
   <option value="http://www.isolajava.com">www.isolajava.com  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
   <option value="http://font.html.it">font.html.it  </option>
   <option value="http://cgipoint.html.it" >cgipoint.html.it  </option>
  </select>
 </label>
</form>
 

cioè:

Utilizzando il tasto "ctrl" l'utente può così effettuare delle scelte multiple.

Tramite l'attributo "size" si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l'altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.

<form action=ìì>
 <label>Quale siti visiti?<br>

  <select name="siti" size="5" multiple="multiple">
   <option value="http://www.isolajava.com">www.isolajava.com  </option>
   <option value="http://freephp.html.it">frephp.html.it  </option>
   <option value="http://freasp.html.it">freasp.html.it  </option>
   <option value="http://font.html.it">font.html.it  </option>
   <option value="http://cgipoint.html.it" >cgipoint.html.it  </option>
  </select>
 </label>
</form>
 

che viene così visualizzato:

Altri campi (file e hidden)

Potremmo avere la necessità di passare dei parametri "di servizio", senza far percepire la loro presenza all'utente. In questo caso possiamo utilizzare dei campi nascosti, presenti all'interno del form ma invisibili all'utente (ricordiamoci sempre di specificare la coppia "nome-valore"):

<input type="hidden" name="urlDiProvenienza" value="www.html.it">

Il campo "file", consente invece di inviare un file sul server, nel caso in cui la pagina di risposta sia stata programmata correttamente. La sintassi è:

<form action=ìì>
 <input name="fileUtente" type="file" size="20">/
</form>
 

che dà:

"size" indica la larghezza del campo. Come si può vedere, a fianco del modulo compare il pulsante "sfoglia" o "browse" (a seconda della lingua del browser dell'utente).

Un esempio concreto

Riprendendo un esempio accennato in precedenza, possiamo vedere come sia possibile consentire all'utente di inviarci il contenuto di un questionario tramite e-mail.
Dal punto di vista dell'utente si aprirà un messaggio che domanda se si vuole inviare una mail, ma ciò è inevitabile se si utilizza questo metodo: per evitare questa eventualità bisognerebbe infatti usare dei programmi che inviino e-mail lato-server.

<form name="datiUtente" enctype="text/plain" method="post" action="mailto:tuamail@nomeDominio.it?subject=Questionario proveniente dal web">/

 <fieldset>
  <legend>Dati Utente</legend>
  <label>Nome: <input name="nome" type="text" size="20" maxlength="30"></label>/
  <label>Cognome: <input name="cognome" type="text" size="20" maxlength="30"></label>/
  <label>Professione: <input name="cognome" type="text" size="20" maxlength="30"/> </label>
 </fieldset>
<br/>
 <fieldset>
  <legend>Questionario</legend>
  <label>Siti visitati:<br>
   <select name="siti" size="5" multiple="multiple">
    <option value="http://www.isolajava.com">www.isolajava.com</option>
    <option value="http://freephp.html.it">frephp.html.it</option>
    <option value="http://freasp.html.it">freasp.html.it</option>
    <option value="http://font.html.it">font.html.it</option>
    <option value="http://cgipoint.html.it" >cgipoint.html.it </option>
   </select>
  </label>
 </fieldset>
<br/>
 <fieldset>
  <legend>Campo libero</legend>
  <label>Lasciami un parere:<br>
   <textarea name="parere" cols="20" rows="10">
   </textarea>
  </label>
 </fieldset>
<br/>
 <button type="reset">annulla</button>
 &nbsp;&nbsp;&nbsp;
 <button type="submit">invia</button>
 

che dà luogo a questo form:

Approfondimenti sui form

L'attributo tabindex

Utilizzando il tasto "tab" della tastiera l'utente può passare da un campo del form all'altro. Per varie ragioni di impaginazione l'ordine così ottenuto potrebbe però non essere quello desiderato. Grazie all'attributo "tabindex" che si applica ai campi dei moduli è possibili specificare in quale ordine deve avvenire il passaggio da un campo all'altro. Il valore di questo attributo può variare tra 0 e 32767. Vediamo un esempio:

<form action="datiUtente">
 <fieldset>
  <legend>Dati utente</legend>

  <table width="300" border="1" cellspacing="0" cellpadding="5">
   <tr>
    <td>
     <label>Nome:
      <input tabindex="1" name="nome" type="text" size="30" maxlength="30"/>
     </label>
    </td>
    <td>
     <label>Professione:
      <input tabindex="3" name="professione" type="text" size="30" maxlength="100"/>
     </label>
    </td>
   </tr>

   <tr>
    <td>
     <label>Cognome:
      <input tabindex="2" name="cognome" type="text" size="30" maxlength="30"/>
     </label>
    </td>
    <td>&nbsp;</td>
   </tr>
  </table>
 </fieldset>
</form>
 

che viene così visualizzato:

come si può vedere, digitando il tasto "tab", l'ordine di passaggio da un campo all'altro non è quello indicato nell'HTML, ma è modificato secondo il valore di "tabindex".

Il layout dei form

Se siete alle vostre prima pagine HTML, può apparire difficile avere il controllo perfetto dei form. Si trovano validi suggerimenti tra gli articoli correlati alla guida:

• I Form: segreti e trucchi di personalizzazione
• I Form: risposte a domande frequenti