Du er her: WebStudie Websmeden JavaScripts Formular layout Retur til start

JavaScripts - Formular layout

Med dette JavaScript kan du styre designet af dine formularer, så du undgår de evindelige hvide felter - se dette eksempel.

BEMÆRK: JavaScriptet virker desværre kun fuldt ud i Microsoft Internet Explorer 4.01 eller nyere. Har du kendskab til et JavaScript, som også virker i Netscape Navigator, så skal du ikke tøve med at sende det til webstudie@keld.dk.

Først skal du definere udseendet af de forskellige elementer i formularen. Det gør du f.eks. ved at placere koden herunder mellem <HEAD> og </HEAD> i dit HTML-dokument:

<style TYPE="text/css">
.inputStyle {
    BACKGROUND-COLOR: #ffcc00;
    COLOR: #000000;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 10px;
    HEIGHT: auto;
    TEXT-DECORATION: none;
    WIDTH: auto;
}
</style>

Koden kan indeholde en stribe variabler med tilhørende værdier. Nedenfor er de mest brugte variabler listet med de mulige værdier:

background-color
Angiver elementets baggrundsfarve. Kan angives med navn (f.eks.: yellow) eller den hexadecimale værdi (f.eks.: #ffcc00).
color
Angiver skriftens farve. Kan angives med navn (f.eks.: black) eller den hexadecimale værdi (f.eks.: #000000).
font-family
Angiver skrifttypens navn (f.eks.: Verdana, Arial eller Helvetica) eller en af 5 generelle skrifttyper: serif, sans-serif, cursive, fantasy og monospace.
font-size
Angiver skrifttypens størrelse. Du kan vælge mellem absolutte eller relative værdier.
En absolut værdi angives med en fast pixel-størrelse (f.eks.: 12px) eller med en af 7 generelle størrelser: xx-small, x-small, small, medium, large, x-large eller xx-large.
En relativ værdi angives som en procentsats (f.eks.: 110%) eller med en af 2 generelle størrelser: smaller eller larger.
font-style
Angiver om skriften skal være normal, kursiv eller med en hældning (normal, italic, oblique).
font-weight
Angiver skrifttypens tykkelse. Der kan angives en absolut værdi (normal, bold), et tal (100, 200, 300, 400, 500, 600, 700, 800, 900) eller en relativ værdi (bolder, lighter).
text-decoration
Egenskab til at dekorere teksten. du kan vælge mellem understregning (underline), overstregning (overline), gennemstregning (line-through), blinkende tekst (blink) eller ingen dekoration (none).
height
Angiver højden på indholdet i et felt.
width
Angiver bredden på indholdet i et felt.

Koden skal kaldes i de elementer, som du ønsker skal defineres via koden. Det gør du ved at placere CLASS="inputStyle" i det enkelte element. Herunder ser du et eksempel på en simpel formular.

<FORM ENCTYPE="text/plain" NAME="test">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" CLASS="inputStyle">
</FORM>

God fornøjelse med dine formularer.

[ start ]   [ indhold ]   [ e-mail ]