Html: i 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).


Il tag form


Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:

<form method="" action="" target="">
...
</form>

Scopo di questo tag è di fare da contenitore ad una serie di tag (che vedremo tra poco) che costituiranno gli specifici controlli del modulo.

Solitamente l’invio dei dati è organizzato in due parti:

  • una pagina iniziale 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

A tal proposito è necessario introdurre alcuni attributi indispensabili del tag form:

<form name=‘nome_form’ action=‘pagina_secondaria.phpmethod=‘GET’></form>

L’attributo name serve per indicare un nome ad un form, necessario per processare lato client(con Javascript) i dati del modulo.

L’attributo action definisce l’url della pagina o del programma che processerà i dati del modulo html.

L’attributo method, infine, definisce il metodo di invio dei dati al server. Può assumere valore GET o POST.


Inviare i dati della form per email


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

<form method="POST" action="mailto:pincopallino@gmail.com" enctype="text/plain">

E quindi il codice sarà simile a questo:

<form method="POST" action="mailto:pincopallino@gmail.com" enctype="text/plain">
... modulo contenuto nella form ...
</form>


Method


Con il metodo GET a 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

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=”datiUtentiaction=”paginaRisposta.phpmethod=”GET”>

Nel metodo POST invece l’invio dei dati avviene in due step distinti: 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=”datiUtentiaction=”paginaRisposta.phpmethod=”POST”>


I tag utilizzati per creare moduli HTML


Una volta definito un form mediante l'omonimo tag sarà necessario "popolarlo" con una serie di tag annidiati al suo interno. Attraverso i singoli tag (che andremo a vedere tra poco), infatti, sarà possibile creare i vari elementi per l'interazione con l'utente come, ad esempio, caselle di testo o menu di selezione.

Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:

  • input - genera la maggior parte degli elementi dei form HTML, a seconda del type specificato. Gli input più utilizzati sono:
    • text - è utilizzato per creare caselle di testo in cui l'utente può scrivere del contenuto su "singola linea";
    • file - è utilizzato per creare caselle di selezione di file in locale al fine di poterli trasmettere al server remoto;
    • radio - permette di creare un gruppo di opzioni al cui interno deve essere fatta una scelta (non ammette scelte multiple);
    • checkbox - permette di creare un gruppo di opzioni al cui interno devono essere fatta delle scelte (ammette scelte multiple);
    • button - permette di creare bottoni "neutri" ai quali, cioè, può essere associata un'azione mediante Javascript;
    • submit - permette di creare bottoni di invio attraverso i quali viene, appunto inviato e processato il form;- Selezione di File
    • image - permette di inserire immagini "attive" all'interno del modulo che fungeranno da bottoni;- Controlli nascosti
    • reset - permette di creare bottoni per il reset del form (in sostanza vengono cancellate le scelte effettuate dall'utente ed il modulo torna al suo stato iniziale).
  • select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;
  • textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi piuttosto lunghi.

Vediamo un esempio di un ipotetico form HTML per la raccolta di dati anagrafici che invia i dati raccolti per email:

<form method="POST" action="mailto:risatascalciante@gmail.com" enctype="text/plain">

  <!-- CASELLE DI TESTO -->
  Nome<br>
  <input type="text" name="nome"><br>
  Cognome<br>
  <input type="text" name="cognome"><br>
  
  <!-- SELECTBOX -->
  Paese<br>
  <select name="paese">
  <option value="I">Italia</option>
  <option value="E">Estero</option>
  </select><br>

  <!-- RADIO -->
  Sesso<br>
  <input type="radio" name="sesso" value="M"> M<br>
  <input type="radio" name="sesso" value="F"> F<br>

  <!-- CHECKBOX -->
  Hobby<br>
  <input type="checkbox" name="hobby" value="S"> Sport<br>
  <input type="checkbox" name="hobby" value="L"> Lettura<br>
  <input type="checkbox" name="hobby" value="C"> Cinema<br>
  <input type="checkbox" name="hobby" value="I"> Internet<br>

  <!-- TEXTAREA -->
  Commento<br>
  <textarea name="commento" rows="5" cols="30"></textarea>
  <br><br>

  <!-- SUBMIT -->
  <input type="submit" name="invia" value="Invia i dati">

</form>

Produce il seguente modulo:

Nome

Cognome

Paese

Sesso
M
F
Hobby
Sport
Lettura
Cinema
Internet
Commento



Vediamo ora un altro esempio di form che invia dati per email. Il seguente codice:

<form action="mailto:pinco.pallino@libero.it" method="post" name = "utente" enctype="text/plain">
<p> 
<strong>Nome:</strong><br> 
<input type="text" name="nome"> 
</p> 
<p> 
<strong>Mail:</strong><br> 
<input type="text" name="mail"> 
</p> 
<p> 
<strong>Commento:</strong><br> 
<textarea name="commento" rows="5" cols="30"></textarea>
  <br>
</p> 
<p> 
<input type="submit" value="Invia"> 
<input type="reset" value="Annulla"> 
</p>

</form>

Produce il seguente form:

Nome:

Mail:

Commento: