<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 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

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

"show-modal"

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

"close"

Der Button schließt ein <dialog>-Element. Wenn das Dialog bereits geschlossen ist, wird keine Aktion durchgeführt. Dies ist das deklarative Äquivalent zum Aufruf 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 von dem close-Befehl, da Autoren Event.preventDefault() beim cancel-Ereignis aufrufen können, um zu verhindern, dass das <dialog> geschlossen wird. Wenn das Dialog bereits geschlossen ist, wird keine Aktion durchgeführt. Dies ist das deklarative Äquivalent zum Aufruf der Methode HTMLDialogElement.requestClose() auf dem <dialog>-Element.

"show-popover"

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

"hide-popover"

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

"toggle-popover"

Der Button wechselt ein Popover zwischen sichtbar und versteckt. Wenn das Popover versteckt ist, wird es gezeigt; wenn das Popover sichtbar ist, wird es versteckt. Weitere Details finden Sie in der Popover-API. Dies entspricht dem Setzen des Wertes toggle für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufruf 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 das CommandEvent an dem gesteuerten Element aus.

commandfor

Wandelt ein <button>-Element in einen Befehls-Button um, der ein gegebenes interaktives Element steuert, indem der in der command-Attribut des Buttons angegebene Befehl ausgeführt wird. Das commandfor-Attribut nimmt die ID des zu steuernden Elements als seinen Wert. Dies ist eine allgemeinere Version von popovertarget.

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 Vorfahren-<form>-Element assoziiert, falls vorhanden.)

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

formaction

Die URL, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das action-Attribut des Formular-Eigentümers des Buttons. Tut nichts, wenn es keinen Formular-Eigentümer gibt.

formenctype

Wenn der Button ein Sende-Button ist (er befindet sich in/ist einem <form> zugeordnet und hat nicht type="button"), gibt er an, wie die gesendeten Formulardaten codiert werden sollen. 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 ihren type-Attributen auf file gesetzt zu senden.
• text/plain: Als Debugging-Hilfe spezifiziert; sollte nicht für echte Formularübermittlungen verwendet werden.

Wenn dieses Attribut festgelegt ist, überschreibt es das enctype-Attribut des Formular-Eigentümers des Buttons.

formmethod

Wenn der Button ein Sende-Button ist (er befindet sich in/ist einem <form> zugeordnet und hat nicht type="button"), bestimmt dieses Attribut die HTTP-Methode, die zum Senden des Formulars verwendet wird. Mögliche Werte:

• post: Die Daten aus dem Formular sind im Body des HTTP-Requests enthalten, 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 Nebeneffekte hat, wie 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 festgelegt, überschreibt dieses Attribut das method-Attribut des Formular-Eigentümers des Buttons.

formnovalidate

Wenn der Button ein Sende-Button ist, gibt dieses Boolesche Attribut an, dass das Formular beim Senden nicht validiert wird. Wenn dieses Attribut festgelegt ist, überschreibt es das novalidate-Attribut des Formular-Eigentümers des Buttons.

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

formtarget

Wenn der Button ein Sende-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein standardisiertes, unterstrich-prefixed Schlüsselwort, das angibt, wo die Antwort auf das Senden des Formulars angezeigt werden soll. Dies ist der name eines Browsing-Kontexts (ein Tab, ein Fenster oder ein <iframe>). Wenn dieses Attribut festgelegt ist, überschreibt es das target-Attribut des Formular-Eigentümers des Buttons. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Lädt die Antwort in denselben Browsing-Kontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht spezifiziert ist.
• _blank: Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext - in der Regel ein neues Tab oder Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen Elternkontext gibt, verhält sich diese Option wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (das heißt, den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternkontext hat). Wenn es keinen Elternkontext 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 gesendet wird, wenn dieser Button zum Senden des Formulars verwendet wird.

popovertarget

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

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Aufrufer und platziert das Popover beim Anzeigen logisch in der Tastaturfokusnavigation. Dies macht das Popover für Tastatur- und unterstützende Technologie- (AT) Benutzer zugänglicher (siehe auch Popover-Eigenschaften für die Barrierefreiheit).
• Der Browser erstellt eine implizite Verankerungsreferenz zwischen den beiden, was es sehr praktisch macht, Popover relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

popovertargetaction

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

"hide"

Der Button verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover auszublenden, wird keine Aktion durchgeführt.

"show"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits sichtbares Popover zu zeigen, wird keine Aktion durchgeführt.

"toggle"

Der Button wechselt ein Popover zwischen sichtbar und versteckt. Wenn das Popover versteckt ist, wird es gezeigt; wenn das Popover sichtbar ist, wird es versteckt. Wenn popovertargetaction weggelassen wird, ist das Standardverhalten "toggle", das vom Steuerungs-Button 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 einem <form> zugeordnet sind, nicht angegeben ist oder wenn das Attribut einen leeren oder ungültigen Wert hat.
• reset: Der Button setzt alle Steuerelemente 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 nichts, wenn er standardmäßig gedrückt wird. Er kann client-seitige Skripte enthalten, die auf die Ereignisse des Elements hören, die ausgelöst werden, wenn die Ereignisse auftreten.

