Forsiden » CSS » CSS-formatering af formularknapper

Giv dine formularknapper et lag kosmetik

Den artikel, der er uploadet den 16. dec., var behæftet med en kedelig fejl. Det afsluttende eksempel havde linket som en a-markør inde i button-markøren. Det kan ikke fungere, og eksemplet svarede heller ikke til sidens kildekode.

Den korrekte eksempelkode er nu indsat i stedet for.

Tak til Michael Møller for meldingen om fejlen.

Du har flere muligheder for at lave "grafiske" knapper ved hjæp af HTML. De er bare så forbandet triste. Men det kan du gøre noget ved. Denne artikel fortæller dig hvordan.

Det er ikke alle, der bruger dem vældig meget, men de har jo deres plads i websidekonstruktion – de lidt kedelige grå formularknapper:

HTML-koden, der laver de to knapper, ser således ud:

<input type="button" value="OK" />
<input type="button" value="Send" />

Bemærk, at knapperne er inaktive, der er altså ikke knyttet nogen form for funktionalitet til dem. Her på siden har jeg – af hensyn til websidens formatering – indkapslet de to knapper i en form-markør, men det er ikke nødvendigt. Alle browsere vil vise disse knapper, selvom de ikke er indkapslet i en formular. Det gør dem universelt anvendelige til udløsning af forskellige handlinger på websiden.

Problemet med dem er jo, at de er så forbandet kedelige at se på. Kraftigt inspireret af Mattis artikel (se boksen Herkomst" i højre kolonne), vil jeg her demonstrere, hvorledes du kan lave nogle visuelt mere interessante formularknapper:

Jeg springer ud i det med begge ben og gengiver stylesheet'et, der laver disse 3D-knapper, herunder:

input.knap{
  color:#257;
  font-family:verdana,helvetica,sans-serif;
  font-size:84%;
  font-weight:bold;
  background-color:#9cf;
  border:1px solid;
  border-top-color:#69c;
  border-left-color:#69c;
  border-right-color:#257;
  border-bottom-color:#257;
  
  filter:progid:DXImageTransform.Microsoft.Gradient
    (GradientType=0,
    StartColorStr='#ffffffff',
    EndColorStr='#ff99ccff');
}

Til dette stylesheet har jeg en række forklarende bemærkninger:

  1. Alle farver er holdt i det blå for at det skal passe ind i mit farveskema.
  2. Det er farve #257 til teksten og til højre kant og underkant af knappen.
  3. Overkant og venstre kant gives en lidt lysere blå farve, #69c.
  4. Knappens baggrundsfarve ser du ikke meget til, hvis det er Internet Explorer, du bruger som browser, men den farve – #9cf – vil være en synlig i alle andre browsere som knappens baggrund:
  5. I Internet Explorer derimod skabes en 3D-effekt ved at anvende et filter, der hedder gradient.
  6. Gradient-filteret skal forsynes med et typenummer, der angiver farveblandingens retning (0 = lodret, 1 = vandret), samt startfarven og slutfarven.
  7. Begge disse farveangivelser er forsynet med et 2-cifret hextal foran farvekoden. Dette hextal angiver opaciteten af filteret - altså gennemskinneligheden: ff betyder uigennemskinnelig, mens 00 angiver fuld transparens.
  8. Hvis dette med filtre er nyt for dig, kan du finde mere information og en del eksempler på mine websider om dette emne: IE-specifikke filtereffekter

Rollover-effekt

Du vil i de formaterede eksempler se en rollovereffekt. Du kan ikke bruge a:hover pseudo-klassen her, da der jo ikke tale om formatering af et link. Derfor er du nødt til at gribe til JavaScript event handlerne onmouseover og onmouseout, hvis du ønsker at forsyne dine knapper med en hover- eller mouseover-effekt (det, jeg plejer at kalde rollover).

Du laver et nyt stylesheet med de egenskaber, du ønsker knappen skal have, når musen er over knappen:

input.knaphover {
  border-top-color:#257;
  border-left-color:#257;
  border-right-color:#69c;
  border-bottom-color:#69c;
}

I dette eksempel nøjes jeg med at bytte om på kantfarverne, så de lyse farver kommer forneden og til højre, mens de mørkere farver kommer foroven og til venstre.

Knapperne skal så forsynes med event handlerne, hvorefter HTML-koden kommer til at se således ud:

<input  class="knap" type="button" value="OK" 
onmouseover="this.className='knap knaphover'" 
onmouseout="this.className='knap'" />
<input class="knap" type="button" value="Send" 
onmouseover="this.className='knap knaphover'" 
onmouseout="this.className='knap'" />

Jeg kunne forestille mig, at du studser lidt over classname-referencen. Den er en del af DOM-specikationen, og er en metode til at referere til bestemte elementer på en webside, nemlig dem, der har den (eller de) specificerede class navne:

document.getElementById("elementID").className="knap"

Nu har vi jo ingen ID på vore knapper, men vi kan instantiere referencen ved hjælp af nøgleordet this, således at handlingen udføres alene på den den knap, der faktisk udløser eventen. Og det er det, der nu er skrevet ind i knappernes attributter.

Du vil også bemærke, at vi ved mouseover passerer to class navne til JavaScript fortolkeren, nemlig både knap og knaphover. Hvis du nøjes med knaphover, der jo kun indeholder formregler for kanterne, vil knappens egenskaber i øvrigt falde tilbage til den kedelige grå standardtilstand. Derfor er vi nødt til at "genanvende" vor oprindelige formregelblok og påtrykke de nye egenskaber i en og samme arbejdsgang. Ved mouseout overskrives alle formregler af formregelblokken for knap og knappen vender tilbage til det udseende, vi har defineret i denne formregelblok.

Tabindex- og accesskey attributterne

På denne webside har jeg slået tabindex-attributten fra på alle elementer, der ikke er eksempler (indtil du når bunden af indholdsdelen, så kommer alle de andre elementer). Det betyde, at du kan tabulere dig frem gennem alle eksempelknapperne. Prøver du det, vil se, at disse knapper forandrer sig ganske markant, når de kommer i fokus, også selvom knapperne ikke i sig selv er aktive elementer og selvom de ikke indeholder nogen aktive elementer, specifikt links. Brugeren får altså et tydelig tvisuelt signal om, at en bestemt knap er selekteret (valgt eller i fokus). Det kan vi bruge til noget.

Men før jeg viser, hvordan det kan bruges, vil jeg introducere en "ny" HTML-markør, der først er kommet til med HTML 4, nemlig

Button-makøren

button-markøren blev indført i HTML 4 som en markør, der skulle anvendes som en knap uden for en formular, altså som en erstatning for den ovenfor anførte brug af input type="button". Standardudformningen er ikke anderledes en standardudformningen på formularknapperne, og button-markøren kan ganske som disse anvendes både som en formularknap og som en knap uden for en formular.

Den mest iøjnefaldende forskel er syntaktisk. Hvor input-markøren får sit indhold fra en attribut, får button-markøren sit indhold som alle andre HTML-markører, nemlg indsat mellem markør-begynd og markør-slut, jf. nedenstående menueksempel:

<button>Introduktion</button>
<button>Indre planeter</button>
<button>Asteroider</button>
<button>Ydre planeter</button>
<button>Kometskyen</button>

Hvis du ikke føler dig overmåde fristet til at smide alt hvad du har i hænderne for at lave alle dine menuer om til den slags, kan jeg godt forstå det. Men hvis vi følger op på det, jeg skrev i artiklens første afsnit, er der måske nogle muligheder:

Af pladshensyn gengiver jeg her kun det første menuelement i denne visuelt lidt mere spændende udformning:

<button style="width:50px" onclick="javascript:location.href='url'" 
title="Øveeksempel. Klik på knappen indlæser IKKE en ny side." 
onmouseover="this.className='menuknap menuknaphover'" 
onmouseout="this.className='menuknap'" accesskey="i" class="menuknap">
<em>I</em>ntro
</button>

Som du ser genbruger jeg en hel del fra de foregående eksempler. Nyt her er først og fremmest accesskey-attributten, der opretter en tastaturgenvej til det pågældende element. Holder du således Tastaturets ALT-tast nede og taster I (eller i), kommer det første menuelement tydeligt i fokus, i øvrigt på samme måde, som vis du klikker på linket. Det sidstnævnte jo kun i denne øvelsesmenu, eftersom meningen med en menu jo er, at et klik på et element skal indlæse en anden webside. (Opera-brugere: Tastaturgenvejen aktiveres ved CTRL-ESC-bogstav).

Her har vi grunden til, at jeg har interesseret mig så overmåde for Mattis artikel på webreference.com. Som du kan se af min artikel om accesskey-attributten har vi egentlig brug for button-markørens særlige egenskaber, hvis vi tydeligt visuelt skal indikere, at et menuelement er i fokus.

Oprettet 16. december 2003.

CSS-sektionen:

Herkomst

Denne artikel er baseret på M. C. Mattis artikel Stylish Buttons på webstedet A List Apart.

Windows XP

– har en mere pyntelig brugergrænseflade som standard. Det smitter også af på forskellige elementer i Internet Explorer, blandt de her omtalte kanpper. De ser faktisk ganske nydelige ud i standardtilstanden.

Se også Design-sektionen

Mangler du en artikel i denne sektion – f.eks. om CSS layout af websider – er det måske værd at kigge i design-sek­tion­en. Græn­sen mellem design-begrebet og CSS-formatering er en smule flydende.

Abonner på mit nyhedsbrev

Indtast din e-mail adresse

Søg på siderne

Indtast søgeord

Anbefal siden til en ven

Indtast e-mail adresse

Valid XHTML 1.0!