Ancora lezioni di stile
Ho individuato un modello praticamente perfetto per gestire lo stile dei form in maniera molto flessibile ed anche molto stilosa.
Cominciamo con lo sfruttare completamente l'HTML che mette a disposizione tre tag che vengono utilizzati pochissimo ma che sono molto preziosi per la definizione dei form cioè <fieldset>, <label> e <legend>.
Il tag fieldset è utilissimo per raggruppare blocchi di campi fra di loro sia per individuare raggruppamenti differenti all'interno di uno stesso modulo, sia semplicemente per separare i campi di input dai pulsanti che rappresentano i comandi.
Il tag label invece identifica l'etichetta associata ad un campo di input ed è molto utile per specificare che un certo testo non è messo lì tanto per riempire la pagina. Questo tag specifica un attributo for grazie al quale si può identificare il tag per cui è etichetta così da realizzare una vera e propria associazione.
Infine il tag legend fornisce una descrizione generica che può essere associata ad un fieldset per definirne una descrizione.
Già nella loro definizione di base, rappresentata di seguito, rendono i form molto più leggibili.
Utilizzando i fogli di stile si possono creare dei form molto molto carini come ottimamente descritto in questo sito ed esemplificato in questa immagine.
A questo punto non rimane che aggiungere una descrizione del campo, magari attraverso un help a pop-up come descritto in questa pagina, ed eventualmente aggiungere una evidenziazione del campo attualmente in edit con una combinazione di stili e JavaScript come mostrato in questo link.
Cominciamo con lo sfruttare completamente l'HTML che mette a disposizione tre tag che vengono utilizzati pochissimo ma che sono molto preziosi per la definizione dei form cioè <fieldset>, <label> e <legend>.
Il tag fieldset è utilissimo per raggruppare blocchi di campi fra di loro sia per individuare raggruppamenti differenti all'interno di uno stesso modulo, sia semplicemente per separare i campi di input dai pulsanti che rappresentano i comandi.
Il tag label invece identifica l'etichetta associata ad un campo di input ed è molto utile per specificare che un certo testo non è messo lì tanto per riempire la pagina. Questo tag specifica un attributo for grazie al quale si può identificare il tag per cui è etichetta così da realizzare una vera e propria associazione.
Infine il tag legend fornisce una descrizione generica che può essere associata ad un fieldset per definirne una descrizione.
Già nella loro definizione di base, rappresentata di seguito, rendono i form molto più leggibili.
Utilizzando i fogli di stile si possono creare dei form molto molto carini come ottimamente descritto in questo sito ed esemplificato in questa immagine.
A questo punto non rimane che aggiungere una descrizione del campo, magari attraverso un help a pop-up come descritto in questa pagina, ed eventualmente aggiungere una evidenziazione del campo attualmente in edit con una combinazione di stili e JavaScript come mostrato in questo link.
posted by Gaetano Perrone at
9:00 PM
0 Comments:
Posta un commento
<< Home