Da html.it
----------------
Questa è la traduzione dell'articolo
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
Un markup semantico
Andremo a lavorare su un modulo per i pagamenti. Ci sono tre sezioni principali:
Lavorare sulle basi
Ciascuna sezione del form sarà racchiusa all'interno di un fieldset. Nel caso dei radio-button destinati alla scelta del tipo di carta, racchiuderemo le opzioni in un altro fieldset annidato. Useremo anche una lista ordinata per raggruppare ciascuna coppia input/label. Ciò ci fornirà una sorta di aggancio semantico per gli stili da applicare e renderà anche più semplice la lettura del form quando ad esso non sono applicati stili:
Ecco dunque il markup su cui lavoreremo:
Abbellire le cose
Per prima cosa, iniziamo aggiungendo alcune impostazioni di default al nostro form resettando i margini e il padding degli elementi e aggiungendo un font di default per la pagina:
Poi passiamo a dare uno stile all'elemento form che racchiude tutti i campi:
Rimuoviamo anche il bordo dai fieldset e applichiamo un po' di margine inferiore. Usando la pseudo-classe :last-of-type rimuoviamo il margine inferiore dall'ultimo fieldset perché non ne abbiamo bisogno:
A questo punto rendiamo grandi ed evidenti gli elementi legend. Applichiamo pure un'ombreggiatura di un verde chiaro per evidenziare questo dettaglio:
Ora le nostre legend hanno un magnifico aspetto. Ma perché non aggiungere una chiara indicazione dei passi necessari per compilare il form? Invece di aggiungere tale indicazione manualmente ad ogni legend, possiamo usare dei contatori automatici.
Per aggiungere un contatore ad un elemento dobbiamo usare le pseudo-classi :before e :after per aggiungere contenuto attraverso i CSS. Seguiremo questi passi:
Infine, dobbiamo cambiare lo stile della legend che fa parte del gruppo dei radio-button, per farla apparire visivamente come una label:
Applicare gli stili alle liste
Per le nostre liste useremo solo dei bordi arrotondati, un bordo semi-trasparente e uno sfondo. Dato che usiamo colori RGBa, dovremmo fornire anche un'opzione alternativa per i browser che non li supportano (va messa prima della definizione dei colori RGBa). Per le liste annidate elimineremo queste proprietà perché si sovrapporebbero alle altre:
Controlli dei form
Ora dobbiamo solo applicare gli stili agli elementi label, input e button.
Tutte le label avranno lo stesso aspetto, tranne quella dei radio-button. Floatteremo tutte le label a sinistra e assegneremo a ciascuna una larghezza.
Per le label dei tipi di carta di credito aggiungeremo come sfondo un'icona ed elimineremo alcune delle proprietà che non sono necessarie. Useremo il selettore di attributo per specificare l'immagine di sfondo per ciascuna label (in questo caso useremo l'attributo for di ogni label).
Per aggiungere un dettaglio extra, assegneremo un cursore specifico (cursor: pointer) alle label dei radio-button per lo stato di :hover: in questo modo l'utente sa che può semplicemente cliccare per selezionare un'opzione.
Ci siamo quasi. Per quanto riguarda gli elementi input, vogliamo applicare uno stile a tutti i campi, tranne ai radio-button. Useremo per questo scopo la pseudo-classe :not(). Grazie a quest'ultima possiamo identificare tutti gli input tranne quelli che hanno un type uguale a radio.
Faremo anche in modo di aggiungere degli stili per lo stato di :focus e per i radio-button:
Per concludere, il pulsante di invio. Useremo su button una bella tipografia e un'ombreggiatura sul testo, allineeremo tutto al centro del form e assegneremo colori di sfondo diversi a seconda dello stato:
Finito! Potete vedere il form completo su
Il form non avrà lo stesso aspetto su tutti i browser. Internet Explorer non supporta gli angoli arrotondati, come le versioni non ultime di Opera; i nuovi tipi di input sono resi come campi normali su alcuni browser; alcune delle funzionalità più avanzate dei CSS che abbiamo usato non sono supportate da tutti i navigatori. Ciò non significa che non possiate usarli sin da ora e semplificare il vostro processo di sviluppo.
----------------
Questa è la traduzione dell'articolo
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
di Inayaili de León pubblicato originariamente su Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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
- 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.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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.Lavorare sulle basi
Ciascuna sezione del form sarà racchiusa all'interno di un fieldset. Nel caso dei radio-button destinati alla scelta del tipo di carta, racchiuderemo le opzioni in un altro fieldset annidato. Useremo anche una lista ordinata per raggruppare ciascuna coppia input/label. Ciò ci fornirà una sorta di aggancio semantico per gli stili da applicare e renderà anche più semplice la lettura del form quando ad esso non sono applicati stili:
Ecco dunque il markup su cui lavoreremo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per prima cosa, iniziamo aggiungendo alcune impostazioni di default al nostro form resettando i margini e il padding degli elementi e aggiungendo un font di default per la pagina:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Poi passiamo a dare uno stile all'elemento form che racchiude tutti i campi:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Rimuoviamo anche il bordo dai fieldset e applichiamo un po' di margine inferiore. Usando la pseudo-classe :last-of-type rimuoviamo il margine inferiore dall'ultimo fieldset perché non ne abbiamo bisogno:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per aggiungere un contatore ad un elemento dobbiamo usare le pseudo-classi :before e :after per aggiungere contenuto attraverso i CSS. Seguiremo questi passi:
- creaiamo un contatore usando la proprietà counter-reset sull'elemento form;
- richiamiamo il contatore con la proprietà content usando lo stesso nome dato in precedenza;
- con la proprietà counter-increment indichiamo che per ogni elemento che corrisponde al nostro selettore il contatore sarà incrementato di 1.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per le nostre liste useremo solo dei bordi arrotondati, un bordo semi-trasparente e uno sfondo. Dato che usiamo colori RGBa, dovremmo fornire anche un'opzione alternativa per i browser che non li supportano (va messa prima della definizione dei colori RGBa). Per le liste annidate elimineremo queste proprietà perché si sovrapporebbero alle altre:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ora dobbiamo solo applicare gli stili agli elementi label, input e button.
Tutte le label avranno lo stesso aspetto, tranne quella dei radio-button. Floatteremo tutte le label a sinistra e assegneremo a ciascuna una larghezza.
Per le label dei tipi di carta di credito aggiungeremo come sfondo un'icona ed elimineremo alcune delle proprietà che non sono necessarie. Useremo il selettore di attributo per specificare l'immagine di sfondo per ciascuna label (in questo caso useremo l'attributo for di ogni label).
Per aggiungere un dettaglio extra, assegneremo un cursore specifico (cursor: pointer) alle label dei radio-button per lo stato di :hover: in questo modo l'utente sa che può semplicemente cliccare per selezionare un'opzione.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Faremo anche in modo di aggiungere degli stili per lo stato di :focus e per i radio-button:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Il form non avrà lo stesso aspetto su tutti i browser. Internet Explorer non supporta gli angoli arrotondati, come le versioni non ultime di Opera; i nuovi tipi di input sono resi come campi normali su alcuni browser; alcune delle funzionalità più avanzate dei CSS che abbiamo usato non sono supportate da tutti i navigatori. Ciò non significa che non possiate usarli sin da ora e semplificare il vostro processo di sviluppo.
Ultima modifica:
