Knapper (buttons) med HTML





Hvad går det ud på?

En vigtig del af hele webteknologien er knapper der gør noget. Der er adskillige måder af lave noget man kan klikke på, og så eksekveres en eller anden kommando, og de er gennemgået på de andre sider, men hvad med en helt klassisk og banal knap? Det er der principelt to måder at gøre på.

De standardknapper man kan lave med teknikken der gennemgås her er stærkt begrænset i hvor meget man kan lege med udseendet. Har man brug for noget med lidt mere ramasjang, er det en CSS3-teknik der skal anvendes i stedet.


BUTTON-tag'en

Til HTML har vi en tag der hedder BUTTON. Den fungerer som hovedparten af tags'ene i HTML, med en start- og en slut-tag. Når man klikker på den, afvikler man et JavaScript med attributten ONCLICK. Hvis vi prøver at lave en knap der giver en alert box, så ser koden således ud:

<BUTTON TYPE="button" ONCLICK="alert('Hej med dig!')">Klik på mig!</BUTTON>

På skærmen kommer det til at se således ud:



Teksten på knappen kan styles som man vil, og man kan også have billeder, f.eks.



Man kan som sådan godt ændre knappens farve, men det bliver ikke rigtig godt. Hvis vi prøver at gøre knappen lysegrøn med background-color:light-green, ser resultatet således ud:



Som det ses, bliver den store flade med teksten lysegrøn, men de fire kanter der skal give 3D-effekten med lys og skygge er stadig hvide og grå, så det ser forkert ud i stedet.


BUTTON har en række specifikke attributter, hvoraf en stor del er kommet som en del af HTML 5.

AttributVærdierEffekt
AUTOFOCUSautofocusSpecificerer, at det er denne knap der automatisk får fokus, når siden vises.
DISABLEDdisabledSpecificerer, at knappen skulle være slået fra.
FORMform_idSpecificerer en eller flere forms, som knappen hører til.
FORMACTIONURLSpecificerer hvor formens data sendes hen. Kun ved TYPE="submit".
FORMENCTYPEapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Specificerer hvordan form-data skal være kodet, før den sendes til en server. Kun ved TYPE="submit"
FORMMETHODget
post
Specificerer hvordan form-data skal sendes (dvs. hvilken HTTP metode der skal bruges). Kun ved TYPE="submit"
FORMNOVALIDATEformnovalidateSpecificerer at form-data ikke skal valideres ved indsendelse. Kun ved TYPE="submit"
FORMTARGET_blank
_self
_parent
_top
framenavn
Specificerer hvor responset efter indsendelsen af formen skal vises. Kun ved TYPE="submit"
NAMEnavnSpecificerer et navn til knappen
TYPEbutton
reset
submit
Specificerer knaptypen
VALUETekstSpecificerer knappens startværdi




INPUT- og FORM-tags

Den anden måde at lave knapper på er INPUT-tag'en, som man bruger sammen med FORM-tag'en. Her er teksten på knappen specificeret som attributten VALUE, og man har ikke nogen ONCLICK. I stedet bruger man TYPE="submit", og så er der i FORM-tag'en en attribut der hedder ONSUBMIT hvor man specificerer hvad der skal ske, når man trykker på knappen. Hvis ikke man specificerer en værdi for VALUE, har browserne en standardtekst de sætter på. Hvad teksten er, varierer med browseren og browserens sprog, så det er derfor en god idé at have VALUE specificeret.

Som kode ser det således ud:

<FORM ONSUBMIT="alert('Hej med dig')">
<INPUT TYPE="submit" VALUE="Klik her!">
</FORM>

På skærmen kommer det til at se således ud:





Ændringer i farven er det sammen som BUTTON-tag'en. Man kan ændre fladen, men ikke kanterne, så resultatet bliver ikke specielt godt.

Principielt kan man ikke sætte billeder på knapperne, men med lidt workaround kan man godt lave noget med STYLE og variablerne til background-image. Her er det billedet fra BUTTONS-eksemplet, der er sat ind som en baggrund.

Som kode ser det således ud:

<FORM ONSUBMIT="alert('Hej med dig')">
<INPUT TYPE="submit" VALUE="&#160;&#160;&#160;Klik her!" STYLE="background-image:url(../Graphics/Chapter-Icon.gif); background-repeat:no-repeat">
</FORM>

På skærmen kommer det til at se således ud:





Her kan man selvfølgelig arbejde lidt med de andre variabler til STYLE og finpudse udseendet, så man får det grafiske udtryk man gerne vil have.