Un form in HTML5

8 aprile 2010

Poi passiamo a dare uno stile all’elemento form che racchiude tutti i campi:

form#payment {
background: #9cbc2c;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
}

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:

form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type {
margin-bottom: 0;
}

A questo punto rendiamo grandi ed evidenti gli elementi legend. Applichiamo pure un’ombreggiatura di un verde chiaro per evidenziare questo dettaglio:

form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}

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:

  • 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.
form#payment > fieldset > legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}

Infine, dobbiamo cambiare lo stile della legend che fa parte del gruppo dei radio-button, per farla apparire visivamente come una label:

form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}

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:

form#payment ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}

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.

form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment label[for=visa] {
background-image: url(visa.gif);
}
form#payment label[for=amex] {
background-image: url(amex.gif);
}
form#payment label[for=mastercard] {
background-image: url(mastercard.gif);
}
form#payment fieldset fieldset label:hover {
cursor: pointer;
}

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:

form#payment input:not([type=radio]),
form#payment textarea {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not([type=submit]):focus,
form#payment textarea:focus {
background: #eaeaea;
}
form#payment input[type=radio] {
float: left;
margin-right: 5px;
}

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:

form#payment button {
background: #384313;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}
form#payment button:hover {
background: #1e2506;
cursor: pointer;
}

Finito! Potete vedere il form completo su questa pagina.

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.

Se vuoi aggiornamenti su Un form in HTML5 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Un form in HTML5

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing