Guida HTML5: i form – parte 1

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:

form1

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:

form2

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:

textbox
<input type="text">
<input type="password">
Crea un campo di testo. Nel primo caso i caratteri saranno visibili, nel secondo oscurati da * o •
textbox multilinea
<textarea></textarea>
Crea un campo di testo più ampio che contiene più righe
checkbox
<input type="checkbox">
Crea una checkbox che può essere spuntata o meno
radio
<input type="radio">
Crea un pulsante radio. L’utente può scegliere solo un valore tra quelli proposti
button
<input type="submit">
<input type="reset">
Crea un pulsante. Submit invia i dati a destinazione, reset svuota tutti i campi
list
<select></select>
Crea una lista dalla quale l’utente può selezionare uno o più elementi racchiusi in

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

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

9 commenti

  1. alessio
  2. alessio

Trackback e pingback

  1. Guida HTML5: I form – parte 2 | Your Inspiration Web
    […] prima parte di questo capitolo dedicato ai form, siamo partiti dal creare una base in HTML4 e l’abbiamo utilizzata …
  2. Guida HTML5: il Canvas – Parte 2 | Your Inspiration Web
    […] la struttura 4) Guida HTML5: Immagini e outlines 5) Guida HTML5: nuovi elementi semantici  6) Guida HTML5: i form – Parte …
  3. Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
    […] la struttura 4) Guida HTML5: Immagini e outlines 5) Guida HTML5: nuovi elementi semantici  6) Guida HTML5: i form – Parte …

Lascia un Commento

Current day month ye@r *