Referens
HTML button

HTML button

HTML button taggen anger en knapp.

Exempel:

HTML:

<button type="button">En knapp</button>

Inuti elementet button går det förutom text även att lägga in bilder.

Exempel:

HTML:

<button type="button"><img src="images/homer.jpg"></button>

Observera att det även går att skapa knappar med elementet input. Skillnaden är att input är ett tomt element som det inte går att lägga in innehåll i.

Läs mer om HTML button i HTML formulär

HTML button
Elementtyp Sluttagg Utfasat Doctype
Blockelement / Inlineelement Ja Nej Strict, Transitional, Frameset
Elementet får innehålla
Blockelement utom form, isindex och fieldset
Blockelement utom a, input, select, textarea, label, button och iframe
Elementet får finnas i
Blockelement, inlineelement utom button
Skillnad mellan HTML och XHTML
Ingen

Tips för HTML button

Använd HTML button för att skapa knappar som kan köra script med hjälp av attributet onclick.

Exempel:

HTML:

<button onclick = "alert('Tack!')">Klicka här!</button>

När html button används i ett formulär för att sända innehåll så skickar olika webbläsare olika innehåll. Internet Explorer skickar texten mellan taggarna medan andra webbläsare skickar värdet av attributet value.
Detta gör det är bättre att använda elementet input.

Det är viktigt att ange attributet type eftersom Internet Explorer sätter standardvärdet till "button" medan de flesta andra webbläsare följer W3C specifikationen och anger värdet till "submit".

HTML button attribut

Valbara attribut
Attribut Beskrivning Värde
disabled Anger att knappen är avstängd disabled
name Anger knappens namn text
type Anger knappens typ button, reset, submit
value Anger objektets värde text

Universella attribut
Attribut Beskrivning Värde
accesskey Anger en snabbtangent för att hoppa till ett element tangentkod
tabindex Anger "tab ordningen" på olika element heltal
id Anger att elements unika identitet text
class Anger vilken klass eller vilka klasser ett element tillhör text
style Tilldelar elementet en egen visuell stil CSS attribut och värden
title Anger en titel för eller kort beskrivning av elementet text
dir Anger textriktning för innehållet rtl, ltr
lang Anger språk på elementets innehåll språkkod
xml:lang Används istället för "lang" när koden skrivs i XHTML 1.0 språkkod

Händelse attribut
Attribut Utlösande händelse Värde
onblur Elementet tappar fokus javascript
onfocus Elementet får fokus javascript
onclick Enkelklick med musen på elementet javascript
ondblclick Dubbelklick med musen på elementet javascript
onkeydown En tangent trycks ned javascript
onkeyup En tangent släpps upp javascript
onkeypress En tangent trycks ned eller hålls nedtryckt javascript
onmousedown En musknapp trycks ned över elementet javascript
onmouseup En musknapp släpps upp över elementet javascript
onmouseover Muspekaren flyttas in över elementet javascript
onmousemove Muspekaren flyttas inom elementet javascript
onmouseout Muspekaren flyttas ut från elementet javascript
| Mer