Das button-Element: Die Schaltfläche
Ein <button> löst eine Aktion aus: ein Formular absenden, ein Menü öffnen, etwas berechnen. Anders als das input hat er einen richtigen Inhalt zwischen den Tags, da darf neben Text auch ein Bild oder Icon stehen.
Syntax und die drei Typen
HTML-Code
<button type="submit">Absenden</button>
<button type="button">Nur eine Aktion</button>
<button type="reset">Zurücksetzen</button>Der Typ entscheidet über das Verhalten: submit sendet das umgebende Formular ab und ist der Standard wenn du nichts angibst. button tut von sich aus gar nichts und wartet auf JavaScript. reset leert das Formular, was Nutzer öfter aus Versehen treffen als absichtlich, deshalb ist er selten eine gute Idee. Die wichtigste Regel daraus: In Formularen bei Aktions-Buttons immer explizit type="button" setzen, sonst schickt jeder Klick versehentlich das Formular ab. Dieser Stolperstein hat schon unzählige Stundn Fehlersuche gekostet.
Button oder Link?
Die Faustregel ist simpel: Führt der Klick woanders hin, ist es ein Link. Passiert etwas auf der Seite, ist es ein Button. Ein als Button verkleideter Link (oder umgekehrt) verwirrt Tastatur- und Screenreader-Nutzer, denn beide Elemente verhalten sich unterschiedlich: Links folgt man mit Enter, Buttons drückt man mit Enter oder Leertaste, und nur Links lassen sich in neuen Tabs öffnen.
Zugänglich von Haus aus
Ein echter button ist per Tastatur erreichbar, meldet sich bei Hilfstechnik als Schaltfläche und reagiert auf Enter und Leertaste, alles geschenkt. Wer stattdessen ein klickbares div baut, muss das alles mühsam nachrüsten und vergisst garantiert die Hälfte. Also: Klickbares ist ein button, fertig. Das Aussehen lässt sich mit CSS beliebig verbiegen, auch zu den 3D-Kästen die du hier auf der Seite siehst.
Typische Fehler
- type vergessen und sich über absendende Formulare wundern.
- Divs und Spans als Buttons verdrahten.
- Nur ein Icon ohne Text in den Button packen. Dann braucht er ein
aria-label, sonst hört ein Screenreader-Nutzer nur "Schaltfläche".