HTML <button>-Tag
Das HTML <button>-Tag erstellt klickbare Schaltflächen. Erfahren Sie mehr über das type-Attribut, Styling, den disabled-Zustand und Barrierefreiheit.
Das <button>-Tag erstellt eine klickbare Schaltfläche auf der Webseite. Anders als eine Schaltfläche, die mit dem <input>-Tag erstellt wird, kann ein <button> zwischen seinem öffnenden und schließenden Tag umfangreiche Inhalte enthalten – Text, Bilder oder andere Inline-HTML-Elemente. Dadurch ist es heutzutage das bevorzugte Element für die meisten Schaltflächen, da es einfacher zu gestalten ist und das Kombinieren eines Symbols mit einer Beschriftung ermöglicht.
Diese Seite behandelt die <button>-Syntax, das wichtige type-Attribut (und den Fehler, der entsteht, wenn man es innerhalb eines Formulars vergisst), das Styling, den disabled-Zustand, die Barrierefreiheit und den Vergleich von <button> mit <input>.
In der Vergangenheit verwendeten manche Entwickler <input type="button"> anstelle von <button>, weil sehr alte Versionen des Internet Explorer <button> inkonsistent darstellten. Diese Eigenheit ist längst verschwunden – in modernen Browsern ist <button> die empfohlene Wahl.
Syntax
Das <button>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<button>) und schließenden (</button>) Tag geschrieben.
Beispiel des HTML-<button>-Tags:
Beispiel des HTML-<button>-Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>Das type-Attribut
Das type-Attribut legt fest, was eine Schaltfläche tut. Es gibt drei Werte:
submit— sendet das übergeordnete Formular ab.reset— setzt alle Formularelemente auf ihre Anfangswerte zurück.button— tut von sich aus nichts; das Verhalten wird per JavaScript definiert.
Der häufigste Fehler: Innerhalb eines <form> hat ein <button> ohne type standardmäßig den Wert type="submit". Eine Schaltfläche, die als einfache Aktionsschaltfläche gedacht war, sendet also das Formular ab (und lädt oft die Seite neu), sobald sie angeklickt wird. Setzen Sie für nicht-sendende Schaltflächen innerhalb eines Formulars immer explizit type="button".
Beispiel für submit, reset und button:
Beispiel der drei Schaltflächentypen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit sendet das Formular ab, Reset leert das Textfeld und Say hi führt nur sein JavaScript aus, ohne das Formular zu berühren.
CSS-Stile verwenden
Sie können CSS-Stile auf das <button>-Tag anwenden, um das Aussehen der Schaltfläche, ihre Größe, Farbe, Text-Schriftart und mehr zu verändern.
Beispiel des <button>-Tags mit CSS-Stilen:
Beispiel des HTML-<button>-Tags mit CSS-Farb- und Schriftarteigenschaften
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Ergebnis
Der disabled-Zustand
Eine Schaltfläche mit dem disabled-Attribut kann weder angeklickt noch fokussiert werden; sie löst keine Ereignishandler aus und sendet kein Formular ab. Browser stellen sie außerdem ausgegraut dar, damit Benutzer erkennen, dass sie inaktiv ist. Dies ist nützlich, wenn eine Aktion nicht verfügbar ist – beispielsweise solange ein Formular noch nicht korrekt ausgefüllt wurde.
Beispiel einer deaktivierten Schaltfläche
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Attribute
Das <button>-Tag hat keine erforderlichen Attribute. Wir empfehlen jedoch, immer type="button" zu setzen, wenn das Tag als gewöhnliche (nicht-sendende) Schaltfläche verwendet wird, da ein nicht gesetzter type innerhalb eines Formulars standardmäßig auf submit gesetzt wird.
| Attribute | Wert | Beschreibung |
|---|---|---|
autofocus | autofocus | Gibt an, dass die Schaltfläche nach dem Laden der Seite den Fokus erhalten soll. |
disabled | disabled | Deaktiviert die Schaltfläche. (Wird verwendet, wenn die Schaltfläche nach einer bestimmten Aktion aktiv werden soll.) |
form | form_id | Gibt ein oder mehrere Formulare an, zu denen die Schaltfläche gehört. Wenn die Schaltfläche mehreren Formularen zugeordnet ist, müssen deren Bezeichner (form_id) durch Leerzeichen getrennt werden. |
formaction | URL | Definiert die Adresse, an die die Formulardaten nach dem Klicken auf die Schaltfläche gesendet werden. (Wird nur für Schaltflächen mit dem Attribut type="submit" verwendet.) |
formenctype | application/x-www-form-urlencoded | Legt fest, wie die Formulardaten beim Absenden kodiert werden sollen. (Nur für type="submit".) Alle Zeichen werden vor dem Absenden des Formulars kodiert (Standardwert). |
multipart/form-data | Kodiert Daten als Multipart-MIME. | |
text/plain | Leerzeichen werden durch das Zeichen „+" ersetzt, Symbole werden jedoch nicht kodiert. | |
formmethod | get | Definiert die Methode der HTTP-Anfrage, die beim Absenden eines Formulars verwendet wird (nur für type="submit"). Übergibt die Formulardaten in der Adresszeile („name = value"), die nach dem Fragezeichen an die URL der Seite angehängt und durch ein kaufmännisches Und (&) getrennt werden. |
post | Der Browser kommuniziert mit dem Server und sendet die Daten zur Verarbeitung. | |
formnovalidate | formnovalidate | Gibt an, dass die Formulardaten beim Absenden nicht validiert werden sollen (nur für type="submit"). |
formtarget | _blank | Gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt wird (nur für type="submit"). Öffnet die Antwort in einem neuen Fenster. |
_self | Öffnet die Antwort im aktuellen Fenster. | |
_parent | Öffnet die Antwort im übergeordneten Frame. | |
_top | Öffnet die Antwort im vollbreiten Fenster. | |
name | name | Definiert den Namen der Schaltfläche. |
type | button | Definiert eine gewöhnliche Schaltfläche. |
reset | Schaltfläche, die das Formular von den eingegebenen Daten leert. | |
submit | Schaltfläche zum Senden von Formulardaten. | |
value | text | Definiert den Wert der Schaltfläche. |
Das <button>-Tag unterstützt außerdem die Globalen Attribute und die Ereignis-Attribute.
Barrierefreiheit: einer Schaltfläche einen barrierefreien Namen geben
Jede Schaltfläche benötigt einen barrierefreien Namen – den Text, den ein Screenreader vorliest. Bei einer normalen Textschaltfläche ist der Name einfach der Text zwischen den Tags. Das Problem tritt bei reinen Symbolschaltflächen auf, bei denen kein sichtbarer Text vorhanden ist.
Wenn sich innerhalb der Schaltfläche nur ein Bild befindet, geben Sie dem <img> ein alt-Attribut, das die Aktion beschreibt, nicht das Bild. Die Schaltfläche übernimmt diesen Text dann als ihren Namen:
<button type="button">
<img src="search.png" alt="Search">
</button>Hier beschreibt alt="Search", was die Schaltfläche tut, sodass ein Screenreader „Search, Schaltfläche" ankündigt.
Wenn die Schaltfläche weder Text noch ein Bild mit alt enthält – beispielsweise ein Symbol, das mit einer Symbol-Schriftart oder einem eingebetteten SVG gezeichnet wird – fügen Sie ein aria-label hinzu, damit die Schaltfläche trotzdem einen Namen hat:
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>Das aria-label ist der barrierefreie Name der Schaltfläche; aria-hidden="true" verhindert, dass das dekorative Symbol vorgelesen wird. Beachten Sie, dass aria-label und ein inneres <img alt> separate Mechanismen sind – verwenden Sie den jeweils passenden, und lassen Sie eine reine Symbolschaltfläche niemals ohne einen der beiden.
Wie fügt man einer Schaltfläche einen Link hinzu?
Um einen klickbaren Link zu erstellen, der wie eine Schaltfläche aussieht, verwenden Sie ein <a>-Element mit CSS-Styling. Ein <button> innerhalb eines <a> zu verschachteln ist in HTML5 ungültig. Hier ist die richtige Vorgehensweise:
Wie fügt man einer Schaltfläche einen Link hinzu?
<a href="https://example.com" class="button-link">
Button Label
</a>In diesem Beispiel wird das <a>-Element so gestaltet, dass es einer Schaltfläche ähnelt. Wenn der Benutzer darauf klickt, wird er zur verlinkten URL weitergeleitet.
<button> vs. <input type="button">
Eine Schaltfläche kann entweder mit <button> oder mit dem <input>-Tag erstellt werden (type="button", type="submit" oder type="reset"). Sie verhalten sich ähnlich, unterscheiden sich jedoch darin, was sie enthalten können:
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Beschriftungsquelle | Inhalt zwischen den Tags | Das value-Attribut (nur reiner Text) |
| Umfangreicher Inhalt | Ja – Text, Bilder, Symbole, anderes Inline-HTML | Nein – nur Text |
| Styling | Einfacher (Pseudo-Elemente, verschachtelte Elemente) | Eingeschränkter |
| Schließendes Tag | Erforderlich (</button>) | Keines – es ist ein leeres Element |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Verwenden Sie <button>, wenn Sie ein Symbol, formatierten Text oder feinere Styling-Kontrolle benötigen; greifen Sie auf <input> zurück, wenn eine einfache Textbeschriftung ausreicht.