Guida HTML5: i form – parte 3

Nei precedenti articoli di questa guida dedicati completamente ai form, abbiamo appreso, tra l’altro, come utilizzare i placeholder e le validazioni tramite le regular expression. Nel corso di questa terza parte, invece, esploreremo alcuni nuovi tipi di input introdotti dall’HTML5.

Uno dei limiti nello gestire i form con l’HTML, era proprio legato alla vaghezza con cui veniva utilizzato il tag <input>: checkboxes, caselle di testo, pulsanti e tantissimi altri controlli, venivano identificati con lo stesso tag. Con l’avvento dell’HTML5, invece, campi dedicati a email, url, numeri di telefono, colori, permettono ai browser di dare importanti contributi all’utente. Un browser che supporta i nuovi campi input dell’HTML5, potrebbe:

  • aiutare la validazione – restituendo un messaggio d’errore più coerente. Ad esempio, Chrome riconosce la presenza del simbolo @ come necessaria ai fini della corretta compilazione di un campo di tipo email.
  • autocompletare il campo – attraverso i dati immagazzinati in precedenza nel browser.
  • prevenire errori di compilazione – ad esempio, controllando che in un campo numerico non vengano inserite lettere oppure impedendo di scegliere un range di date impossibile.

Anche in questo caso la compatibilità è un fattore importante e, prima di iniziare, è bene considerare il supporto che i più diffusi browser forniscono alle nuove funzionalità. Come sempre, il mio personale consiglio è quello di affidarsi a caniuse.com:

Schermata 2014-04-18 alle 11.29.32

Indirizzi email

Gli indirizzi email vengono indicati dall’attributo type=”email”. Il nostro tag input dedicato alle email diverrà, quindi:

 

<input id="email" placeholder="esempio@mail.xxx" type="email" required>

In fase di compilazione l’utente, per rispettare i canoni del campo tipizzato, dovrà utilizzare il simbolo @ e il punto. Inoltre, il punto dovrà essere separato da almeno un carattere dopo la @ ed avere almeno due caratteri che lo susseguono.

URL

Gli URL, ovvero gli indirizzi web, vengono indicati dall’attributo type=“url”:

<input id=”indirizzo” type="url">

Il browser non solo si occuperà di controllare la presenza o meno del protocollo (http://, ftp://, https://, mms://, etc.) ma i più moderni visualizzeranno anche una lista di indirizzi facendo appello alla recente cronologia.

Search Box

Con type=”search” si indicano quei campi dediti alla ricerca di contenuti. Utilizzare questo codice:

<input id="ricerca" type="search">

apporta automaticamente dei cambiamenti stilistici al campo, come l’icona X che pulisce il contenuto del campo. Ad esempio, in Chrome, un campo search apparirà così:

Schermata 2014-04-18 alle 11.43.13

Numeri

I numeri possono essere inseriti in un campo definito da type=”number”, che costringerà l’utente ad inserire esclusivamente numeri, a discapito di altri caratteri. Un campo che richiede all’utente di inserire la propria età, potrebbe essere realizzato con questo codice:

<input id="eta" type="number">

Inoltre, specificando gli attributi min e max, possiamo obbligare l’utente a scegliere solo numeri all’interno di un determinato range. Ad esempio, nel nostro caso, vogliamo che il campo età accetti esclusivamente valori compresi tra 18 e 99 anni, quindi utilizzeremo:

<input id="eta" type="number" min="18" max="99">

Se invece, in altre situazioni, dovessimo aver bisogno di aumentare la precisione per includere numeri decimali, ad esempio 3, potremmo farlo utilizzando il tag step in questo modo:

<input id="a" type="number" min="1" max="100" step="0.001">

per ottenere un risultato del genere:

Schermata 2014-04-18 alle 11.48.04I numeri possono però essere gestiti anche in maniera differente, specialmente quando c’è bisogno di meno precisione. L’attributo type=”range”, in concomitanza agli ormai noti min e max, permette di visualizzare un risultato come questo:

Schermata 2014-04-18 alle 11.48.54

Il relativo codice risulterà:

 

0<input type="range" min="1" max="10" value="3">10

dove l’attributo value rappresenta il valore di default.

Date

Per indicare le date, esistono diversi tipi d’attributo che cercherò di riassumere in questa tabella:

type descrizione esempio
date permette di inserire giorno, mese, anno 18-04-2014
time permette di inserire ore e minuti 12:05
datetimelocal permette di inserire sia data che orario separati da una T 18-04-2014T12:05
datetime ha la stessa funzione di datetimelocal ma con l’aggiunta del fuso orario 18-04-2014T12:05+01:00
month permette di inserire mese ed anno 04-2014
week permette di inserire settimana e anno W12-2014

I browser che supportano questi formati danno all’utente diversi vantaggi: mostrano un calendario dal quale è possibile selezionare direttamente la data ed impediscono la scelta di un formato non corretto o di una data impossibile.

Alcuni type, come date, supportano anche min e max, che permettono di selezionare unicamente date all’interno di un range prestabilito. Ad esempio:

<input type="date" min="2014-04-18" max="2014-04-28">

Produrrà, in Chrome, un risultato come questo:

Schermata 2014-04-18 alle 12.15.30

dove l’utente potrà selezionare una data compresa tra il 18 e il 28 Aprile.

Numeri telefonici

Con l’attributo type=”tel” ci si riferisce ai numeri di telefono. Gli unici browser a trarre effettivamente vantaggio da questa specifica, però, sono quelli dei dispositivi mobili che visualizzano, invece della classica tastiera quella numerica. Il codice risulterà:

 

<input id="telefono" type="tel">

Colori

I colori possono essere inseriti tramite l’apposito attributo type=”color”. I browser che supportano questo codice:

 

<input id="colore" type="color">

mostreranno un cosiddetto color picker molto simile a quello utilizzato dalla maggior parte dei programmi di grafica:

Schermata 2014-04-18 alle 12.29.25

Come abbiamo già visto con i numeri, anche in questo caso possiamo settare il valore di default utilizzando l’attributo value ed il numero esadecimale corrispondente al colore desiderato.

 Conclusioni

Ed eccoci giunti alla conclusione di questa terza parte nel mondo dei form. Nella prossima e ultima lezione dedicata a questo tema affronteremo: il tag datalist, le progress bar e sperimenteremo la possibilità di modificare un elemento con contentEditable. Pensi che i miglioramenti introdotti dall’HTML5 nei form, siano sufficienti ed opportuni? Quale altra funzione riterresti a tuo parere fondamentale?

Prima di salutarci, ti ricordo che puoi scaricare il codice completo della lezione usando questo link.

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
8) HTML5: Il canvas – Parte 1

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.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

1 commento

Trackback e pingback

  1. Guida HTML5: il canvas – parte 2 | Your Inspiration Web
    […] nuovi elementi semantici  6)Guida HTML5: i form – Parte 1  7)Guida HTML5: i form – Parte 2 8)Guida HTML5: …

Lascia un Commento

Current day month ye@r *