<button>

Das <button> Element erstellt einen anklickbaren Button, der verschiedene Aktionen auslösen kann. Im Gegensatz zu <input type="button"> kannst du innerhalb eines Buttons beliebigen HTML-Content platzieren, wie Text, Bilder oder Icons. Buttons sind essentiell für Formulare und interaktive Webseiten.

Steckbrief <button>

Kategorie: Formulare
Art: Interaktiv
Attribute: 13
Beispiele: 7
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

6 Punkte

Buttons können Formulare absenden, zurücksetzen oder JavaScript-Funktionen ausführen
Du kannst HTML-Elemente wie Icons, Bilder oder formatierten Text im Button verwenden
Das type Attribut bestimmt das Verhalten des Buttons
Standardmäßig hat ein Button den Typ submit, wenn kein type angegeben ist
Buttons sind vollständig tastaturzugänglich und können mit Enter oder Space aktiviert werden
Mit dem disabled Attribut kannst du Buttons deaktivieren

Syntax

index.html

Grundsyntax

<button>Klick mich</button>

Attribute

13 Attribute

Attribut und Beispiel	Beschreibung
Allgemein 5
`type` String type="button"	Bestimmt das Verhalten des Buttons. Mögliche Werte: submit (sendet Formular), button (keine Standardaktion), reset (setzt Formular zurück). Standard ist submit.
`disabled` Boolean disabled	Deaktiviert den Button. Er kann nicht geklickt werden und nimmt nicht am Formular teil.
`name` String name="action"	Name des Buttons, wird beim Absenden als Teil der Formulardaten übermittelt.
`value` String value="delete"	Wert des Buttons, wird zusammen mit name beim Absenden übermittelt. Nur relevant bei type=submit.
`autofocus` Boolean autofocus	Der Button erhält automatisch den Fokus beim Laden der Seite.
Formular überschreiben 6
`form` String form="myForm"	ID des Formulars, zu dem dieser Button gehört. Ermöglicht Buttons außerhalb des form-Elements.
`formaction` URL formaction="/api/save"	Überschreibt die action-URL des Formulars für diesen Button. Nur bei type=submit.
`formmethod` String formmethod="post"	Überschreibt die HTTP-Methode des Formulars (GET oder POST). Nur bei type=submit.
`formenctype` String formenctype="multipart/form-data"	Überschreibt den Encoding-Typ des Formulars. Nur bei type=submit.
`formtarget` String formtarget="_blank"	Überschreibt das target-Attribut des Formulars. Nur bei type=submit.
`formnovalidate` Boolean formnovalidate	Überspringt die Formular-Validierung für diesen Button. Nur bei type=submit.
Popover 2
`popovertarget` String popovertarget="menu"	ID eines Elements mit popover-Attribut, das dieser Button steuert. Macht den Button ohne JavaScript zum Schalter für ein Popover.
`popovertargetaction` String popovertargetaction="show"	Bestimmt, was der Klick mit dem Popover macht: show (öffnen), hide (schließen) oder toggle (umschalten). Standard ist toggle.

Mit popovertarget verbindest du einen Button deklarativ mit einem Popover: Ein Klick öffnet oder schließt das verknüpfte Element, ganz ohne JavaScript. Über popovertargetaction legst du fest, ob der Klick das Popover öffnet, schließt oder umschaltet. Wie das Zusammenspiel funktioniert, liest du im Artikel Das popover-Attribut.

Beispiele

7 Beispiele

index.html

Submit-Button

<form action="/submit" method="post">
  <label>
    Name:
    <input type="text" name="username">
  </label>
  <button type="submit">Absenden</button>
</form>

index.html

JavaScript-Button

<button type="button" onclick="showMessage()">
  Klick mich
</button>

<script>
function showMessage() {
  alert('Button wurde geklickt!');
}
</script>

index.html

Button-Typen

<form>
  <input type="text" name="email" placeholder="Email">

  <!-- Sendet das Formular ab -->
  <button type="submit">Submit</button>

  <!-- Führt nur aus, was JavaScript definiert -->
  <button type="button">Button</button>

  <!-- Setzt alle Formularfelder zurück -->
  <button type="reset">Reset</button>
</form>

index.html

Button mit Icon

<button type="button">
  <svg width="20" height="20" viewBox="0 0 24 24">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
  Weiter
</button>

index.html

Disabled State

<button type="button">Aktiv</button>
<button type="button" disabled>Deaktiviert</button>

index.html

Button mit form-Attribut

<form id="myForm">
  <input type="text" name="username">
</form>

<!-- Button ist außerhalb, aber mit dem Formular verbunden -->
<button type="submit" form="myForm">
  Formular absenden
</button>

index.html

Verschiedene Actions

<form action="/default">
  <input type="text" name="data">

  <!-- Jeder Button sendet an eine andere URL -->
  <button type="submit" formaction="/save">
    Speichern
  </button>

  <button type="submit" formaction="/preview" formtarget="_blank">
    Vorschau
  </button>

  <button type="submit" formaction="/delete" formmethod="delete">
    Löschen
  </button>
</form>

Barrierefreiheit

Buttons sind von Natur aus barrierefrei, aber du solltest einige Dinge beachten. Der Button-Text sollte den Zweck des Buttons klar beschreiben. Vermeide generische Texte wie “Klick hier” oder “Mehr”.

Tastatur-Navigation funktioniert automatisch. Nutzer können mit der Tab-Taste zum Button navigieren und ihn mit Enter oder der Leertaste aktivieren. Der Fokus-Zustand sollte visuell erkennbar sein, damit Tastatur-Nutzer wissen, wo sie sich befinden.

Bei deaktivierten Buttons ist zu beachten, dass sie keinen Fokus erhalten und für Screenreader als nicht interaktiv gekennzeichnet werden. Überlege dir, ob du stattdessen einen aktivierten Button mit einer Fehlermeldung zeigen solltest, damit Nutzer verstehen, warum eine Aktion nicht möglich ist.

Icon-Buttons ohne sichtbaren Text brauchen ein aria-label Attribut, damit Screenreader-Nutzer den Zweck verstehen. Bei Buttons, die einen Zustand ändern, wie zum Beispiel ein Toggle-Button, solltest du aria-pressed verwenden.

Wenn ein Button eine Aktion auslöst, die Zeit braucht, solltest du visuelles Feedback geben. Eine Ladeanimation oder ein deaktivierter Zustand verhindert, dass Nutzer den Button mehrfach klicken.

Häufige Fehler

7 Fehler

01 div oder span als Button

Ein häufiger Fehler ist es, <div> oder <span> Elemente mit Click-Handlern als Buttons zu verwenden. Diese Elemente sind nicht tastaturzugänglich und werden von Screenreadern nicht als Buttons erkannt. Verwende immer das echte <button> Element für klickbare Aktionen. Falls du unbedingt ein anderes Element verwenden musst, füge role="button" und tabindex="0" hinzu und implementiere Tastatur-Handler für Enter und Space.

02 Fehlender type

Wenn du keinen type angibst, ist der Standard submit. Das führt dazu, dass ein Button in einem Formular das Formular absendet, auch wenn das nicht beabsichtigt war. Wenn du einen Button für JavaScript-Aktionen verwendest, setze immer type="button" explizit. Das ist einer der häufigsten Bugs bei Formularen.

03 Leerer Button-Text

Buttons ohne Text oder aria-label sind für Screenreader-Nutzer nutzlos. Bei Icon-Buttons musst du ein aria-label hinzufügen. Auch wenn der Text visuell versteckt ist, sollte er im HTML existieren oder über aria-label bereitgestellt werden.

04 Nested Buttons

Du kannst keine Buttons ineinander verschachteln oder einen Button in einem Link platzieren. Das ist ungültiges HTML und führt zu unerwartetem Verhalten. Wenn du komplexe interaktive Elemente brauchst, überlege dir die Struktur genau oder verwende JavaScript-Event-Handler auf dem äußeren Element.

05 Multiple Submit-Buttons ohne value/name

Wenn du mehrere Submit-Buttons in einem Formular hast, solltest du ihnen unterschiedliche name und value Attribute geben. So kannst du im Backend erkennen, welcher Button geklickt wurde. Ohne diese Attribute weißt du nicht, welche Aktion der Nutzer ausgewählt hat.

06 Button in einem Link

Manchmal sieht man Buttons innerhalb von <a> Tags. Das ist semantisch falsch und führt zu Problemen. Ein Link navigiert zu einer URL, ein Button führt eine Aktion aus. Entscheide dich für eines von beiden. Wenn du einen Link wie einen Button stylen willst, ist das kein Problem, aber verschachtle sie nicht.

07 Fehlende Hover- und Focus-States

Viele Designer vergessen die Zustände für Hover, Focus und Active. Diese sind wichtig für das Nutzer-Feedback und die Barrierefreiheit. Definiere immer alle interaktiven Zustände in deinem CSS.

Browser-Kompatibilität

5 von 5

Das button-Element wird von allen modernen Browsern vollständig unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Interaktive Elemente wie Buttons funktionieren in E-Mails nicht. Die meisten E-Mail-Clients entfernen JavaScript und form-Elemente. Verwende stattdessen gestylte Links, die wie Buttons aussehen.

Apple Mail

Keine
Gmail

Keine
Outlook

Keine
Thunderbird

Keine
Yahoo Mail

Keine

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<button>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter