<button>: Das Button-Element

Probieren Sie es aus

<button class="favorite styled" 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 umfassen die globalen Attribute.

autofocus

Dieses Boolean-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 Steuerelement <button> gesteuert wird, das über das commandfor-Attribut angegeben ist. Die möglichen Werte sind:

"show-modal"

Der Button zeigt einen <dialog> als Modal an. Wenn der Dialog bereits modal ist, wird keine Aktion ergriffen. Dies ist das deklarative Äquivalent zum Aufrufen der Methode HTMLDialogElement.showModal() auf dem <dialog>-Element.

"close"

Der Button wird ein <dialog>-Element schließen. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ergriffen. Dies ist das deklarative Äquivalent zum Aufrufen der Methode HTMLDialogElement.close() auf dem <dialog>-Element.

"request-close"

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 dadurch, dass Autoren Event.preventDefault() auf das cancel-Ereignis aufrufen können, um zu verhindern, dass das <dialog> geschlossen wird. Wenn der Dialog bereits geschlossen ist, wird keine Aktion ergriffen. Dies ist das deklarative Äquivalent zum Aufrufen der Methode HTMLDialogElement.requestClose() auf dem <dialog>-Element.

"show-popover"

Der Button zeigt ein verborgenes Popover an. Wenn Sie versuchen, ein bereits sichtbares Popover anzuzeigen, wird keine Aktion ergriffen. Weitere Einzelheiten finden Sie in der Popover API. Dies entspricht dem Setzen eines Wertes von show für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen der Methode HTMLElement.showPopover() auf dem Popover-Element.

"hide-popover"

Der Button wird ein sichtbares Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover auszublenden, wird keine Aktion ergriffen. Weitere Einzelheiten finden Sie in der Popover API. Dies entspricht dem Setzen eines Wertes von hide für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen der Methode HTMLElement.hidePopover() auf dem Popover-Element.

"toggle-popover"

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

Benutzerdefinierte Werte

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

commandfor

Wandelt ein <button>-Element in einen Befehlsbutton um, der ein bestimmtes interaktives Element steuert, indem er den im command-Attribut des Buttons angegebenen Befehl ausführt. Das commandfor-Attribut nimmt die ID des zu steuernden Elements als Wert an. Dies ist eine allgemeinere Version von popovertarget.

disabled

Dieses Boolean-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 verknüpft werden soll (seine Formularbesitzer). Der Wert dieses Attributs muss die id eines <form> im selben 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>-Elementen an beliebiger Stelle im Dokument zu verknüpfen, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahre-<form>-Element überschreiben.

formaction

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

formenctype

Wenn der Button ein Sende-Button ist (innerhalb/assoziiert mit einem <form> und nicht type="button"), gibt an, wie die übermittelten Formulardaten kodiert werden. Mögliche Werte:

• application/x-www-form-urlencoded: Der Standardwert, wenn das Attribut nicht verwendet wird.
• multipart/form-data: Wird verwendet, um <input>-Elemente mit deren type-Attributen, die auf file gesetzt sind, zu übermitteln.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für die tatsächliche Formularübermittlung verwendet werden.

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

formmethod

Wenn der Button ein Sende-Button ist (innerhalb/assoziiert mit einem <form> und 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 Body der HTTP-Anfrage enthalten, wenn sie an den Server gesendet werden. Verwenden Sie dies, wenn das Formular Informationen enthält, die nicht öffentlich sein sollten, wie z. B. Anmeldedaten.
• 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 z. B. Suchformulare.
• dialog: Diese Methode wird verwendet, um anzuzeigen, dass der Button den Dialog schließt, mit dem er assoziiert ist, und die Formulardaten überhaupt nicht übermittelt.

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

formnovalidate

Wenn der Button ein Sende-Button ist, gibt dieses Boolean-Attribut an, dass das Formular beim Absenden nicht validiert werden soll. 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.

formtarget

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

• _self: Die Antwort wird im selben Browsing-Kontext wie der aktuelle geladen. Dies ist der Standardwert, wenn das Attribut nicht angegeben ist.
• _blank: Die Antwort wird in einem neuen unbenannten Browsing-Kontext geladen – in der Regel ein neuer Tab oder ein neues Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Die Antwort wird im übergeordneten Browsing-Kontext des aktuellen geladen. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option genauso wie _self.
• _top: Die Antwort wird im obersten Browsing-Kontext geladen (also der, der ein Vorfahre des aktuellen ist und keinen übergeordneten Kontext hat). Wenn kein übergeordneter Kontext vorhanden ist, verhält sich diese Option genauso wie _self.

name

Der Name des Buttons, der zusammen mit dem Wert des Buttons als Teil der Formulardaten übermittelt wird, wenn dieser Button zum Absenden des Formulars verwendet wird.

popovertarget

Wandelt ein <button>-Element in einen Popover-Steuerbutton um; nimmt die ID des Popover-Elements an, das als Wert zu steuern ist. Die Einrichtung einer Beziehung zwischen einem Popover und seinem auslösenden Button mit dem popovertarget-Attribut hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und unterstützende Technologiebenutzer (AT) zugänglicher (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popover relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

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

"hide"

Der Button wird ein angezeigtes Popover verbergen. Wenn Sie versuchen, ein bereits verborgenes Popover auszublenden, wird keine Aktion ergriffen.

"show"

Der Button wird ein verborgenes Popover anzeigen. Wenn Sie versuchen, ein bereits sichtbares Popover anzuzeigen, wird keine Aktion ergriffen.

"toggle"

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

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button übermittelt die Formulardaten an den Server. Dies ist der Standardwert, wenn das Attribut für Buttons, die mit einem <form> assoziiert sind, nicht angegeben ist oder wenn das Attribut leer oder ungültig ist.
• reset: Der Button setzt alle Steuerelemente auf ihre Anfangswerte 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. Es kann clientseitige Skripte geben, die auf die Ereignisse des Elements hören, die ausgelöst werden, wenn die Ereignisse eintreten.

value

Definiert den Wert, der mit dem name des Buttons verknüpft ist, wenn es mit den Formulardaten übermittelt wird. Dieser Wert wird an den Server als Parameter übermittelt, wenn das Formular mit diesem Button gesendet wird.

Hinweise

Ein Sende-Button mit dem Attribut formaction, aber ohne ein zugeordnetes Formular, tut nichts. Sie müssen einen Formularbesitzer festlegen, entweder indem Sie ihn 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 inneres HTML-Inhalte hinzufügen (denken Sie an <i>, <br> oder sogar <img>) und verwenden Sie ::after und ::before Pseudo-Elemente für komplexe Renderings.

Wenn Ihre Buttons nicht zum Übermitteln von Formulardaten an einen Server gedacht sind, stellen Sie sicher, dass ihr 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ören könnte.

Während <button type="button"> kein Standardverhalten hat, können Skript-gesteuerte Ereignishandler programmiert werden. Ein aktivierter Button kann programmierbare Aktionen ausführen, indem er JavaScript verwendet, z. B. ein Element von einer Liste entfernen.

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

Barrierefreiheit

Symbolische Buttons

Buttons, die nur ein Symbol anzeigen, haben keinen zugänglichen Namen. Zugängliche Namen bieten Informationen für unterstützende Technologie, wie Bildschirmleser, um beim Parsen des Dokuments und Generieren eines Zugänglichkeitsbaums darauf zuzugreifen. Unterstützende Technologie verwendet dann den Zugänglichkeitsbaum, um die Seitennavigations- und Inhaltsverarbeitungsprozesse zu navigieren und zu manipulieren.

Um einem symbolischen Button 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>

Ergebnis

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 ihn visuell vom Bildschirm zu entfernen, jedoch weiterhin von unterstützender Technologie analysierbar zu machen.

Es ist jedoch erwähnenswert, dass das Halten des Textes des Buttons sichtbar Menschen helfen kann, die mit der Bedeutung des Symbols nicht vertraut sind oder den Zweck des Buttons nicht verstehen. Dies ist besonders wichtig für Personen, die nicht technologisch versiert sind oder die möglicherweise unterschiedliche kulturelle Interpretationen des Symbols haben, das der Button verwendet.

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

Größe und Nähe

Größe

Interaktive Elemente wie Buttons sollten eine ausreichend große Fläche haben, um leicht aktivierbar zu sein. Dies hilft verschiedenen Menschen, einschließlich Menschen mit motorischen Problemen und Menschen, die nicht präzise Formen der Eingabe wie einen Stylus oder Finger verwenden. Eine Mindest-Interaktivgröße von 44 × 44 CSS-Pixel wird empfohlen.

• Verständnis des Erfolgskriteriums 2.5.5: Zielgröße | W3C Verständnis der WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Touch-Ziele - The A11Y Project

Nähe

Große Mengen an interaktiven Inhalten — einschließlich Buttons —, die in naher visueller Nähe zueinander platziert sind, sollten Raum dazwischen haben. Diese Abstände sind vorteilhaft für Menschen mit motorischen Problemen, die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

Der Abstand kann mit CSS-Eigenschaften wie margin erstellt werden.

• Handzittern und das Riesenbutton-Problem - Axess Lab

ARIA-Zustandsinformationen

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

Button-Stile

Es ist am besten, den Standardfokus-Ring für Elemente mit Fokus nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genügend Kontrast aufweist, damit Personen mit Sehbehinderungen ihn wahrnehmen können 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 Heuristiken des User Agents bestimmen, dass der Fokus hervorgehoben werden sollte, wie bei einem <button>, das Tastaturfokus erhält. Siehe :focus vs :focus-visible für mehr Informationen.

Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtkraft der Text- und Hintergrundfarbenwerte des Buttons mit dem Hintergrund, auf den der Button platziert ist, verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für großen Text erforderlich. (Großer Text wird als 18.66px und bold oder größer, oder 24px oder größer definiert.)

• WebAIM: Farbkontrastprüfer
• MDN Verständnis der WCAG, Richtlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis der WCAG 2.0

Klicken und Fokus

Ob das Klicken auf einen <button> oder <input> Button-Typen diesen (standardmäßig) fokussiert macht, variiert je nach Browser und Betriebssystem. Die meisten Browser geben Fokus auf einen Button, der geklickt wird, aber Safari tut dies aus Designgründen nicht.

Beispiele

Erstellen eines grundlegenden Buttons

Dieses Beispiel erstellt einen klickbaren Button. Das Attribut type="button" stellt sicher, dass der Button kein Standardverhalten hat. Sie können diesen Button mit JavaScript interaktiv machen oder mit Attributen wie command und commandfor.

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

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

Der Dialog in diesem Beispiel hat zwei Optionsbuttons, 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 ausgewählt ist, wird der Dialog geschlossen; wenn Nein 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 id="mydialog">
  <div class="wrapper">
    <form>
      <fieldset>
        <legend>Allow this dialog to close when requested?</legend>
        <div>
          <input type="radio" id="no" name="close" value="no" checked />
          <label for="no">No</label>
        </div>
        <div>
          <input type="radio" id="yes" name="close" value="yes" />
          <label for="yes">Yes</label>
        </div>
      </fieldset>
    </form>
    <button commandfor="mydialog" command="request-close">
      Request to Close
    </button>
    <p class="warning" 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;
  }
});

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

Der Request to Close Button hat command="request-close", das das <dialog>-Element mit dem Attribut commandfor="mydialog" anvisiert. Wenn darauf geklickt wird, fragt es das <dialog>, ob es geschlossen werden kann (im Gegensatz zum Attribut command="close", das das <dialog> sofort schließen würde). Es prüft, ob das <dialog> durch ein cancel-Ereignis cancelable ist.

Wenn das Ereignis cancelable ist, wird der Wert der Optionsbuttons überprüft:

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität