Das<button>-HTML-Element ist ein interaktives Element, das von einem Benutzer mit Maus, Tastatur, Finger, Sprachbefehl oder anderer unterstützender Technologie aktiviert wird. Sobald es aktiviert ist, führt es eine Aktion aus, wie beispielsweise das Absenden einesForms oder das Öffnen eines Dialogs.

Standardmäßig werden HTML-Buttons in einem Stil präsentiert, der der Plattform ähnelt, auf der derUser-Agent läuft, aber Sie können das Erscheinungsbild der Buttons mitCSS ändern.

Probieren Sie es aus

<button type="button">Add to favorites</button>

.styled {  border: 0;  line-height: 2.5;  padding: 0 20px;  font-size: 1rem;  text-align: center;  color: white;  text-shadow: 1px 1px 1px black;  border-radius: 10px;  background-color: tomato;  background-image: linear-gradient(    to top left,    rgb(0 0 0 / 0.2),    rgb(0 0 0 / 0.2) 30%,    transparent  );  box-shadow:    inset 2px 2px 3px rgb(255 255 255 / 0.6),    inset -2px -2px 3px rgb(0 0 0 / 0.6);}.styled:hover {  background-color: red;}.styled:active {  box-shadow:    inset -2px -2px 3px rgb(255 255 255 / 0.6),    inset 2px 2px 3px rgb(0 0 0 / 0.6);}

Attribute

Die Attribute dieses Elements beinhalten dieglobalen Attribute.

autofocus

Dieses boolesche Attribut gibt an, dass der Button den Eingabe-Fokus haben soll, wenn die Seite geladen wird.Nur ein Element in einem Dokument kann dieses Attribut haben.

command

Gibt die Aktion an, die auf einem Element ausgeführt werden soll, das von einem Steuer-<button> gesteuert wird, das über dascommandfor-Attribut angegeben ist. Die möglichen Werte sind:

"show-modal"

Der Button zeigt ein<dialog> als Modaldialog an. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der MethodeHTMLDialogElement.showModal() auf dem<dialog>-Element.

"close"

Der Button schließt ein<dialog>-Element. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der MethodeHTMLDialogElement.close() auf dem<dialog>-Element.

"request-close"

Der Button löst eincancel-Ereignis auf einem<dialog>-Element aus, um den Browser darum zu bitten, es zu schließen, gefolgt von einemclose-Ereignis. Dies unterscheidet sich vomclose-Befehl, indem AutorenEvent.preventDefault() auf dascancel-Ereignis aufrufen können, um zu verhindern, dass das<dialog> geschlossen wird. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt. Dies ist ein deklaratives Äquivalent zum Aufruf der MethodeHTMLDialogElement.requestClose() auf dem<dialog>-Element.

"show-popover"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt. Weitere Details finden Sie in derPopover-API. Dies entspricht dem Setzen eines Wertes vonshow für daspopovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der MethodeHTMLElement.showPopover() auf dem Popover-Element.

"hide-popover"

Der Button versteckt ein angezeigt Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion ausgeführt. Weitere Details finden Sie in derPopover-API. Dies entspricht dem Setzen eines Wertes vonhide für daspopovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der MethodeHTMLElement.hidePopover() auf dem Popover-Element.

"toggle-popover"

Der Button schaltet ein Popover zwischen angezeigt und versteckt um. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Weitere Details finden Sie in derPopover-API. Dies entspricht dem Setzen eines Wertes vontoggle für daspopovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der MethodeHTMLElement.togglePopover() auf dem Popover-Element.

Benutzerdefinierte Werte

Dieses Attribut kann benutzerdefinierte Werte darstellen, die mit zwei Bindestrichen (--) beginnen. Buttons mit einem benutzerdefinierten Wert senden dasCommandEvent an das gesteuerte Element.

commandfor

Wandelt ein<button>-Element in einen Befehls-Button um, der ein bestimmtes interaktives Element steuert, indem er den im Button-Attributcommand angegebenen Befehl ausführt. Dascommandfor-Attribut nimmt die ID des zu steuernden Elements als Wert. Dies ist eine allgemeinere Version vonpopovertarget.

disabled

Dieses boolesche Attribut verhindert, dass der Benutzer mit dem Button interagiert: Er kann weder gedrückt noch fokussiert werden.

form

Das<form>-Element, mit dem der Button verknüpft werden soll (seinFormularinhaber). Der Wert dieses Attributs muss dieid eines<form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist der<button> mit seinem Vorfahren<form>-Element verbunden, falls vorhanden.)

Dieses Attribut ermöglicht es Ihnen,<button>-Elemente mit<form>-Elementen an beliebiger Stelle im Dokument zu verknüpfen, nicht nur innerhalb eines<form>. Es kann auch ein Vorfahren-<form>-Element überschreiben.

formaction

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt dasaction-Attribut des Formularinhabers des Buttons. Führt nichts aus, wenn kein Formularinhaber vorhanden ist.

formenctype

Wenn der Button ein Submit-Button ist (es ist innerhalb/verknüpft mit einem<form> und hat nichttype="button"), gibt an, wie die übermittelten Formulardaten kodiert werden sollen. Mögliche Werte:

• application/x-www-form-urlencoded: Der Standard, wenn das Attribut nicht verwendet wird.
• multipart/form-data: Wird zum Übermitteln von<input>-Elementen mit ihrentype-Attributen verwendet, die auffile gesetzt sind.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für echte Formularübermittlungen verwendet werden.

Wenn dieses Attribut angegeben ist, überschreibt es dasenctype-Attribut des Formularinhabers des Buttons.

formmethod

Wenn der Button ein Submit-Button ist (es ist innerhalb/verknüpft mit einem<form> und hat nichttype="button"), gibt dieses Attribut dieHTTP-Methode an, die zum Übermitteln des Formulars verwendet wird. Mögliche Werte:

• post: Die Daten aus dem Formular werden im HTTP-Request-Body enthalten, wenn sie an den Server gesendet werden. Verwenden Sie diese, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie z.B. Anmeldeinformationen.
• get: Die Formulardaten werden an dieaction-URL des Formulars angehängt, mit einem? als Trennzeichen, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formularkeine Seiteneffekte hat, wie Suchformulare.
• dialog: Diese Methode wird verwendet, um anzuzeigen, dass der Button denDialog schließt, mit dem er verknüpft ist, und die Formulardaten überhaupt nicht überträgt.

Wenn angegeben, überschreibt dieses Attribut dasmethod-Attribut des Formularinhabers des Buttons.

formnovalidate

Wenn der Button ein Submit-Button ist, gibt dieses boolesche Attribut an, dass das Formular nichtvalidiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es dasnovalidate-Attribut des Formularinhabers des Buttons.

Dieses Attribut ist auch bei<input type="image"> und<input type="submit">-Elementen verfügbar.

formtarget

Wenn der Button ein Submit-Button ist, ist dieses Attribut ein benutzerdefinierter Name oder ein standardisierter, unterstrichpräfigierter Schlüsselwort, das angibt, wo die Antwort vom Übermitteln des Formulars angezeigt werden soll. Dies ist dername einesBrowsing-Kontextes (ein Tab, Fenster oder<iframe>). Wenn dieses Attribut angegeben ist, überschreibt es dastarget-Attribut des Formularinhabers des Buttons. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Lädt die Antwort in denselben Browsing-Kontext wie der aktuelle. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext — üblicherweise ein neues Tab oder Fenster, abhängig von den Browser-Einstellungen des Benutzers.
• _parent: Lädt die Antwort in den Eltern-Browsing-Kontext des aktuellen. Wenn es keinen Eltern gibt, verhält sich diese Option genauso wie_self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (d.h. den Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen Eltern hat). Wenn es keinen Eltern gibt, verhält sich diese Option genauso wie_self.

interestforExperimentellNicht standardisiert

Definiert das<button>-Element alsInteressen-Auslöser. Sein Wert ist dieid eines Zielelements, das auf irgendeine Weise beeinflusst wird (normalerweise gezeigt oder versteckt), wenn Interesse an dem Auslöser-Element gezeigt oder verloren wird (z.B. durch Hoveren/Ent-Hovern oder Fokussieren/Unfokussieren). Weitere Details und Beispiele finden Sie unterUsing interest invokers.

name

Der Name des Buttons, der als Paar mit demvalue des Buttons als Teil der Formulardaten übermittelt wird, wenn dieser Button zum Übermitteln des Formulars verwendet wird.

popovertarget

Wandelt ein<button>-Element in einen Popover-Steuerbutton um; nimmt die ID des zu steuernden Popover-Elements als Wert. Durch das Etablieren einer Beziehung zwischen einem Popover und seinem Auslöser-Button mithilfe despopovertarget-Attributs ergeben sich zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizitearia-details- undaria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastatur-Fokus-Navigation, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und unterstützende Technologie-(AT)-Benutzer zugänglicher (siehe auchPopover accessibility features).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mitCSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unterPopover anchor positioning.

popovertargetaction

Gibt die Aktion an, die auf einem von einem Steuer-<button> gesteuerten Popover-Element ausgeführt werden soll. Mögliche Werte sind:

"hide"

Der Button versteckt ein angezeigt Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion ausgeführt.

"show"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.

"toggle"

Der Button schaltet ein Popover zwischen angezeigt und versteckt um. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wennpopovertargetaction weggelassen wird, ist"toggle" die Standardaktion, die vom Steuerbutton ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button sendet die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut für Buttons, die mit einem<form> verknüpft sind, nicht angegeben ist oder wenn das Attribut leer oder ungültig ist.
• reset: Der Button setzt alle Steuerungen auf ihre ursprünglichen Werte zurück, ähnlich wie<input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu verärgern.)
• button: Der Button hat kein Standardverhalten und tut standardmäßig nichts, wenn er gedrückt wird. Er kann clientseitige Skripte haben, die auf die Ereignisse des Elements hören, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der mit demname des Buttons assoziiert ist, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird in den Parametern an den Server übermittelt, wenn das Formular mit diesem Button übermittelt wird.

Anmerkungen

Ein Submit-Button mit dem Attributformaction, aber ohne ein zugehöriges Formular, tut nichts. Sie müssen einen Formularinhaber festlegen, entweder indem Sie ihn in ein<form> einbetten oder das Attributform auf die ID des Formulars setzen.

<button>-Elemente sind viel einfacher zu stylen als<input>-Elemente. Sie können inneres HTML-Inhalte hinzufügen (denken Sie an<i>,<br> oder sogar<img>), und verwenden Sie::after und::before Pseudo-Elemente für komplexe Darstellungen.

Wenn Ihre Buttons nicht für das Übermitteln von Formulardaten an einen Server gedacht sind, sollten Sie sicherstellen, dass ihrtype-Attribut aufbutton gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht existierende) Antwort zu laden, was möglicherweise den aktuellen Zustand des Dokuments zerstört.

Während<button type="button"> kein Standardverhalten hat, können Ereignishandler geskriptet werden, um Verhaltensweisen auszulösen. Ein aktivierter Button kann programmierbare Aktionen mitJavaScript ausführen, wie z.B. das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen User-Agents Buttons alsdisplay: flow-root, was einen neuenBlockformatierten Kontext etabliert und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, solange sie nicht überfließen. Wenn der Button als Flex- oder Grid-Container definiert ist, verhalten sich die Kinder wie Flex- oder Grid-Elemente. Ein Button, der aufdisplay: inline gesetzt ist, wird so gestylt, als wäre der Wert aufdisplay: inline-block gesetzt.

Barrierefreiheit

Symbolbuttons

Buttons, die nur ein Symbol anzeigen, haben keinenzugänglichen Namen. Zugängliche Namen bieten Informationen für unterstützende Technologien, wie Screenreader, um darauf zuzugreifen, wenn sie das Dokument analysieren undeinen Barrierefreiheitsbaum erzeugen. Unterstützende Technologien verwenden dann den Barrierefreiheitsbaum, um Seiteninhalte zu navigieren und zu manipulieren.

Um einem Symbolbutton einen zugänglichen Namen zu geben, setzen Sie Text in das<button>-Element, das die Funktionalität des Buttons prägnant beschreibt.

Beispiele

<button name="favorite">  <svg fill="black" viewBox="0 0 42 42">    <path      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>  </svg>  Add to favorites</button>

Resultat

Wenn Sie den Text des Buttons visuell verstecken möchten, ist ein zugänglicher Weg dies zu tun,eine Kombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, aber ihn für unterstützende Technologien parsierbar zu halten.

Es ist jedoch erwähnenswert, dass es hilfreich sein kann, den Button-Text sichtbar zu lassen, damit Personen, die möglicherweise nicht mit der Bedeutung des Symbols vertraut sind oder den Zweck des Buttons nicht verstehen, einen besseren Zugang haben. Dies ist besonders wichtig für Personen, die nicht technologieversiert sind oder unterschiedliche kulturelle Interpretationen des Symbols haben, das der Button verwendet.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Verstehen von WCAG, Erklärung der Leitlinie 4.1
• Verstehen des Erfolgskriteriums 4.1.2 | W3C Verstehen von WCAG 2.0

Größe und Nähe

Größe

Interaktive Elemente wie Buttons sollten eine Fläche haben, die groß genug ist, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Einschränkungen und Menschen, die ungenaue Eingabeformen wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44CSS-Pixel wird empfohlen.

• Verstehen des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verstehen von WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - Das A11Y-Projekt

Nähe

Große Mengen an interaktivem Inhalt — einschließlich Buttons — die in enger visueller Nähe zueinander platziert werden, sollten durch Leerraum voneinander getrennt sein. Diese Abstände sind vorteilhaft für Personen, die motorische Kontrollprobleme haben und versehentlich den falschen interaktiven Inhalt aktivieren könnten.

Abstände können mit CSS-Properties wiemargin erstellt werden.

• Handzittern und das Riesenbutton-Problem - Axess Lab

Informationen zum ARIA-Status

Um den Status eines Buttons zu beschreiben, ist das richtige ARIA-Attributaria-pressed zu verwenden und nichtaria-checked oderaria-selected. Um mehr zu erfahren, lesen Sie die Informationen über dieARIA-Button-Rolle.

Button-Stile

Es ist am besten, den Standard-Fokusring für fokussierte Elemente nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig,sicherzustellen, dass der Fokuszustand genügend Kontrast hat, damit Personen mit Sehschwächen ihn wahrnehmen und Personen mit kognitiven Unterschieden ihn verstehen können.

Die:focus-visible Pseudo-Klasse kann verwendet werden, um Stile auf ein Element anzuwenden, das:focus hat, nur wenn die Heuristik des Benutzer-Agenten bestimmt, dass der Fokus hervorgehoben werden sollte, wie wenn ein<button> Tastaturfokus erhält. Weitere Informationen finden Sie unter:focus vs :focus-visible.

Der Farbkontrast wird durch den Vergleich der Helligkeit der Button-Text- und Hintergrundfarbenwerte mit dem Hintergrund, auf dem der Button platziert ist, bestimmt. Um den aktuellenWeb Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4.5:1 für Textinhalt und 3:1 für großen Text erforderlich. (Großer Text ist als 18.66px undbold oder größer, oder 24px oder größer definiert.)

• WebAIM: Kontrast-Checker
• MDN Verstehen von WCAG, Erklärung der Leitlinie 1.4
• Verstehen des Erfolgskriteriums 1.4.3 | W3C Verstehen von WCAG 2.0

Klicken und Fokus

Ob das Klicken auf einen<button> oder<input>-Button-Typen dazu führt, dass er (standardmäßig) fokussiert wird, variiert je nach Browser und Betriebssystem. Die meisten Browser geben dem geklickten Button Fokus, aberSafari tut dies aus Designgründen nicht.

Beispiele

Erstellen eines grundlegenden Buttons

Dieses Beispiel erstellt einen anklickbaren Button. Das Attributtype="button" stellt sicher, dass der Button kein Standardverhalten hat. Sie können diesen Button interaktiv machen, indem Sie JavaScript oder Attribute wiecommand undcommandfor verwenden.

<button type="button" name="button">I'm a button</button>

Die Verwendung desrequest-close Wertes für dascommand-Attribut

Der Dialog in diesem Beispiel hat zwei Radio-Buttons, die steuern, ob der Dialog geschlossen werden kann oder nicht. Wählen SieJa oderNein aus und klicken Sie dann aufAnfrage zum Schließen, um zu versuchen, den Dialog zu schließen. WennJa ausgewählt ist, wird der Dialog geschlossen; wennNein ausgewählt ist, bleibt der Dialog geöffnet und zeigt stattdessen eine Nachricht an.

<button type="button" commandfor="mydialog" command="show-modal">  Open Dialog</button><dialog>  <div>    <form>      <fieldset>        <legend>Allow this dialog to close when requested?</legend>        <div>          <input type="radio" name="close" value="no" checked />          <label for="no">No</label>        </div>        <div>          <input type="radio" name="close" value="yes" />          <label for="yes">Yes</label>        </div>      </fieldset>    </form>    <button commandfor="mydialog" command="request-close">      Request to Close    </button>    <p hidden>You must choose "Yes" to close this dialog.</p>  </div></dialog>

.warning {  color: tomato;}

const dialog = document.querySelector("dialog");const radio = document.querySelector("form").elements["close"];const warning = document.querySelector(".warning");dialog.addEventListener("cancel", (e) => {  if (!e.cancelable) return;  if (radio.value === "no") {    warning.hidden = false;    e.preventDefault();  } else {    warning.hidden = true;  }});

DerDialog öffnen-Button öffnet das<dialog>-Element mitcommand="show-modal".

DerAnfrage zum Schließen-Button hatcommand="request-close", welches das<dialog>-Element mit demcommandfor="mydialog"-Attribut anvisiert. Wenn er angeklickt wird, fragt er das<dialog>, ob es geschlossen werden kann (im Gegensatz zumcommand="close"-Attribut, das das<dialog> sofort schließen würde). Dies überprüft, ob das<dialog>cancelable ist, indem eincancel-Ereignis verwendet wird.

Wenn das Ereigniscancelable ist, wird der Wert der Radio-Buttons überprüft:

• Wenn aufja gesetzt, wird der Dialog geschlossen.
• Wenn aufnein gesetzt, wird dashidden-Attribut bei der Warnung ausgeschaltet und die MethodepreventDefault() aufgerufen, was das Standardverhalten des<dialog> verhindert.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität