<button>: Das Button-Element

Die Attribute dieses Elements umfassen die globalen Attribute.

autofocus

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

command Experimentell

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

"show-modal"

Der Button zeigt einen <dialog> als Modal an. Wenn der Dialog bereits modal ist, wird keine Aktion ausgeführt.

"close"

Der Button schließt ein <dialog>-Element. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ausgeführt.

"show-popover"

Der Button zeigt ein verstecktes Popover an. Wenn ein bereits angezeigtes Popover angezeigt werden soll, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details.

"hide-popover"

Der Button verbirgt ein angezeigtes Popover. Wenn versucht wird, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt. Siehe Popover API für weitere Details.

"toggle-popover"

Der Button wechselt ein Popover zwischen Anzeigen und Verbergen. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Siehe Popover API für weitere Details.

Benutzerdefinierte Werte

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

commandfor Experimentell

Wandelt ein <button> Element in einen Button um, der das angegebene interaktive Element steuert; nimmt die ID des zu steuernden Elements als Wert.

disabled

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

form

Das <form> Element, mit dem der Button verbunden werden soll (sein Formular-Eigentümer). Der Wert dieses Attributs muss die id eines <form> im selben Dokument sein. (Wenn dieses Attribut nicht gesetzt ist, wird der <button> mit seinem übergeordneten <form> Element verbunden, 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.

formaction

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formulareigentümers des Buttons. Macht nichts, wenn kein Formulareigentümer vorhanden ist.

formenctype

Wenn der Button ein Absenden-Button ist (er befindet sich in/ist mit einem <form> verbunden 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 eingestellt zu übermitteln.
• text/plain: Angegeben als Debugging-Hilfe; sollte nicht für echte Formularübermittlungen verwendet werden.

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

formmethod

Wenn der Button ein Absenden-Button ist (er befindet sich in/ist mit einem <form> verbunden und hat nicht type="button"), gibt dieses Attribut die HTTP-Methode an, die zur Übermittlung des Formulars verwendet wird. Mögliche Werte:

• post: Die Daten aus dem Formular werden im Hauptteil der HTTP-Anfrage an den Server gesendet. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie Anmeldeinformationen.
• get: Die Formulardaten werden der 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 Nebeneffekte hat, wie Suchformulare.
• dialog: Diese Methode wird verwendet, um anzuzeigen, dass der Button das mit ihm verbundene Dialog schließt und die Formulardaten überhaupt nicht überträgt.

Ist dieses Attribut angegeben, überschreibt es das method-Attribut des Formulareigentümers des Buttons.

formnovalidate

Wenn der Button ein Absenden-Button ist, gibt dieses boolesche Attribut an, dass das Formular beim Absenden nicht validiert werden soll. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formulareigentümers des Buttons.

Dieses Attribut ist auch verfügbar für <input type="image"> und <input type="submit"> Elemente.

formtarget

Wenn der Button ein Absenden-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein standardisiertes, unterstrichenes Schlüsselwort, das angibt, wo die Antwort zur Formularübermittlung angezeigt werden soll. Dies ist der name eines Browserkontextes (ein Tab, Fenster oder <iframe>) oder ein Schlüsselwort dafür. Ist dieses Attribut angegeben, überschreibt es das target-Attribut des Formulareigentümers des Buttons. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Die Antwort wird im selben Browserkontext wie der aktuelle geladen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Die Antwort wird in einem neuen unbenannten Browserkontext geladen - üblicherweise in einem neuen Tab oder Fenster, abhängig von den Einstellungen des Benutzers.
• _parent: Die Antwort wird in den übergeordneten Browserkontext des aktuellen geladen. Wenn es keinen Elternteil gibt, verhält sich diese Option wie _self.
• _top: Die Antwort wird im obersten Browserkontext geladen (also dem Browserkontext, der ein Vorfahre des aktuellen ist und keinen Vater hat). Wenn es keinen Elternteil gibt, verhält sich diese Option wie _self.

name

Der Name des Buttons, der als Paar mit dem value des Buttons als Teil der Formulardaten übergeben wird, wenn dieser Button zur Übermittlung des Formulars verwendet wird.

popovertarget

Wandelt ein <button> Element in einen Popover-Kontrollbutton um; nimmt die ID des zu steuernden Popover-Elements als Wert. Siehe die Popover API Landingpage für weitere Details.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover verbergen. Wenn versucht wird, ein bereits verstecktes Popover zu verbergen, wird keine Aktion ausgeführt.

"show"

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

"toggle"

Der Button wechselt ein Popover zwischen Anzeigen und Verbergen. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist "toggle" die Standardaktion, die vom Kontrollbutton 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 Steuerelemente auf ihre Anfangswerte zurück, wie <input type="reset">. (Dieses Verhalten neigt dazu, Benutzer zu ärgern.)
• button: Der Button hat kein Standardverhalten und tut ohne weiteres nichts, wenn er gedrückt wird. Er kann clientseitig Skripte haben, die auf die Ereignisselemente reagieren, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der mit dem name des Buttons assoziiert ist, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird an den Server in Parametern übergeben, wenn das Formular unter Verwendung dieses Buttons abgesendet wird.

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

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

Wenn Ihre Buttons nicht für das Absenden von Formulardaten an einen Server gedacht sind, stellen Sie sicher, dass deren type-Attribut auf button gesetzt ist. Andernfalls versuchen sie, Formulardaten zu übermitteln und die (nicht vorhandene) Antwort zu laden, was den aktuellen Zustand des Dokuments möglicherweise zerstören könnte.

Obwohl <button type="button"> kein Standardverhalten hat, können Event-Handler geskriptet werden, um Verhalten auszulösen. Ein aktivierter Button kann programmierbare Aktionen mit JavaScript ausführen, wie etwa das Entfernen eines Elements aus einer Liste.

Standardmäßig stylen Benutzeragenten Buttons als display: flow-root, was einen neuen block formatting context etabliert und die Kinder des Buttons sowohl horizontal als auch vertikal zentriert, solange sie nicht überlaufen. Wenn der Button als Flex- oder Rasterbehälter definiert ist, verhalten sich die Kinder als Flex- oder Rasterelemente. Ein Button, der auf display: inline gesetzt ist, wird gestylt, als wäre der Wert auf display: inline-block gesetzt.

Buttons, die nur ein Symbol anzeigen, haben keinen zugänglichen Namen. Zugängliche Namen bieten Informationen für unterstützende Technologien, wie Bildschirmlesegeräte, um darauf zuzugreifen, wenn sie das Dokument parsen und einen Zugänglichkeitsbaum generieren. Unterstützende Technologien verwenden dann den Zugänglichkeitsbaum, um den Seiteninhalt zu navigieren und zu manipulieren.

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

Beispiele

<button name="favorite">
  <svg fill="#000000" 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>

Ergebnis

Wenn Sie den Text des Buttons visuell ausblenden möchten, ist eine zugängliche Methode, dies zu tun, eine Kombination von CSS-Eigenschaften zu verwenden, um ihn visuell vom Bildschirm zu entfernen, aber für unterstützende Technologien weiterhin lesbar zu halten.

Es sei jedoch darauf hingewiesen, dass das Sichtbarlassen des Button-Textes Menschen helfen kann, die nicht mit der Bedeutung des Symbols vertraut sind oder den Zweck des Buttons verstehen. Dies ist besonders wichtig für Menschen, die nicht technologisch versiert sind oder unterschiedliche kulturelle Interpretationen des Symbols haben, das der Button verwendet.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Understanding WCAG, Richtlinien 4.1 Erklärungen
• Verständnis des Erfolgscriteriums 4.1.2 | W3C Understanding WCAG 2.0

Größe

Interaktive Elemente wie Buttons sollten eine ausreichende Fläche haben, um leicht aktiviert zu werden. Dies hilft einer Vielzahl von Menschen, einschließlich Menschen mit motorischen Steuerproblemen und Personen, die ungenaue Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS Pixeln wird empfohlen.

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

Nähe

Große Mengen an interaktivem Inhalt — einschließlich Buttons — die visuell nahe beieinander platziert sind, sollten Abstand zwischen sich haben. Diese Abstände sind vorteilhaft für Menschen, die motorische Steuerprobleme haben und versehentlich den falschen interaktiven Inhalt aktivieren könnten.

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

• Handzittern und das Problem mit den großen Buttons - Axess Lab

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

Es ist am besten, den Standard-Fokusrahmen für Elemente mit Fokus nicht zu überschreiben. Wenn die Styles der Buttons überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genug Kontrast hat, damit Menschen mit Sehbehinderungen ihn wahrnehmen können und Menschen mit kognitiven Unterschieden ihn verstehen.

Die :focus-visible Pseudoklasse kann verwendet werden, um Stile auf ein Element anzuwenden, das :focus hat, nur wenn die Heuristik des Benutzeragents feststellt, dass der Fokus hervorgehoben werden sollte, z. B. wenn ein <button> Tastaturfokus erhält. Weitere Informationen finden Sie unter :focus vs :focus-visible.

Das Verhältnis des Farbkontrasts wird durch den Vergleich der Leuchtkraft der Text- und Hintergrundfarbwerte des Buttons mit dem Hintergrund bestimmt, auf dem der Button platziert ist. 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 ab 18,66px und bold oder größer, oder ab 24px oder größer.)

• WebAIM: Farbkontrastprüfer
• MDN Understanding WCAG, Richtlinien 1.4 Erklärungen
• Verständnis des Erfolgscriteriums 1.4.3 | W3C Understanding WCAG 2.0

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 einem Button, der geklickt wird, den Fokus, aber Safari nicht, aus Designgründen.