HTML/XHTML  »  Articoli  »  HTML5 

Questa è la traduzione dell'articolo Have a Field Day with HTML5 Forms di Inayaili de León pubblicato originariamente su 24 Ways il 3 Dicembre 2009.

I form sono in genere visti come qualcosa di fastidioso su cui lavorare, sia per quel che riguarda il markup sia per quel che riguarda gli stili. Io non sono d'accordo: i form (come le tabelle) sono qualcosa su cui è divertente lavorare.

In questo articolo vedremo come creare un bel form seguendo le definizioni di HTML5 per il markup e tecniche avanzate dei CSS (compresi i CSS3). Sono certa che alla fine della lettura vorrete anche voi creare un form in questo modo.

Ecco cosa realizzeremo:

Figura 1 - Il nostro form nel suo aspetto finale

Le icone usate sono prese da Chalkwork Payments.

Un markup semantico

Andremo a lavorare su un modulo per i pagamenti. Ci sono tre sezioni principali:

• I dettagli sulla persona che compila il modulo
• I dettagli sull'indirizzo
• I dettagli sulla carta di credito

Useremo anche alcuni dei nuovi tipi di input e attributi per gli input di HTML5 per creare campi semanticamente più corretti e usare meno classi e id. In particolare useremo:

• email per il campo destinato all'indirizzo e-mail;
• tel per il campo destinato al numero di telefono;
• number per i dettagli relativi alla carta di credito e al codice di sicurezza;
• required per contrassegnare i campi obbligatori;
• placeholder per le indicazioni di compilazione all'interno di alcuni campi;
• autofocus per assegnare automaticamente il focus al primo campo quando la pagina viene caricata.

Ci sono molti altri tipi di input e di attributi nella specifica HTML5. Per approfondire si può fare riferimento alla pagina dedicata ai form HTML5 sul sito del W3C. Credo che possa essere sufficiente per darvi un'idea di quanto possa essere divertente lavorare sul markup dei form secondo la nuova specifica.

Altre guide

Altre newsletter