Web Design  »  Articoli  »  Web design 

Dopo aver visto come Elementi essenziali e supplementari nella costruzione dei form in questo articolo vedremo come sia possibile personalizzare e impaginare i form attraversoesempi concreti che coinvolgono html e fogli di stile.

Form(a) e funzione

Un principio noto del design è che la forma segue la funzione. È un concetto molto semplice: si sostiene che la forma di un oggetto è conseguenza del suo scopo. Provate per esempio a immaginare un paio di forbici con una forma diversa... sarebbe possibile? Potreste usarle? E soprattutto.. riconoscereste subito che sono forbici? Tale principio si può applicare anche al webdesign, modificandolo in la presentazione segue la funzione.

Il modo in cui vengono presentati di default gli elementi dei form dipende molto dal sistema operativo e dal browser in uso. Ad essi si possono applicare molte proprietà CSS, come mostrato nell'articolo Moduli con stile: usare i CSS con i form, ma ci sono alcuni punti fermi che andrebbero tenuti in considerazione. Vediamo un paio di esempi da non seguire che ho "catturato" sul web:

Come si può notare i due campi di input e il bottone di submit hanno la stessa presentazione. A prima vista si fatica a riconoscere il bottone di submit... Il prossimo esempio è un caso in cui si è voluto imitare l'apparenza di un modulo cartaceo:

&46;&46;&46;a tal punto che potrebbe venire in mente all' utente di stampare la pagina e compilare il modulo con carta e penna.

Il punto essenziale è che l'utente dovrebbe poter riconoscere un modulo on-line e le sue parti, e i CSS per presentare elementi di form andrebbero usati con moderazione. Campi di input dovrebbero avere sfondo bianco o molto chiaro e bordi ben visibili, il bottone di submit dovrebbe avere un colore che spicca e preferibilmente bordi differenti da quelli degli altri elementi dei form.

Vedremo alcuni possibili modi di personalizzazione dei singoli elementi dei form negli esempi dell'articolo. Prima di procedere con il layout dei form, un paio di premesse.

Non ereditarietà delle proprietà CSS per gli elementi dei form

Una cosa da considerare lavorando con i form è che i loro elementi (in particolare input, select e textarea) non ereditano nessuna proprietà CSS dai loro antenati. Per esempio, se nel codice HTML un form è contenuto in un div con sfondo blu e carattere serif, i campi di input non ne risentiranno minimamente, così come non influisce se la pagina ha testo con dimensionamento relativo o fisso: il testo degli input resterà comunque della stessa dimensione (almeno con Internet Explorer). L'unico modo per personalizzare elementi di form è quindi intervenire direttamente sugli stessi.

Altri articoli

Altre guide

Altre newsletter