<button> HTML-Button-Element

Probieren Sie es aus

Attribute

Die Attribute dieses Elements schließen die globalen Attribute ein.

Dieses boolesche Attribut legt fest, dass der Button beim Laden der Seite den Eingabe-Fokus haben soll. Nur ein Element in einem Dokument kann dieses Attribut haben.

Gibt die Aktion an, die auf einem Element durchgeführt werden soll, das von einem Steuerungs-<button> mit dem commandfor-Attribut gesteuert wird. Mögliche Werte sind:

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

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 Methode HTMLDialogElement.close() auf dem <dialog>-Element. Wenn es in Verbindung mit dem value-Attribut verwendet wird, wird der Wert des Buttons als returnValue-Eigenschaft des Dialogs übergeben.

Der Button löst ein cancel-Ereignis auf einem <dialog>-Element aus, um den Browser zu bitten, es zu schließen, gefolgt von einem close-Ereignis. Dies unterscheidet sich vom close-Befehl, da Autoren Event.preventDefault() auf dem cancel-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 Methode HTMLDialogElement.requestClose() auf dem <dialog>-Element. Wenn es mit dem value-Attribut des Buttons verwendet wird, wird der Wert als returnValue-Eigenschaft des Dialogs übergeben.

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits sichtbares Popover anzuzeigen, wird keine Aktion ausgeführt. Weitere Details finden Sie in der Popover-API. Dies entspricht dem Festlegen eines Werts von show für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der Methode HTMLElement.showPopover() auf dem Popover-Element.

Der Button versteckt ein sichtbares Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion ausgeführt. Weitere Details finden Sie in der Popover-API. Dies entspricht dem Festlegen eines Werts von hide für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der Methode HTMLElement.hidePopover() auf dem Popover-Element.

Der Button schaltet ein Popover zwischen sichtbar und versteckt um. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover sichtbar ist, wird es versteckt. Weitere Details finden Sie in der Popover-API. Dies entspricht dem Festlegen eines Werts von toggle für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf der Methode HTMLElement.togglePopover() auf dem Popover-Element.

Dieses Attribut kann benutzerdefinierte Werte darstellen, die mit zwei Bindestrichen (--) beginnen. Buttons mit einem benutzerdefinierten Wert lösen das CommandEvent auf dem gesteuerten Element aus.

Wandelt ein <button>-Element in einen Befehlsbutton um, der ein gegebenes interaktives Element durch Ausgabe des im command-Attribut des Buttons angegebenen Befehls steuert. Das commandfor-Attribut nimmt die ID des zu steuernden Elements als seinen Wert. Dies ist eine allgemeinere Version von popovertarget.

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

Das <form>-Element, das dem Button zugeordnet werden soll (sein Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im gleichen Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, ist das <button> mit seinem Vorfahren-<form>-Element verknüpft, falls vorhanden.)

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

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formularbesitzers des Buttons. Tut nichts, wenn kein Formularbesitzer vorhanden ist.

Wenn der Button ein Submit-Button ist (er befindet sich in einem <form> oder ist damit verknüpft und hat nicht type="button"), gibt er 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 verwendet, um <input>-Elemente mit ihrem type-Attribut auf file zu übermitteln.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für echte Formularübermittlungen verwendet werden.

Wenn dieses Attribut angegeben ist, überschreibt es das enctype-Attribut des Formularbesitzers des Buttons.

Wenn der Button ein Submit-Button ist (es befindet sich in einem <form> oder ist damit verknüpft und hat nicht type="button"), gibt dieses Attribut die verwendete HTTP-Methode für die Übermittlung des Formulars an. Mögliche Werte:

• post: Die Daten aus dem Formular werden im Körper der HTTP-Anfrage eingeschlossen, wenn sie an den Server gesendet werden. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie Anmeldeinformationen.
• get: Die Formulardaten werden an die action-URL des Formulars angehängt, mit einem ? als Trennzeichen, und die resultierende URL wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat, wie Suchformulare.
• dialog: Diese Methode wird verwendet, um anzuzeigen, dass der Button den Dialog schließt, mit dem er verknüpft ist, und dabei überhaupt keine Formulardaten übermittelt.

