Ausführbare HTML-Docs: HTML Button

Q: Wie erstelle ich einen Button in HTML?

Schreib Click me . Der Text zwischen den Tags ist die Beschriftung. Füg in JavaScript einen click-Listener hinzu, damit er etwas tut, oder setz ihn mit type="submit" in ein , um das Formular abzusenden.

Q: Was ist der Standardtyp eines HTML-Buttons?

submit. Ein ohne type-Attribut in einem Formular sendet dieses Formular beim Klick ab, deshalb kann ein einfacher Button in einem Formular die Seite neu laden. Schreib type="button" an jeden Button, der stattdessen JavaScript ausführt.

Q: Was ist der Unterschied zwischen button und input type=submit?

Beide senden ein Formular ab. kann zwischen seinen Tags HTML enthalten (ein Icon, fetten Text), während seine Beschriftung aus dem Attribut value nimmt und nur reinen Text enthalten kann. Moderner Code nimmt meistens .

Q: Wie deaktiviere ich einen Button in HTML?

Füg das Attribut disabled hinzu: Save . Ein deaktivierter Button lässt sich weder anklicken noch fokussieren, und sein name und value werden nicht mit dem Formular gesendet. Entferne das Attribut (btn.disabled = false in JavaScript), um ihn wieder zu aktivieren.

Q: Wie lasse ich einen HTML-Button auf eine andere Seite führen?

Nimm einen Link, der wie ein Button gestylt ist: See pricing . Ein ist für Aktionen auf der aktuellen Seite. Einen Button in ein zu packen ist ungültiges HTML.

Q: Warum lädt mein Button die Seite neu?

Er steht in einem und hat keinen type, ist also ein Absende-Button, und der Browser sendet das Formular und lädt die Antwort. Füg ihm type="button" hinzu oder ruf in einem submit-Listener event.preventDefault() auf, wenn du das Formular mit JavaScript verarbeitest.

So erstellst du einen Button in HTML

Ein Button ist das <button>-Element. Der Inhalt zwischen den Tags ist das, was der Nutzer sieht, und type="button" sagt, dass er dein Skript ausführt, statt ein Formular abzusenden. Klick ihn in der Vorschau an:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

Mehr braucht ein funktionierender Button nicht: eine Beschriftung, einen type und etwas, das auf click hört. Der Browser macht ihn per Tastatur fokussierbar und löst ihn mit Enter oder der Leertaste aus, Tastaturnutzer bekommen das also ohne Zusatzaufwand. Ein <div> mit Klick-Handler bekommt nichts davon.

Du siehst vielleicht auch onclick="..." direkt im Tag. Das funktioniert, aber addEventListener hält das Skript aus dem Markup heraus und lässt mehrere Listener einen Button teilen.

Die drei Button-Typen

Das Attribut type entscheidet, was ein Button beim Drücken tut.

`type`	Was er tut	Nimm ihn für
`submit`	Sendet das Formular ab, zu dem er gehört. Das ist der Standard.	Die Hauptaktion eines Formulars
`button`	Von selbst nichts; dein JavaScript entscheidet	Umschalter, Dialoge, Zähler, alles mit Skript
`reset`	Setzt jedes Feld des Formulars auf seinen Anfangswert zurück	Selten; Nutzer drücken ihn aus Versehen

Tipp etwas ein und probier dann jeden Button aus. Die Vorschau verlässt die Seite beim Absenden nicht; sie zeigt die Daten an, die das Formular gesendet hätte.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset stellt den Wert wieder her, der im HTML steht (Ada), kein leeres Feld. Und wenn du type="button" bei Uppercase löschst, wird er zum Absende-Button: Er schreibt den Namen in Großbuchstaben und sendet dann das Formular ab.

HTML Submit Button: name und value mitsenden

Ein Absende-Button kann seinen eigenen name und value tragen. Sie werden nur mitgesendet, wenn genau dieser Button das Formular abgesendet hat. So können sich zwei Buttons ein Formular teilen und dem Server sagen, welche Aktion gewählt wurde:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

Drück auf Publish, und das Formular sendet title=My first post und action=publish. Leer den Titel und drück einen der Buttons: required stoppt das Absenden, und der Browser zeigt seine eigene Meldung. Enter im Textfeld sendet ebenfalls ab, und der Browser behandelt das wie einen Druck auf den ersten Absende-Button, er sendet also action=draft.

Absende-Buttons akzeptieren außerdem Attribute, die das Formular nur für diesen einen Button überschreiben: formaction (eine andere URL), formmethod, formtarget und formnovalidate, das die Validierung überspringt. formnovalidate ist die übliche Wahl für einen Button „Entwurf speichern“, der funktionieren soll, solange Pflichtfelder noch leer sind.

Ein Button außerhalb seines Formulars kann es mit dem Attribut form trotzdem absenden; es nimmt die id des Formulars: <button type="submit" form="signup">Sign up</button>.

Deaktivierte Buttons

Das Attribut disabled schaltet einen Button ab. Ein deaktivierter Button ignoriert Klicks, wird von Tab übersprungen und nicht mit dem Formular gesendet. Browser grauen ihn außerdem aus. Ein übliches Muster ist, den Absende-Button deaktiviert zu lassen, bis eine Bedingung erfüllt ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

In JavaScript ist button.disabled eine boolesche Eigenschaft: Setz sie auf true oder false. In HTML zählt die Anwesenheit des Attributs, disabled="false" deaktiviert den Button also trotzdem.

Ein deaktivierter Button sagt nicht, warum er deaktiviert ist, und Tastatur- und Screenreader-Nutzer, die sich mit Tab bewegen, landen nie auf ihm. Wenn der Grund nicht offensichtlich ist, nenn ihn in einem Text neben dem Button, oder lass den Button aktiv und zeig beim Drücken eine Fehlermeldung.

Einen Button mit CSS stylen

Browser zeichnen Buttons mit eigener Schrift, eigenem Rahmen und Hintergrund. Ein paar Eigenschaften ersetzen das alles. Behalte einen sichtbaren Fokusstil: Daran sehen Tastaturnutzer, wo sie gerade sind.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

Wofür jede Regel da ist:

font: inherit lässt den Button die Schrift der Seite verwenden. Ohne verwenden Buttons die eigene, kleinere Formularschrift des Browsers (13.33px in Chrome und Firefox).
cursor: pointer zeigt den Hand-Cursor. Standardmäßig zeigen Buttons den normalen Pfeil.
:hover, :active und :focus-visible stylen die Zustände für Maus, Drücken und Tastatur. :focus-visible zeigt den Rahmen beim Tastaturfokus, aber nicht nach einem Mausklick, du musst outline also nicht entfernen, um ihn zu vermeiden.
:disabled zielt auf Buttons mit dem Attribut disabled.

Drück in der Vorschau Tab, um zu sehen, wie der gelbe Fokusrahmen zwischen den ersten beiden Buttons wandert. Der deaktivierte wird übersprungen. (Auf dem Mac springen Safari und Firefox nur dann per Tab zu Buttons, wenn die Tastaturnavigation in den Systemeinstellungen eingeschaltet ist; in Safari funktioniert Wahl+Tab auch ohne.) Die vollständige Liste der Zustände findest du unter CSS hover.

Buttons mit Icons

Weil <button> HTML enthalten kann, kommt ein Icon neben dem Text hinein. Ein Button nur mit Icon hat keinen Text, den Screenreader ansagen können, gib ihm also ein aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" am SVG hält es aus dem Barrierefreiheitsbaum heraus, der erste Button wird also als „Add item, Schalter“ angesagt und der zweite als „Delete, Schalter“.

button vs. input type="submit"

<input type="submit"> ist die ältere Art, einen Absende-Button zu schreiben. Beide senden das Formular auf dieselbe Weise ab; der Unterschied liegt darin, was sie enthalten können.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
Beschriftung	Inhalt zwischen den Tags	Das Attribut `value`
Kann Icons oder Markup enthalten	Ja	Nein
Schließendes Tag	Erforderlich	Keins (Void-Element)
Standardtyp	`submit`	Immer submit

Nimm <button>. Der einzige Grund, <input type="submit"> zu behalten, ist bestehendes CSS oder JavaScript, das es auswählt. Es gibt außerdem <input type="button"> und <input type="reset">, dieselbe Idee für die anderen beiden Typen.

Button oder Link?

Ein Button tut etwas auf der aktuellen Seite: absenden, öffnen, umschalten, löschen. Ein Link führt zu einer anderen URL. Wenn sich beim Klick die Adressleiste ändert, sollte es ein <a href> sein, wie ein Button gestylt, wenn das Design es verlangt. Dieses Muster und warum ein Button in einem Link ungültig ist, erklärt die Seite HTML Button als Link.

Barrierefreiheit

Nimm einen echten <button>. Er ist fokussierbar, funktioniert mit Enter und Leertaste und wird als Button angesagt. Das auf einem <div> nachzubauen braucht role, tabindex und Tasten-Handler und ist meistens trotzdem unvollständig.
Jeder Button braucht einen Namen: seinen Text oder aria-label, wenn er nur ein Icon hat.
Behalte einen sichtbaren Fokusstil. outline: none ohne Ersatz lässt Tastaturnutzer orientierungslos zurück.
Mach die Klickfläche groß genug. WCAG 2.2 verlangt mindestens 24 mal 24 CSS-Pixel; ein Innenabstand wie im gestylten Beispiel oben ergibt etwa 40 Pixel Höhe.
Bei einem Umschalter füg aria-pressed="true" oder "false" hinzu und aktualisiere es, wenn sich der Zustand ändert.

Häufige Fehler

Ein Button in einem Formular ohne type. Er sendet das Formular ab. Schreib type="button" an jeden Button, der nicht absenden soll.
Einen Button in einen Link packen, <a href="/x"><button>Go</button></a>. Das ist ungültiges HTML und verhält sich in verschiedenen Browsern unterschiedlich. Nimm ein einziges Element: einen Link, der wie ein Button gestylt ist.
<div onclick> als Button verwenden. Er ist per Tastatur nicht erreichbar.
Den Fokusrahmen entfernen, ohne einen :focus-visible-Stil hinzuzufügen.
disabled="false" schreiben und einen aktiven Button erwarten. Entferne stattdessen das Attribut.
font: inherit vergessen und sich wundern, warum Buttons eine andere Schrift haben als der Rest der Seite.

Häufig gestellte Fragen

Wie erstelle ich einen Button in HTML?

Schreib <button type="button">Click me</button>. Der Text zwischen den Tags ist die Beschriftung. Füg in JavaScript einen click-Listener hinzu, damit er etwas tut, oder setz ihn mit type="submit" in ein <form>, um das Formular abzusenden.

Was ist der Standardtyp eines HTML-Buttons?

submit. Ein <button> ohne type-Attribut in einem Formular sendet dieses Formular beim Klick ab, deshalb kann ein einfacher Button in einem Formular die Seite neu laden. Schreib type="button" an jeden Button, der stattdessen JavaScript ausführt.

Was ist der Unterschied zwischen button und input type=submit?

Beide senden ein Formular ab. <button> kann zwischen seinen Tags HTML enthalten (ein Icon, fetten Text), während <input type="submit"> seine Beschriftung aus dem Attribut value nimmt und nur reinen Text enthalten kann. Moderner Code nimmt meistens <button>.

Wie deaktiviere ich einen Button in HTML?

Füg das Attribut disabled hinzu: <button disabled>Save</button>. Ein deaktivierter Button lässt sich weder anklicken noch fokussieren, und sein name und value werden nicht mit dem Formular gesendet. Entferne das Attribut (btn.disabled = false in JavaScript), um ihn wieder zu aktivieren.

Wie lasse ich einen HTML-Button auf eine andere Seite führen?

Nimm einen Link, der wie ein Button gestylt ist: <a href="/pricing" class="btn">See pricing</a>. Ein <button> ist für Aktionen auf der aktuellen Seite. Einen Button in ein <a> zu packen ist ungültiges HTML.

Warum lädt mein Button die Seite neu?

Er steht in einem <form> und hat keinen type, ist also ein Absende-Button, und der Browser sendet das Formular und lädt die Antwort. Füg ihm type="button" hinzu oder ruf in einem submit-Listener event.preventDefault() auf, wenn du das Formular mit JavaScript verarbeitest.

Verwandte Konzepte