Personalizzare un form con i CSS

Ebbene, oggi tratteremo ancora i form, personalizzati con i css, per vedere come possono apparire nelle pagine; cosa possiamo fare per "abbellirli" di più. In un articolo precedente ho scritto di "accompagnare" l'utente che entra in una sezione del sito presentandogli, in maniera molto soft, quello che vogliamo egli debba inserire nel campo di testo.

Innanzitutto cominciamo a vedere la pagina di esempio finale. Possiamo discutere sulla scelta delle iconcine utilizzate e dei colori ma... non è più carino così? A me piace, non so a voi. :)

Un elemento molto importante, quando si inserisce un form in una pagina, è l'elemento <fieldset>. Nella pagina di esempio ne ho inseriti 2: uno per la sezione LOGIN e l'altro per una ipotetica registrazione utente. In questo modo racchiudiamo in un'area le informazioni appartenenti ad una stessa categoria.

All'interno del <fieldset>, l'elemento <legend>, il quale indica le informazioni da inserire.

Per evitare di soffermarmi sulla realizzazione da zero del form, tralascerei le <label> (anch'esse importantissime) e passerei direttamente ad illustrare il codice CSS per realizzare i campi di testo.

Il loro codice non ha nulla di particolare, se non calcolare di quanto ci si dovrebbe spostare verso destra, attraverso il padding, tenendo conto della presenza dell'immagine di sfondo. Vediamo prima il campo di testo per lo Username:

input.user {
background-image: url(NomeImmagine.png/gif/jpg); 
background-repeat: no-repeat; 
background-position:left;
background-color:#fff;
width:290px;
color: #666;
padding:3px 5px 3px 19px; 
font-size: 1em;
font-family: 'trebuchet ms', sans-serif;
border: 1px solid #ccc;
height: 27px; 
} 

Presumendo che in una pagina ci saranno più campi di testo, sarebbe bene assegnare una classe per ogni tipologia; in questo caso ho creato la classe input.user perchè ho deciso di mettere l'iconcina che raffigura un utente.
In grassetto ho evidenziato il padding da assegnare: per il lato sinistro, ho settato 19px. Calcolando che l'iconcina è 16X16 pixel, mi sono allontanato ancora di 3px per evitare che andassi a scrivere sullo sfondo. Direi che è tutto. Altro di particolarmente rilevante, non c'è.

Stessa cosa per quanto riguarda il campo password. Creare una seconda classe ed assegnare un altro nome ed un altro background.

Una terza classe l'ho implementata per fare in modo che i restanti campi di testo, nel secondo form, fossero omogenei ed avessere lo stesso sfondo.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati