Stílusos címkékkel ellátott Űrlap
Űrlapcímkék stílusa CSS-sel. Egy űrlapelem, amely a weboldal űrlapjának különböző mezőinek és beviteli területeinek címkézésére szolgál, a címkeelem. Stílusozható a lépcsőzetes stíluslap szabályok segítségével.
1. lépés
Ahhoz, hogy a címkeelemeket úgy alakítsa ki, ahogyan a bevezetőben szereplő képen megjelennek, a címkeelemet a "for" attribútummal kell használni. Ezenkívül be kell zárnia a címkeelemet, mielőtt magát az "input" elemet hozzáadná. Az ábrán látható teljes űrlap HTML-kódja.
A nap videója
2. lépés
A címkeelemek stílusához a címkéket blokk szintű elemekként jelenítettem meg, amelyeket balra lebegtettem. Ezután szélességet rendeltem a címkéknek, hogy a beviteli mezők mindegyike egyenletes távolságra legyen a címkéktől. Hozzárendeltem egy színt, és félkövérré tettem a szöveget. A generált tartalommal kettőspontot (: ) tettem a címke után. (A kettőspont nem minden böngészőben jelenik meg.)
Íme a CSS:
címke { szín: #B4886B; betűsúly: félkövér; kijelző: blokk; szélesség: 150 képpont; balra lebeg; } címke: { content: ": " } után
3. lépés
A teljesség kedvéért megmutatom a mezőkészlet stílusozásához használt CSS-t is, mivel a címkeelemeket egy szegélyezett mezőkészlet zárja be.
Íme a CSS:
fieldset { border: 1px solid #CCA383; szélesség: 400 képpont; háttér: #FFE8EF; padding: 3px; } mezőkészlet jelmagyarázata { háttér: #CCA383; padding: 6px; betűsúly: félkövér; }
4. lépés
A címkeelemek stílusához sok más dolgot is megtehet. Az én példám csak az egyik módja ennek.
Az űrlap HTML
Dolgok, amelyekre szüksége lesz
A HTML gyakorlati ismerete
CSS munkaismeret
