Knapper (buttons) med HTML

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.

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:


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.

Attribut	Værdier	Effekt
AUTOFOCUS	autofocus	Specificerer, at det er denne knap der automatisk får fokus, når siden vises.
DISABLED	disabled	Specificerer, at knappen skulle være slået fra.
FORM	form_id	Specificerer en eller flere forms, som knappen hører til.
FORMACTION	URL	Specificerer hvor formens data sendes hen. Kun ved TYPE="submit".
FORMENCTYPE	application/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"
FORMMETHOD	get post	Specificerer hvordan form-data skal sendes (dvs. hvilken HTTP metode der skal bruges). Kun ved TYPE="submit"
FORMNOVALIDATE	formnovalidate	Specificerer 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"
NAME	navn	Specificerer et navn til knappen
TYPE	button reset submit	Specificerer knaptypen
VALUE	Tekst	Specificerer knappens startværdi

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:


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:


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.