Wenn angegeben, überschreibt dieses Attribut das method-Attribut des Formularbesitzers des Buttons.

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

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

Wenn der Button ein Submit-Button ist, ist dieses Attribut ein von Autoren definierter Name oder standardisierter, mit Unterstrich prefixierter Stichwort, das angibt, wo die Antwort auf das übermittelte Formular angezeigt werden soll. Dies ist der name von, oder das Stichwort für, einen Browsing-Kontext (ein Tab, Fenster oder <iframe>). Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formularbesitzers des Buttons. Die folgenden Schlüsselwörter haben besondere Bedeutungen:

• _self: Lade die Antwort in den gleichen Browsing-Kontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Lade die Antwort in einen neuen, nicht benannten Browsing-Kontext – normalerweise ein neuer Tab oder ein neues Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Lade die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option genauso wie _self.
• _top: Lade die Antwort in den obersten Browsing-Kontext (das heißt, den Browsing-Kontext, der ein Vorfahre des aktuellen ist und kein Elternteil hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option genauso wie _self.

Definiert das <button>-Element als Interest Invoker. Sein Wert ist die id eines Zielelements, das in irgendeiner Weise (normalerweise gezeigt oder verborgen) beeinflusst wird, wenn Interesse am Invoker-Element (zum Beispiel durch Hovering/Unhovering oder Fokussierung/Entfokussierung) gezeigt oder verloren wird. Weitere Details und Beispiele finden Sie unter Using interest invokers.

Der Name des Buttons, der bei Verwendung zur Übermittlung des Formulars als Paar mit dem value des Buttons im Rahmen der Formulardaten übermittelt wird.

Wandelt ein <button>-Element in einen Popover-Control-Button um; nimmt die ID des zu steuernden Popover-Elements als Wert. Die Etablierung einer Beziehung zwischen einem Popover und seinem Invoker-Button mithilfe des popovertarget-Attributs hat zwei zusätzliche nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded-Beziehung zwischen Popover und Invoker und platziert das Popover in einer logischen Position in der Tastaturnavigation, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und Unterstützungs-Technologie-Benutzer (AT) zugänglicher (siehe auch Popover accessibility features).
• Der Browser erstellt eine implizite Ankerreferenz zwischen beiden und macht es sehr bequem, Popover relativ zu ihren Steuerungselementen mit CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

Gibt die Aktion an, die auf einem kontrollierten Popover-Element durch einen Steuerungs-<button> ausgeführt werden soll. Mögliche Werte sind:

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

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

Der Button wird ein Popover zwischen sichtbar und versteckt umschalten. Wenn das Popover unsichtbar ist, wird es angezeigt; wenn das Popover sichtbar ist, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die standardmäßige Aktion, die vom Steuerungsbutton ausgeführt wird.

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button übermittelt die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut nicht für Buttons angegeben ist, die mit einem <form> verknüpft sind, oder wenn das Attribut einen leeren oder ungültigen Wert hat.
• reset: Der Button setzt alle die Steuerelemente auf ihre Anfangswerte zurück, ähnlich wie <input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu stören.)
• button: Der Button hat kein Standardverhalten und macht nichts, wenn er gedrückt wird. Er kann jedoch clientseitige Skripte haben, die auf die Ereignisse des Elements lauschen, die ausgelöst werden, wenn die Ereignisse auftreten.

Definiert den mit dem name des Buttons assoziierten Wert, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird an den Server in den Parametern übergeben, wenn das Formular mithilfe dieses Buttons übermittelt wird. Wenn es mit den Befehlen close oder request-close verwendet wird, setzt das value-Attribut das returnValue des <dialog>-Elements, das gesteuert wird.

Anmerkungen

Ein Submit-Button mit dem Attribut formaction gesetzt, aber ohne zugeordnetes Formular macht nichts. Sie müssen einen Formularbesitzer einstellen, entweder indem Sie es in ein <form> einbetten oder das Attribut form auf die ID des Formulars setzen.

<button>-Elemente lassen sich viel einfacher stylen als <input>-Elemente. Sie können inneren HTML-Inhalt hinzufügen (denken Sie an <i>, <br> oder sogar <img>), und verwenden Sie ::after und ::before Pseudo-Elemente für komplexes Rendering.

Wenn Ihre Buttons nicht dazu dienen, Formulardaten an einen Server zu übermitteln, stellen Sie sicher, dass das type-Attribut auf button gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht vorhandene) 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 mit JavaScript ausführen, wie z.B. das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen User-Agents Buttons als display: flow-root, was einen neuen Blockformatierungskontext 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 als Flex- oder Grid-Items. Ein Button, der auf display: inline gesetzt ist, wird stilisiert, als wäre der Wert auf display: inline-block gesetzt.

Barrierefreiheit

Icon-Buttons

Buttons, die nur ein Icon anzeigen, haben keinen zugänglichen Namen. Zugängliche Namen liefern Informationen für unterstützende Technologien, wie Screen Reader, auf die sie beim Parsen des Dokuments und Generieren eines Barrierefreiheitsbaums zugreifen können. Unterstützende Technologien verwenden dann den Barrierefreiheitsbaum, um Seiteninhalte zu navigieren und zu manipulieren.

Um einem Icon-Button einen zugänglichen Namen zu geben, setzen Sie Text in das <button>-Element, der die Funktionalität des Buttons kurz beschreibt.

Beispiele

Wenn Sie den Text des Buttons visuell ausblenden möchten, ist eine zugängliche Möglichkeit, dies zu tun, eine Kombination von CSS-Eigenschaften zu verwenden, um es optisch vom Bildschirm zu entfernen, aber gleichzeitig von unterstützenden Technologien parsierbar zu halten.

Es ist jedoch erwähnenswert, dass das Belassen des sichtbaren Button-Texts Menschen helfen kann, die möglicherweise mit der Bedeutung des Icons nicht vertraut sind oder den Zweck des Buttons nicht verstehen. Dies ist besonders wichtig für Menschen, die nicht technologisch versiert sind oder unterschiedliche kulturelle Interpretationen des von dem Button verwendeten Icons haben.

• Was ist ein zugänglicher Name? | Vispero
• MDN Verständnis von WCAG, Richtlinie 4.1 Erklärungen
• Verständnis des Erfolgskriteriums 4.1.2 | W3C Verständnis von WCAG 2.0

Größe und Nähe

Größe

Interaktive Elemente wie Buttons sollten eine ausreichend große Fläche haben, um leicht aktiviert werden zu können. Dies hilft verschiedenen Menschen, einschließlich Menschen mit motorischen Steuerungsproblemen und Menschen, die ungenauere Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixeln wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verständnis von WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - Das A11Y-Projekt

Nähe

Große Mengen interaktiven Inhalts – einschließlich Buttons – die sich in naher visueller Nähe zueinander befinden, sollten durch Abstände getrennt sein. Diese Abstände sind nützlich für Menschen mit motorischen Steuerungsproblemen, die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

Abstände können mit CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Riesenbuttonproblem - Axess Lab

ARIA-Zustandsinformationen

Um den Zustand eines Buttons zu beschreiben, ist das korrekte ARIA-Attribut aria-pressed zu verwenden und nicht aria-checked oder aria-selected. Für weitere Informationen lesen Sie den Abschnitt über die ARIA-Button-Rolle.

Button-Stile

Es ist am besten, den Standard-Fokus-Ring für fokussierte Elemente nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokusszustand genügend Kontrast hat, damit Menschen mit Sehbehinderungen ihn wahrnehmen können, und Menschen mit kognitiven Unterschieden ihn verstehen.

