<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

Zu den Attributen dieses Elements gehören 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 bei einem vom Steuerungs-<button>-Element durch commandfor gesteuerten Element ausgeführt werden soll. Mögliche Werte sind:

"show-modal"

Der Button zeigt ein <dialog> als Modal. Wenn das Dialogfeld bereits modal ist, wird keine Aktion unternommen. Dies ist ein deklaratives Äquivalent eines Aufrufs der Methode HTMLDialogElement.showModal() auf das <dialog>-Element.

"close"

Der Button schließt ein <dialog>-Element. Wenn das Dialog bereits geschlossen ist, wird keine Aktion unternommen. Dies ist ein deklaratives Äquivalent eines Aufrufs der Methode HTMLDialogElement.close() auf das <dialog>-Element.

"request-close"

Der Button löst ein cancel-Element 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 anwenden können, um das Schließen des <dialog> zu verhindern. Wenn das Dialog bereits geschlossen ist, wird keine Aktion unternommen. Dies ist ein deklaratives Äquivalent eines Aufrufs der Methode HTMLDialogElement.requestClose() auf das <dialog>-Element.

"show-popover"

Der Button zeigt ein verstecktes Popover an. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion unternommen. Siehe Popover API für mehr Details. Dies ist äquivalent zur Einstellung eines Werts von show für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen der Methode HTMLElement.showPopover() auf das Popover-Element.

"hide-popover"

Der Button verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion unternommen. Siehe Popover API für mehr Details. Dies ist äquivalent zur Einstellung eines Werts von hide für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen der Methode HTMLElement.hidePopover() auf das Popover-Element.

"toggle-popover"

Der Button wechselt ein Popover zwischen angezeigt und versteckt. Wenn das Popover versteckt ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es versteckt. Siehe Popover API für mehr Details. Dies ist äquivalent zur Einstellung eines Werts von toggle für das popovertargetaction-Attribut und bietet auch ein deklaratives Äquivalent zum Aufrufen der Methode HTMLElement.togglePopover() auf das Popover-Element.

Benutzerdefinierte Werte

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.

commandfor

Wandelt ein <button>-Element in einen Befehlsschaltfläche um, die ein bestimmtes interaktives Element kontrolliert, indem der im Button-command-Attribut angegebene Befehl ausgeführt wird. Das commandfor-Attribut nimmt die ID des zu kontrollierenden Elements als Wert. Dies ist eine allgemeinere Version von popovertarget.

disabled

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

form

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

Dieses Attribut erlaubt es Ihnen, <button>-Elemente überall im Dokument mit <form>-Elementen zu assoziieren, nicht nur innerhalb eines <form>. Es kann auch ein Vorfahren-<form>-Element außer Kraft setzen.

formaction

Die URL, die die vom Button eingereichten Informationen verarbeitet. Überschreibt das action-Attribut des Formularbesitzers des Buttons. Tut nichts, wenn es keinen Formularbesitzer gibt.

formenctype

Wenn der Button ein Submit-Button ist (er ist innerhalb/assoziiert mit einem <form> und hat nicht type="button"), gibt er an, wie die Formulardaten, die eingereicht werden, zu kodieren sind. 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 ihren type-Attributen, die auf file gesetzt sind, einzureichen.
• text/plain: Wird als Debugging-Hilfe angegeben; sollte nicht für echte Formularübermittlung verwendet werden.

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

formmethod

Wenn der Button ein Submit-Button ist (er ist innerhalb/assoziiert mit einem <form> 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 diese Methode, wenn das Formular vertrauliche Informationen enthält, wie z. B. Anmeldedaten.
• get: Die Formulardaten werden an die action-URL des Formulars angehängt, getrennt durch ein ?, 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 dieses Attribut angegeben ist, überschreibt es das method-Attribut des Formularbesitzers des Buttons.

formnovalidate

Wenn der Button ein Submit-Button ist, gibt dieses boolesche Attribut an, dass das Formular bei der Übermittlung 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 Submit-Button ist, ist dieses Attribut ein vom Autor definierter Name oder ein normiertes, mit einem Unterstrich vorangestelltes Schlüsselwort, das angibt, wo die Antwort auf die Übermittlung des Formulars angezeigt werden soll. Dies ist der name oder das 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: Lädt die Antwort in den gleichen Browsing-Kontext wie den aktuellen. Dies ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext – normalerweise ein neuer Tab oder ein Fenster, abhängig von den Browsereinstellungen des Benutzers.
• _parent: Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen übergeordneten Kontext gibt, verhält sich diese Option genauso wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (d.h. einen Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Eltern hat). Wenn es keinen Eltern gibt, verhält sich diese Option genauso wie _self.

name

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

popovertarget

Wandelt ein <button>-Element in eine Popover-Steuerungsschaltfläche um; nimmt die ID des Popover-Elements, das es steuern soll, als seinen Wert. Die Herstellung einer Beziehung zwischen einem Popover und seiner Aufrufer-Schaltfläche durch das popovertarget-Attribut hat zwei weitere nützliche Effekte:

• Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Aufrufer und platziert das Popover in einer logischen Position in der Tastaturfokussierungsreihenfolge, wenn es angezeigt wird. Dadurch wird das Popover für Tastatur- und Assistenztechnologie-(AT)-Benutzer zugänglicher (siehe auch Popover accessibility features).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr praktisch macht, Popover relativ zu ihren Steuerungen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für mehr Details.

popovertargetaction

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

"hide"

Der Button verbirgt ein angezeigtes Popover. Wenn Sie versuchen, ein bereits verstecktes Popover zu verstecken, wird keine Aktion unternommen.

"show"

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

"toggle"

Der Button wechselt ein Popover zwischen angezeigt und versteckt. 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 von der Steuerungs-Schaltfläche ausgeführt wird.

type

Das Standardverhalten des Buttons. Mögliche Werte sind:

• submit: Der Button übermittelt die Formulardaten an den Server. Dies ist der Standard, wenn das Attribut für Buttons, die mit einem <form> assoziiert 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 tendiert dazu, Benutzer zu irritieren.)
• button: Der Button hat kein Standardverhalten und führt standardmäßig keine Aktion aus, wenn er gedrückt wird. Es können clientseitige Skripte eingerichtet werden, um auf Ereignisse des Elements zu reagieren, die auftreten, wenn die Ereignisse passieren.

