Wann sollte das Button Element verwendet werden

Man verwendet es, äh, wenn man einen Button auf seiner Seite haben möchte, den Benutzer anklicken können, richtig? Nun, leider ist es etwas komplizierter als das. Aber nicht zu schlimm, lass es uns herausfinden.

Es sieht so aus

<button>
  Do Something
</button>

Was ist das häufigste Ergebnis, wenn man auf etwas auf einer Website klickt? Man gelangt zu einer neuen URL, so wie man es beim Klicken auf einen Link (ein <a href="/example/"></a>) Element tun würde).

Das <button> Element kann das allein nicht. Es gab im Laufe der Jahre verschiedene Gespräche darüber, ob man „href überall“ zulassen sollte, aber nichts ist daraus geworden.

Das Klicken auf einen Button bewirkt jedoch etwas, wenn er in seiner natürlichen Umgebung verwendet wird…

Button ist ein Formularelement

Webformulare haben Submit-Buttons. Man könnte das so sehen:

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

Ein <button> Element in einem <form> verhält sich standardmäßig **identisch** zu dem obigen Submit-Input.

<form action="/" method="post">
  <button>Submit</button>
</form>

So schlimm die UX auch sein mag, Formulare können auch Reset-Buttons haben. Man kann dieses Verhalten duplizieren, indem man den Standard-Submit-Typ auf Reset ändert.

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

Das Klicken auf diesen Button löscht alle anderen Eingaben (und Textbereiche) im übergeordneten <form>.

Buttons können Inhalt haben

Der Hauptgrund für die Verwendung eines <button> ist, dass es sowohl ein öffnendes als auch ein schließendes Tag (</button>) hat. Das bedeutet, dass sich *etwas* darin befinden kann. Ein üblicher Anwendungsfall wäre etwas wie

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

Während ein Input <input type="image"> sein kann, wäre dieser gemischte Inhalt schwer umzusetzen.

Man kann wahrscheinlich damit durchkommen, beliebigen HTML in einen Button zu packen, aber MDN weist darauf hin, dass der „erlaubte Inhalt“ eines Buttons auf „Phrasing Content“ beschränkt ist. Phrasing Content ist eine begrenzte Teilmenge von HTML-Elementen, die „den Text und die darin enthaltene Auszeichnung definiert. Abfolgen von Phrasing Content bilden Absätze.“

Pseudo-Elemente können ebenfalls verwendet werden.

Lassen wir die Gestaltung von <button>s für einen anderen Tag, aber verschiedene Browser wenden im Allgemeinen einen speziellen Stil auf Buttons an. Man wird entweder diesen Stil beibehalten wollen, damit der Standard durchkommt, oder ihn gründlich entfernen, damit die eigene neue Gestaltung browserübergreifend konsistent ist.

Betrachten wir: „Wenn ein Button keinen sinnvollen href hat, ist es ein <button>“

Ich habe kürzlich gesagt, dass ich dieses Sentiment mochte. Das hat diesen Artikel für mich angestoßen. Damals dachte ich darüber nach, wie sehr ich die Semantik davon mochte. Zum Beispiel:

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

Da gibt es keinen sinnvollen href. Die 0 ist nur da, damit die Seite nicht springt, weil IDs nicht mit einer Zahl beginnen können.

Wahrscheinlich bedeutet HTML wie oben: *Ich werde das Klicken darauf etwas mit JavaScript bewirken lassen.* Irgendwie fühlt sich das besser an als ein <div>, weil man die Cursor-Änderung und andere Standardstile bekommt.

Wenn man diese bedeutungslosen hrefs nicht mag, kann ein <button> eine gute Alternative sein. Aber leider ist ein <button> außerhalb des Kontexts eines <form> genauso bedeutungslos.

<button>
  Outside of a <form>, I'm just as useless.
</button>

Aber <button> fühlt sich trotzdem besser an

Auch wenn ein <button> außerhalb eines Formulars ohne JavaScript nichts bewirkt, fühlt er sich für *Dinge, die man anklicken kann und die etwas anderes tun als Seiten zu wechseln* besser an. Ein leerer Link fühlt sich definitiv nicht richtig an.

Gut. Dann fügen wir es mit JavaScript ein.

Das ist wahrscheinlich die beste Lösung. Wenn JavaScript erforderlich ist, damit das klickbare Element überhaupt etwas tut, könnte es genauso gut gar nicht da sein, es sei denn, JavaScript läuft. Wir können tun

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

Das Hinzufügen von „Button“ könnte problemlos Teil Ihres JavaScript-Workflows sein.

Wann Links mehr Sinn ergeben

Wenn es irgendeine Art von href gibt, die Sie diesem Link geben können und die Sinn ergibt, dann verwenden Sie auf jeden Fall einen Anker. Auch wenn Sie dieses Verhalten mit JavaScript überschreiben. Das ist progressive Enhancement in seiner besten Form. Zum Beispiel

• Ein Suchbutton löst normalerweise eine Art von Auto-Search-Dingens aus – aber der href könnte einfach auf eine /search/-Seite verweisen.
• Ein Veröffentlichungsbutton löst die nächste Stufe der Veröffentlichung von etwas aus, das ein Benutzer erstellt hat – aber der href könnte einfach auf eine /publish/-Seite verweisen.
• Ein Thumbnail-Button öffnet eine Lightbox mit einer größeren Version – aber der href könnte einfach auf die URL dieser größeren Version verweisen.

Wenn nichts Sinn ergibt, fügen Sie den Button mit JavaScript ein.

Zugänglichkeitsbedenken

Nehmen wir an, die Verwendung eines Anker-Links ergibt Sinn. Nachdem Sie sich selbst ein kleines Schulterklopfen dafür gegeben haben, dass Sie gut in der progressiven Verbesserung sind, muss auch die Zugänglichkeit berücksichtigt werden.

Sie denken vielleicht: Ich hab's!

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

Aber Sie sind noch nicht aus dem Gröbsten raus. MDN behandelt es gut

Warnung: Seien Sie vorsichtig, wenn Sie Links mit der Button-Rolle kennzeichnen. Buttons werden erwartet, mit der Leertaste ausgelöst zu werden, während Links erwartet werden, über die Enter-Taste ausgelöst zu werden. Mit anderen Worten, wenn Links dazu verwendet werden, sich wie Buttons zu verhalten, ist das Hinzufügen von role="button" allein nicht ausreichend. Es wird auch notwendig sein, einen Key-Event-Handler hinzuzufügen, der auf die Leertaste reagiert, um mit nativen Buttons konsistent zu sein.

Haben Sie das verstanden? Sie aktivieren Links und Buttons mit unterschiedlichen Tasten, also bedenken Sie das.

Gehen Sie hinaus und äh, machen Sie klickbare Dinge richtig.