Die :focus-visible Pseudo-Klasse kann verwendet werden, um Stile auf ein Element anzuwenden, das :focus hat, nur dann, wenn die Heuristiken den Fokus hervorheben sollten, z. B. wenn ein <button> Tastaturfokus erhält. Weitere Informationen finden Sie unter :focus vs :focus-visible.

Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtkraft der Button-Text- und Hintergrundfarbwerte mit dem Hintergrund, auf dem der Button platziert ist, verglichen wird. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalt und 3:1 für großen Text erforderlich. (Großer Text ist definiert als 18.66px und bold oder größer, oder 24px oder größer.)

• WebAIM: Farbkontrastprüfer
• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis 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 fokussieren einen geklickten Button, aber Safari tut dies nicht, aus Designgründen.

Beispiele

Erstellen eines Basisbuttons

Dieses Beispiel erstellt einen anklickbaren Button. Das type="button"-Attribut sorgt dafür, dass der Button kein Standardverhalten hat. Sie können diesen Button mit JavaScript oder Attributen wie command und commandfor interaktiv machen.

Verwendung des request-close Werts für das command-Attribut

Der Dialog in diesem Beispiel hat zwei Radio-Buttons, die steuern, ob der Dialog geschlossen werden kann oder nicht. Wählen Sie Ja oder Nein und klicken Sie dann auf Anfrage zum Schließen, um zu versuchen, den Dialog zu schließen. Wenn Ja gewählt ist, schließt sich der Dialog; wenn Nein gewählt ist, bleibt der Dialog offen und zeigt stattdessen eine Nachricht an.

Der Dialog öffnen-Button öffnet das <dialog>-Element mit command="show-modal".

Der Anfrage zum Schließen-Button hat command="request-close", was über das commandfor="mydialog"-Attribut auf das <dialog>-Element abzielt. Wenn er angeklickt wird, fragt er das <dialog>, ob es geschlossen werden kann (im Gegensatz zum command="close"-Attribut, das das <dialog> sofort schließen würde). Dies prüft, ob das <dialog> abbrechbar ist, indem ein cancel-Ereignis verwendet wird.

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

• Wenn auf ja gesetzt, wird der Dialog geschlossen.
• Wenn auf nein gesetzt, wird das hidden-Attribut bei der Warnung ausgeschaltet und die Methode preventDefault() wird aufgerufen, was das Standardverhalten des <dialog> Schließens verhindert.

Verwendung des value-Attributs mit dem close-Befehl des Dialogs

Dieses Beispiel zeigt, wie das value-Attribut des Buttons mit dem Befehl close verwendet wird, um den Wert der Eigenschaft returnValue eines Dialogs zu befüllen.

Wenn entweder der Abbrechen- oder der Löschen-Button angeklickt wird, schließt sich der Dialog und setzt seinen returnValue auf das value-Attribut des Buttons. Der close-Ereignis-Listener überprüft dialog.returnValue, um festzustellen, welche Aktion der Benutzer gewählt hat, und protokolliert das Ergebnis auf dem Bildschirm.

HTML

Das HTML definiert zunächst einen Datensatz löschen-Button, der das commandfor-Attribut verwendet, um den zu öffnenden Dialog anzugeben.

Innerhalb des Dialogs verwenden die Abbrechen- und Löschen-Buttons das commandfor-Attribut, um anzuzeigen, dass sie auf den aktuellen Dialog angewendet werden. Sie setzen auch das command-Attribut auf "close" und das value-Attribut jeweils auf "cancel" und "delete" – der Wert des ausgewählten Buttons wird automatisch in die returnValue des Dialogs kopiert, wenn der Button angeklickt wird.

JavaScript

Der Code verwendet einen close-Ereignis-Listener, um den returnValue des Dialogs zu protokollieren.

Ergebnisse

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.