value

Definiert den mit dem name des Buttons assoziierten Wert, wenn dieser mit den Formulardaten übermittelt wird. Dieser Wert wird an den Server in Parametern gesendet, wenn das Formular mit diesem Button übermittelt wird.

Anmerkungen

Ein Submit-Button mit dem Attribut formaction, aber ohne ein zugeordnetes Formular, macht nichts. Sie müssen einen Formularbesitzer festlegen, indem Sie ihn entweder 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 eine komplexe Darstellung 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 programmiert werden, um Aktionen auszulösen. Ein aktivierter Button kann programmierbare Aktionen mit JavaScript ausführen, wie etwa 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 horizontal und vertikal zentriert, solange sie nicht überlaufen. Wenn der Button als Flex- oder Grid-Container definiert ist, verhalten sich die Kinder entsprechend als Flex- oder Grid-Elemente. Ein Button, der auf display: inline gesetzt ist, wird so gestylt, als wäre der Wert auf display: inline-block gesetzt.

Barrierefreiheit

Symbolbuttons

Buttons, die nur ein Symbol anzeigen, haben keinen barrierefreien Namen. Barrierefreie Namen bieten Informationen für unterstützende Technologien, wie Screenreader, zum Zugriff, wenn sie das Dokument analysieren und einen Barrierefreiheitsbaum erstellen. Unterstützende Technologie nutzt dann den Barrierefreiheitsbaum, um Seiteninhalt zu navigieren und zu manipulieren.

Um einem Symbolbutton einen barrierefreien Namen zu geben, setzen Sie Text in das <button>-Element, das die Funktionalität des Buttons kurz und bündig 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 barrierefreie Möglichkeit, dies zu tun, die Verwendung einer Kombination von CSS-Eigenschaften, um ihn visuell von der Anzeige zu entfernen, aber für unterstützende Technologien zugänglich zu halten.

Es ist jedoch anzumerken, dass das Belassen des Buttontextes sichtbar 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 technisch nicht versiert sind oder unterschiedliche kulturelle Interpretationen des Symbols haben, das der Button verwendet.

• Was ist ein barrierefreier Name? | The Paciello Group
• MDN Verstehen von WCAG, Erklärung der Richtlinie 4.1
• Verstehen von Erfolgskriterium 4.1.2 | W3C Erklärung 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 nicht präzise Eingabemethoden wie einen Stift oder Finger verwenden. Eine minimale interaktive Größe von 44×44 CSS-Pixel wird empfohlen.

• Verstehen von Erfolgskriterium 2.5.5: Zielgröße | W3C Verstehen von WCAG 2.1
• Zielgröße und 2.5.5 | Adrian Roselli
• Schnelltest: Große Berührungsziele - The A11Y Project

Nähe

Große Mengen interaktiver Inhalte – einschließlich Buttons – die in enger visueller Nähe zueinander platziert sind, sollten durch Leerzeichen getrennt werden. Diese Abstände sind vorteilhaft für Menschen, die motorische Steuerungsprobleme haben, und die möglicherweise versehentlich den falschen interaktiven Inhalt aktivieren.

Abstände können 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 korrekte ARIA-Attribut aria-pressed 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 Standardfokusring 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 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, wenn die Heuristik des User-Agents bestimmt, dass der Fokus hervorgehoben werden sollte, wie z. B. wenn ein <button> Tastaturfokus erhält. Siehe :focus vs :focus-visible für mehr Informationen.

Der Farbkontrastwert wird durch den Vergleich der Leuchtkraft der Buttontext- und Hintergrundfarbwerte mit der Hintergrundfarbe, auf der 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 als 18,66px und bold oder größer, oder 24px oder größer definiert.)

• WebAIM: Farbkontrast-Checker
• MDN Verstehen von WCAG, Erklärung der Richtlinie 1.4
• Verstehen von Erfolgskriterium 1.4.3 | W3C Erklärung von WCAG 2.0

Klicken und Fokus

Ob das Klicken auf einen <button> oder <input>-Buttontypen dazu führt, dass dieser (standardmäßig) den Fokus erhält, variiert je nach Browser und Betriebssystem. Die meisten Browser geben einem geklickten Button den Fokus, aber Safari tut dies nicht, absichtlich.

Beispiele

<button name="button">Press me</button>

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität