Appunti su HTML - Moduli

§ 4.10.1 Introduzione

Una form è un componente di una pagina web contenente elementi di controllo, nel seguito controlli, quali text fields, buttons, checkboxes, range control, o color pickers. Un utente può interagire con una form inserendo dati nei controlli che poi saranno inviati al server per essere processati. In molti casi non sono necessari script lato client.

La realizzazione di una form consiste in diversi step, eseguibili in un ordine qualsiasi: scrittura della interfaccia utente, implementazione del processamento lato server, e configurazione della interfaccia utente per comunicare con il server.

§ 4.10.1.1 Scrittura dell'interfaccia utente

Esempio: creazione di una form per ordinare di una pizza.

Tutte le form iniziano con un elemento <form>, all'interno del quale sono collocati i controlli. La maggior parte dei controlli sono rappresentati dall'elemento <input>, che come default fornisce un text field singola linea. Per etichettare un controllo, si usa l'elemento <label>; il testo della label ed il controllo stesso vanno all'interno dell'elemento <label;>. Le suddivisioni interne della form sono realizzate usando elementi <div>.

Mettendo queste cose insieme, ecco come chiedere il nome del cliente:

<form>
   <div><label>Nome cliente: <input></label></div>
</form>
            

Per consentire al cliente di scegliere la taglia della pizza, si può usare un radio button. Un radio button é un elemento <input> con attributo type=radio. Per fare in modo che i radio button lavorino come un gruppo occorre assegnargli un nome comune usando l'attributo name. Per raggruppare un insieme di controlli, come, in questo caso, i radio button, si può usare l'elemento <fieldset>, il cui titolo è assegnato con l'elemento <legend>.

Ecco il codice necessario:

<form>
   <div><label>Nome cliente: <input></label></div>
   <fieldset>
      <legend> Taglia </legend>
      <div><label> <input type=radio name=size> Piccola</label></div>
      <div><label> <input type=radio name=size> Media</label></div>
      <div><label> <input type=radio name=size> Grande</label></div>
   <fieldset>
</form>
            

Per scegliere gli ingredienti, possiamo usare i controlli checkbox. Questi sono elementi <input> con attributo type=checkbox. Per fare in modo che i checkbox lavorino come un gruppo occorre assegnargli un nome comune usando l'attributo name.

Ecco come aggiungere alla form un gruppo di checkbox:

   <fieldset>
      <legend> Ingredienti </legend>
      <div><label> <input type=checkbox name="topping"> Bacon</label></div>
      <div><label> <input type=checkbox name="topping"> Funghi</label></div>
      <div><label> <input type=checkbox name="topping"> Cipolla</label></div>
      <div><label> <input type=checkbox name="topping"> Carciofini</label></div>
   <fieldset>
            

La pizzeria, per la quale questa form è stata sviluppata, fa spesso errori, così ha bisogno di contattare il cliente. A questo scopo, possiamo usare, all'interno dell'elemento <input>, specifi controlli per richiedere il numero di telefono e l'indirizzo e-mail. Questo può essere fatto specificando l'attributo type=tel e type=email.

Mettiamo questi campi subito dopo il nome del cliente. Notare che per allinearli ho usato l'elemento <pre>.

   <div><pre><label>Nome cliente: <input></label></pre></div>
   <div><pre><label>    Telefono: <input  type=tel></label></pre></div>
   <div><pre><label>      E-mail: <input  type=email></label></pre></div>           
            

Nome cliente: 

    Telefono: 

      E-mail: 

Per impostare l'orario di consegna possimo usare l'elemento <input> con attributo type=time. Molti dei controlli di questa form hanno attributi che stabiliscono esattamente i valori da specificare. In questo caso desideriamo poter impostare l'orario di consegna in un intervallo predefinito. Questo può essere fatto impostando gli atributi min e max. Inoltre viene specificata una tolleranza sull'oraio di consegna tramite l'attributo step.

In particolare la pizzeria consegna fra le 11 del mattino e le 9 del pomeriggio con una tolleranza dell'orario di un quarto d'ora. Questo si ottiene impostando:min="11:00", max="21:00" e step="900" dove 900=15*60 secondi.

   <div><label>Orario consegna:<input type=time min="11:00" max="23:00" step="900"></label></div>
            

Warning. Nu Html checker, lo strumento che uso per controllare la correttezza del codice html, segnala che non tutti i browser supportano il tipo di attributo time ed invita a considerare l'utilizzo di un "polyfill".

L'elemento <textarea> può essere utilizzato per fornire all'utente un'area di testo libera. In questo caso un elemento <textarea> è messo a disposizione dell'utente per fornire eventuali istruzioni di consegna.

   <div><label>Istruzioni di consegna:<textarea></textarea></label></div>
            

Infine, per rendere la form inviabile, usiamo un elemento <button>

   <div><button>Invia</button></div>
            

Mettiamo insieme tutti questi pezzetti di codice:

<form>
   <div><pre><label>Nome cliente: <input></label></pre></div>
   <div><pre><label>    Telefono: <input  type=tel></label></pre></div>
   <div><pre><label>      E-mail: <input  type=email></label></pre></div>           
   <fieldset>
      <legend> Taglia </legend>
      <div><label> <input type=radio name=size> Piccola</label></div>
      <div><label> <input type=radio name=size> Media</label></div>
      <div><label> <input type=radio name=size> Grande</label></div>
   <fieldset>
   <fieldset>
      <legend> Ingredienti </legend>
      <div><label> <input type=checkbox> Bacon</label></div>
      <div><label> <input type=checkbox> Funghi</label></div>
      <div><label> <input type=checkbox> Cipolla</label></div>
      <div><label> <input type=checkbox> Carciofini</label></div>
   <fieldset>
   <fieldset>
      <legend> Consegna </legend>
      <div><pre><label>Orario:<input type=time min="11:00" max="23:00" step="900"></label></pre></div>
      <div><pre><label>Istruzioni particolari:<textarea></textarea></label></pre></div>
   <div><pre><button>Invia</button></pre></div>
</form>
            

Questo è il risultato finale:

Nome cliente: 

    Telefono: 

      E-mail: 

                Orario: 

Istruzioni particolari: 

Invia

§ 4.10.1.2 Implementazione del processamento della form lato server

Questo paragrafo della specifica fa riferimento alla tecnologia cgi, common gateway interface che, al momento, non conosco. Sono sicuro che le stesse funzioni cgi possano essere fatte con php. Ci tornerò in seguito.

Si assume comunque che lo script, lato server, sia configurato per accettare i seguenti parametri trasmessi nel body di un HTTP POST.