Un modulo con etichette in stile
Come modellare un'etichetta di modulo con CSS Un elemento del modulo utilizzato per etichettare i vari campi e aree di input su un modulo di una pagina Web è l'elemento etichetta. È possibile applicare uno stile utilizzando le regole del foglio di stile a cascata.
Passo 1
Per definire lo stile degli elementi etichetta nel modo in cui appaiono nell'immagine nell'introduzione, è necessario utilizzare l'elemento etichetta con l'attributo "for". Inoltre, è necessario chiudere l'elemento etichetta prima di aggiungere l'elemento "input" stesso. L'HTML per il modulo completo è mostrato nell'illustrazione.
Video del giorno
Passo 2
Per definire lo stile degli elementi etichetta, ho fatto in modo che le etichette vengano visualizzate come elementi a livello di blocco, che sono stati spostati a sinistra. Quindi ho assegnato una larghezza alle etichette in modo che i campi di input fossero tutti a una distanza uniforme dalle etichette. Ho assegnato un colore e reso il testo in grassetto. Ho usato il contenuto generato per aggiungere i due punti (: ) dopo l'etichetta. (I due punti potrebbero non apparire in tutti i browser.)
Ecco il CSS:
etichetta { colore: #B4886B; font-weight: grassetto; blocco di visualizzazione; larghezza: 150px; galleggiante: sinistro; } label: after { content: ": " }
Passaggio 3
Per completezza ti mostrerò anche il CSS utilizzato per definire lo stile del fieldset, poiché gli elementi dell'etichetta sono racchiusi da un fieldset delimitato.
Ecco quel CSS:
fieldset { border: 1px solido #CCA383; larghezza: 400 px; sfondo: #FFE8EF; imbottitura: 3px; } legenda fieldset { background: #CCA383; imbottitura: 6px; font-weight: grassetto; }
Passaggio 4
Potresti fare molte altre cose per modellare gli elementi dell'etichetta. Il mio esempio è solo un modo per farlo.
Il modulo HTML
Cose di cui avrai bisogno
Una conoscenza pratica dell'HTML
Una conoscenza pratica dei CSS
