Nel corso di questo capitolo approfondiremo un aspetto fondamentale del web moderno: i form.

L’HMTL5 non solo ha migliorato sensibilmente l’utilizzo degli elementi già presenti nei form, ma ne ha aggiunti numerosi altri. Ti sorprenderai di come adesso sia possibile creare un form accattivante e funzionale senza dover per forza ricorrere a noiosi codici JavaScript esterni. Cominciamo!

Cos’è un form?

Iniziamo col chiarire un fondamentale concetto: cos’è esattamente un form? Ebbene, un form è un insieme di caselle di testo, liste e pulsanti che gli utenti possono utilizzare per ottenere o inviare porzioni di informazioni. Sicuramente li avrai utilizzati per inviare email, effettuare pagamenti, inserire prodotti in un ecommerce, gestire gli utenti all’interno di un interfaccia amministrativa.

Tutti i form funzionano nella stessa identica maniera: l’utente compila tutti i campi richiesti, il browser li individua, li ‘cattura’ e li invia al web server. Una volta arrivati al web server, i dati, vengono processati da un linguaggio lato server che restituirà l’output opportuno al browser e quindi all’utente. Per chiarire ulteriormente questo processo possiamo riferirci a questo elementare schema:

Ovviamente in questo articolo non tratterò il linguaggio lato server che richiederebbe un’intera guida a sé stante, tuttavia il codice HTML che useremo nel corso degli esempi successivi sarà facilmente adattabile a qualsiasi linguaggio lato server che conosci o desideri imparare.

Un form in HTML4

A mio parere, per avere la migliore panoramica sui cambiamenti apportati da HTML5 ai form, è necessario partire da un semplice form in HTML4 e apportare, gradualmente, tutte le migliorie introdotte dal nuovo linguaggio. Creiamo quindi un form per inviare una domanda d’assunzione che abbia più o meno questo aspetto:

Come prima cosa inseriamo il consueto tag <form> e popoliamolo con 3 differenti <fieldset> ovvero 3 differenti sezioni logiche:

<form>
	<fieldset>
	<legend>Dettagli contatto</legend>
        </fieldset>
	<fieldset>
	<legend>Informazioni personali</legend>
        </fieldset>
	<fieldset>
	<legend>Seleziona la posizione per la quale concorri</legend>
        </fieldset>
</form>

La prima sezione, ‘dettagli contatto’, sarà popolata da alcune caselle di testo dedite a raccogliere basilari informazioni tra cui nome, telefono e indirizzo email:

<fieldset>
           <legend>Dettagli contatto</legend>
          <label for="nome">Nome <em>*</em></label>
          <input id="nome"><br/>
          <label for="telefono">Telefono</label>
          <input id="telefono"><br/>
          <label for="email">Email <em>*</em></label>
          <input id="email"><br/>
</fieldset>

La seconda sezione, ‘informazioni personali’, conterrà una select per indicare il sesso, una textarea e altri campi di testo:

<fieldset>
           <legend>Informazioni personali</legend>
           <label for="eta">Et&agrave; <em>*</em></label>
           <input id="eta"><br/>
           <label for="sesso">Sesso</label>
           <select id="sesso">
                <option value="femminile">femminile</option>
                <option value="maschile">maschile</option>
           </select><br/>
           <label for="note">Perch&eacute; vuoi essere assunto/a?</label>
           <textarea id="note"></textarea>
</fieldset>

Nell’ultima sezione, infine, inseriamo una checkbox con il quale l’utente può segnalare la posizione per la quale concorre:

<fieldset>
           <legend>Seleziona la posizione per la quale concorri</legend>
           <label for="webdesigner">
                <input id="webdesigner" type="checkbox">Web Designer
           </label>
          <label for="webdeveloper">
               <input id="webdeveloper" type="checkbox">Web Developer
          </label>
          <label for="copy">
               <input id="copy" type="checkbox">Copywriter
          </label>
          <label for="graphic ">
               <input id="graphic" type="checkbox">Graphic Designer
          </label>
          <label for="marketing ">
               <input id="marketing" type="checkbox">Marketing
          </label>
</fieldset>

Ricapitoliamo, nella tabella seguente, i principali controlli usati all’interno dei form:

<input type="text">
<input type="password">

<textarea></textarea>

<input type="checkbox">

<input type="radio">

<input type="submit">
<input type="reset">

<select></select>

I segnaposto

Ora che abbiamo creato un form di partenza e ci siamo rinfrescati le idee riguardo i suoi componenti, possiamo migliorarlo con alcune caratteristiche peculiari dell’HTML5.

Iniziamo con l’aggiungere dei segnaposto all’interno dei campi di testo per suggerire all’utente che tipo di informazioni inserire e in che formato farlo:

<label for="nome">Nome <em>*</em></label>
<input id="nome" placeholder=”Nome Cognome”><br/>
<label for="telefono" >Telefono</label>
<input id="telefono" placeholder=”(xxx) xxx-xxxxxxx"><br/>
<label for="email" placeholder=”esempio@mail.xxx”>Email <em>*</em></label>
<input id="email"><br/>

Come abbiamo appena visto, tramite l’utilizzo dell’attributo placeholder possiamo indicare a chi compilerà il form, che preferiremo avere il campo telefono composto secondo lo schema: (xxx) xxx-xxxxxxx.

I browser che non supportano l’HTML5, ignoreranno semplicemente il placeholder senza compromettere la funzionalità stessa del codice. Ovviamente, come consuetudine, i browser più affetti da questo problema sono le vecchie versione di Internet Explorer, per le quali l’unico modo di ovviare al problema è utilizzare del codice JavaScript. Puoi, a tal proposito, dare un’occhiata a questa pagina.

Conclusioni

Nel corso di questo articolo abbiamo creato un basilare form in HTML4 per poi aggiungere il primo attributo tipico dell’HTML: placeholder. Nella seconda parte, invece, ti illustrerò i metodi di validazione attraverso pseudo classi (required, optional, valid, invalid, in-range e out-of-range) e regular expression e l’utilizzo di focus e autofocus.

Nell’attesa puoi scaricare, tramite questo link, il codice completo degli esempi utilizzati in questo articolo.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker