Moduli con Css per siti web per raccogliere informazioni o vendite e-commerce. Come personalizzarli con i fogli di stile

Quasi ci verrebbe da pensare: cos'altro possiamo fare coni CSS? Li abbiamo implementati nelle pagine percreare layout, assegnare classi al testo, ai link, ai titoli,per formattare i form e chi più ne ha, più nemetta...
Ebbene, oggi tratteremo ancora i form, personalizzati con icss, per vedere come possono apparire nelle pagine; cosapossiamo fare per "abbellirli" di più. In unarticolo precedente ho scritto di "accompagnare"l'utente che entra in una sezione del sitopresentandogli, in maniera molto soft, quello che vogliamoegli debba inserire nel campo di testo.

Un elemento molto importante, quando si inserisce un form inuna pagina, è l'elemento<fieldset>. Nella pagina di esempio ne hoinseriti 2: uno per la sezione LOGIN e l'altro per unaipotetica registrazione utente. In questo modo racchiudiamoin un'area le informazioni appartenenti ad una stessacategoria.

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

Per evitare di soffermarmi sulla realizzazione da zero delform, tralascerei le <label> (anch'esseimportantissime) e passerei direttamente ad illustrare ilcodice CSS per realizzare i campi di testo.

Il loro codice non ha nulla di particolare, se non calcolaredi quanto ci si dovrebbe spostare verso destra, attraverso ilpadding, tenendo conto della presenza dell'immagine disfondo. 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 ditesto, sarebbe bene assegnare una classe per ogni tipologia;in questo caso ho creato la classe input.userperchè ho deciso di mettere l'iconcina cheraffigura un utente.
In grassetto ho evidenziato il padding da assegnare: per illato sinistro, ho settato 19px. Calcolando che l'iconcinaè 16X16 pixel, mi sono allontanato ancora di 3px perevitare che andassi a scrivere sullo sfondo. Direi cheè tutto. Altro di particolarmente rilevante, nonc'è.

Stessa cosa per quanto riguarda il campo password. Creare unaseconda classe ed assegnare un altro nome ed un altrobackground.

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

 



Ti potrebbe interessare anche

commenta la notizia