value

Definiert den Wert, der mit dem name des Buttons verknüpft ist, wenn er mit den Formulardaten übermittelt wird. Dieser Wert wird an den Server in den Parametern übergeben, wenn das Formular mit diesem Button gesendet wird.

Hinweise

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

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

Wenn Ihre Buttons nicht dazu gedacht sind, Formulardaten an einen Server zu übermitteln, 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ört.

Während <button type="button"> kein Standardverhalten hat, können Ereignishandler skriptgesteuerte Aktionen auslösen. Ein aktivierter Button kann programmierbare Aktionen ausführen, z. B. ein Element aus einer Liste entfernen, mittels JavaScript.

Standardmäßig stylen Benutzeragenten Buttons als display: flow-root, was einen neuen Block Formatting Context erzeugt 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-Elemente. Ein Button, der auf display: inline gesetzt ist, wird gestylt, als wäre der Wert auf display: inline-block gesetzt.

Barrierefreiheit

Symbol-Buttons

Buttons, die nur ein Symbol anzeigen, haben keinen zugänglichen Namen. Zugängliche Namen bieten Informationen für unterstützende Technologie, wie Bildschirmlesegeräte, die beim Parsen des Dokuments einen Barrierefreiheitsbaum generieren. Unterstützende Technologie verwendet dann den Barrierefreiheitsbaum, um den Seiteninhalt zu navigieren und zu manipulieren.

Um einem Symbol-Button einen zugänglichen Namen zu geben, platzieren Sie Text im <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 verstecken möchten, können Sie dies in einer zugänglichen Weise tun, indem Sie eine Kombination aus CSS-Eigenschaften verwenden, um es visuell vom Bildschirm zu entfernen, aber es für unterstützende Technologien parsierbar zu belassen.

Es ist jedoch zu beachten, dass das Sichtbarlassen des Button-Textes Menschen helfen kann, die möglicherweise nicht mit der Bedeutung des Symbols vertraut sind oder den Zweck des Buttons verstehen. Dies ist besonders wichtig für Menschen, die nicht technisch versiert sind oder die möglicherweise unterschiedliche kulturelle Interpretationen des von dem Button verwendeten Symbols haben.

• Was ist ein zugänglicher Name? | The Paciello Group
• MDN Understanding WCAG, Leitlinie 4.1 Erklärungen
• Verständnis des Erfolgskriteriums 4.1.2 | W3C Understanding 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 einer Vielzahl von Menschen, darunter Menschen mit motorischen Kontrollproblemen und Menschen, die unpräzise Eingabegeräte wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixel wird empfohlen.

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

Nähe

Große Mengen interaktiver Inhalte - einschließlich Buttons - die in enger visueller Nähe zueinander platziert sind, sollten durch einen Abstand getrennt sein. Dieser Abstand ist nützlich für Menschen mit motorischen Kontrollproblemen, die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

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

• Handzittern und das Riesen-Button-Problem - 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. Um mehr zu erfahren, lesen Sie die Informationen über die ARIA-Button-Rolle.

Button-Stile

Es ist am besten, den Standard-Fokusrahmen für Elemente, die den Fokus haben, nicht zu überschreiben. Wenn die Button-Stile überschrieben werden, ist es wichtig, sicherzustellen, dass der Fokuszustand genügend Kontrast hat, damit Personen mit eingeschränkter Sicht 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 Heuristiken des Benutzeragenten bestimmen, dass der Fokus hervorgehoben werden sollte, wie wenn ein <button> Tastaturfokus erhält. Weitere Informationen finden Sie unter :focus vs :focus-visible.

Der Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der Button-Text- und Hintergrundfarbenwerte mit dem Hintergrund, auf dem der Button platziert ist, bestimmt. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4.5:1 für Textinhalte 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: Farbkontrast-Kontrast-Checker
• MDN Understanding WCAG, erklärungen zu Leitlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Understanding WCAG 2.0

Klicken und Fokus

Ob das Klicken auf ein <button> oder <input>-Button-Typen dazu führt, dass es (standardmäßig) fokussiert wird, variiert je nach Browser und Betriebssystem. Die meisten Browser geben dem Button während des Klickens den Fokus, aber Safari tut dies aus Designgründen nicht.

Beispiele

Erstellen eines einfachen Buttons

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

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

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

Der Dialog in diesem Beispiel hat zwei Optionsschaltflächen, die steuern, ob der Dialog geschlossen werden kann oder nicht. Wählen Sie Ja oder Nein aus 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 Dialog öffnen-Button öffnet das <dialog>-Element mit command="show-modal".

Der Anfrage zum Schließen-Button hat command="request-close", welches das <dialog>-Element mit dem commandfor="mydialog"-Attribut anvisiert. Wenn geklickt, fragt es 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> cancelable ist, mittels eines cancel-Ereignisses.

Wenn das Ereignis cancelable ist, wird der Wert der Optionsschaltflächen geprüft:

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität