Et skjema med stilede etiketter
Hvordan style en skjemaetikett med CSS. Et skjemaelement som brukes til å merke de ulike feltene og inndataområdene på et nettsideskjema er etikettelementet. Den kan styles ved å bruke Cascading Style Sheet-regler.
Trinn 1
For å style etikettelementene slik de vises på bildet i introduksjonen, må du bruke etikettelementet med "for"-attributtet. Videre må du lukke etikettelementet før du legger til selve "input"-elementet. HTML-en for det komplette skjemaet er vist i illustrasjonen.
Dagens video
Steg 2
For å style etikettelementene, fikk jeg etikettene til å vises som blokknivåelementer, som ble flytt til venstre. Deretter tildelte jeg en bredde til etikettene slik at alle inndatafeltene skulle være en jevn avstand fra etikettene. Jeg tildelte en farge og gjorde teksten fet. Jeg brukte generert innhold for å legge til et kolon (: ) etter etiketten. (Kolonet vises kanskje ikke i alle nettlesere.)
Her er CSS:
label { farge: #B4886B; font-weight: fet; display: blokk; bredde: 150px; flyte: venstre; } etikett: etter { content: ": " }
Trinn 3
Bare for fullstendighetens skyld vil jeg også vise deg CSS-en som brukes til å style feltsettet, siden etikettelementene er omsluttet av et feltsett med kantlinjer.
Her er den CSS: en:
feltsett { border: 1px solid #CCA383; bredde: 400px; bakgrunn: #FFE8EF; polstring: 3px; } feltsettforklaring { bakgrunn: #CCA383; polstring: 6px; font-weight: fet; }
Trinn 4
Du kan gjøre mange andre ting for å style etikettelementene. Mitt eksempel er bare én måte å gjøre det på.
Skjemaet HTML
Ting du trenger
En praktisk kunnskap om HTML
En praktisk kunnskap om CSS
