Formular design
Hvis du vil designe dine formularer, så de
passer bedre til dine sider, kan du anvende denne kode.
Scriptet kan både anvendes på
en enkelt side, men også i et stylesheet, så knapperne på alle
dine sider får samme design.
Sådan gør du:
Det eneste, du skal gøre, er at indsætte en
lille kode i de felter i din formular, som du vil designe/style.
Det vil normalt være felterne <input> og <textarea>, som du skal
indsætte koden i.
Denne kode skal indsættes:
style="background-color: #99ccff;
color: #0000ff; border:
2px solid #ff0000; font-family:
arial; font-size:
10px; padding:
5px"
Definer selv værdierne markeret med rødt.
|
99ccff |
Baggrundsfarven på
feltet.
Værdien angives i
hexaværdi. Det lille "#" foran skal blive stående. |
|
0000ff |
Den farve som teksten
skrives med i feltet.
Værdien angives i
hexaværdi. Det lille "#" foran skal blive stående. |
|
2px
solid #ff0000 |
Ramme eller kant på
feltet.
Forrest angives tykkelsen
i pixel. Hernæst typen som kan være fx solid, none, dotted, dashed el.l. Til sidst angives farven i hexaværdi. |
|
arial |
Skrifttypen
Skriv navnet på den
font-type du vil anvende. |
|
10px |
Skriftstørrelse.
Værdien angives normalt i pixel
eller punkter. Fx "10px" eller "2pt". |
|
5px |
Padding er indvendig
margen. Altså hvor stor afstanden skal være fra teksten
til kanten af feltet. |
Indsat i et tag kan det fx se
sådan ud:
<textarea
style="background-color: #0000ff; color: #ffff00; border: 4px
solid #003399; font-family: verdana; font-size: 10 pt; padding:
5px " rows="4" name="text" cols="20">Prøv
selv at skrive noget</textarea>
Eller sådan:
<input style="background-color:
#99ccff; color: #0000ff; border: 2px solid #000066;
font-family: arial; font-size:
12 pt; padding: 5px;
height: 20px" type="text"
name="navn" size="20"
value="Starttekst">
Hvis koden indsættes i et
<input> tag som her, kan du med fordel også angive en højde (height).
Dette er markeret med blåt i ovenstående eksempel.
Eksempel:
Her ser kan du se, hvordan de
to ovenstående koder ser ud.
Forbedring af koden
I ET STYLESHEET/TYPOGRAFIARK
Du kan også style dine form
felter ved brug af stylesheet. Så skal du bare huske både at
lave en style til <input> tags og <textarea> tags. De koder du
skal sætte ind i dit stylesheet kunne fx se således ud:
input { border: 2px
solid #ff0000;
padding:
5px;
background-color: #99ccff;
color: #0000ff;
font-family:
impact;
font-size:
10px;
height:
30px }
textarea { border: 2px solid #ff0000;
padding:
5px;
background-color: #99ccff;
color: #0000ff;
font-family:
impact;
font-size:
12pt}
Hint:
Hvis du kombinerer denne kode
med styling af scrollbars og knapper. Kan du opnå nogle flotte resultater.
Eksempel >>
Til toppen >> |
