HTML button • Schaltfläche in einem Formular

Apr 2025

button erzeugt eine interaktive Schaltfläche in einem Formular oder in Kombination mit einem Popover und lässt sich auch mit dialog kombinieren. Buttons lassen sich per Maus, Tastatur oder Touch auslösen, sind fokussierbar und sind goldrichtig für die Barrierefreiheit und Tastatur-Navigation.

button vs input type submit

Ein HTML-button-Tag ist eine Aufwertung des einfachen Submit-Buttons, der von einem input-Tag mit type="submit" gebildet wird. Das button-Tag ist jünger und flexibler als input type="submit": ein interaktives Steuerelement, das der Benutzer anklicken oder per Tastatur auslösen kann.

button span { color: white }

<button type="button">
   Ich bin button
</button>

button type

Wie die meisten Formularelemente hat ein Button ein type-Attribut, das einen von drei Werten annehmen kann.

<button type="submit">Senden</button>
<button type="reset">Zurücksetzen</button>
<button type="button">Übernehmen</button>

Name

button type="submit" hat dieselbe Wirkung wie input type="submit" und sendet die Formulardaten an die Adresse des action-Attributs des form-Tags.
Ein Klick auf button type="reset" löscht die Eingaben in die Felder des Formulars.
button type="button" wird für Scripte verwendet, z.B. um eine Demo oder eine Animation neu zu starten.

Button in Formularen

In einem Formular hat button dieselbe Wirkung wie <input type="submit">, aber zwischen dem öffnenden und schließenden button-Tag kann HTML verwendet werden. Der Button-Text kann durch HTML formatiert und durch CSS gestaltet oder mit einem Bild verziert werden.

<input type="text" name="name" id="infield" placeholder="Name eingeben">
<button type="submit" name="frombutton" value="Abgesendet mit Button" >
   <svg height="46" width="98" viewBox="0 0 358 168">
      <rect fill="firebrick" height="168" width="317" y="0" x="40"/>
      <path fill="firebrick" transform="matrix(1 0 0 1.314 .28 -26.8)" d="m-.28 85.36l58.73-33.94v67.78z"/>
      <text x="90" y="110" fill="white" font-size="68px">Senden</text>
   </svg>
</button>

Darstellung von button-Tags

button erzeugt ein Inlineelement und erzeugt keinen Zeilenvorschub. Ohne CSS entsteht eine Schaltfläche wie bei input type="submit".

Wie bei allen Eingabefeldern stellt jeder Browser button-Elemente etwas anders dar: schlichter grauer Hintergrund, weiß mit abgerundeten Ecken …

Jeder Inhalt – Text oder Bild –, der zwischen das öffnende und schließende button-Tag gesetzt wird, wird in der Schaltfläche gerendert. Innerhalb des Textes können die meisten HTML-Tags stehen und wie erwartet funktionieren. Die einzige Ausnahme bilden Image Maps, die mit <map>- und <area>-Tags erzeugt werden: Sie können nicht in einer Schaltfläche stehen.

Weiterhin sollte eine Schaltfläche keine weiteren <button>-Elemente enthalten und ebenso wenig <fieldset>, <form>, <iframe>, <input>, <label>, <select> oder <textarea>.

Button-Tag und popover-Element

Button-Elemente wirken nicht nur in Formularen, sondern HTML <button> unterstützt zusätzliche command-Attribute, die spezifische Aktionen auslösen können, z.B. das Anzeigen bzw. Verbergen von popover-Ü

toogle-popover: Toggelt die Sichtbarkeit eines Popovers
show-popover: Zeigt das Popover an
hide-popover: Blendet das Popover aus
close: Schließt das Dialogfeld
request-close: Fordert das Schließen eines Dialogs an
show-modal: Öffnet ein modales Dialogfeld

<button popovertarget="info" popovertargetaction="toggle">
	Info ein/aus
</button>

<div id="info" popover>
  <p>Hier sind zusätzliche Informationen.</p>
</div>

Das Popover-Api definiert ein beliebiges Element auf der Seite als popover, dessen Sichtbarkeit durch ein anderes Element – z.B. einem Button oder input type="button" – ein- und ausgeschaltet werden kann. Popover-Elemente sind per Vorgabe versteckt und nicht sichtbar – im Zustand closed. Erst der Klick auf den Button versetzt das Popover in den Zustand open.

Der open/closed-Zustand wird von der Pseudo-Klasse :popover-open angesprochen, die das Popover aber nur stylt, wenn es geöffnet ist.

button-Tag: Attribute

Da button-Tags in Formularen dieselbe Funktion wie input type="submit" oder type="reset" haben, verfügen sie über denselben Set von Attributen.

autofocus: Der Button soll automatisch in den Fokus, wenn die Seite geladen wird.
disabled: boolescher Wert. Wenn er angegeben ist, setzt er die Schaltfläche außer Kraft.
form: ein oder mehrere Formulare, zu denen das button-Element gehört
formaction: gibt an, wohin die Formulardaten geschickt werden und gilt nur wenn das button-Element als type="submit" behandelt wird.
formenctype: application/x-www-form-urlencoded, multipart/form-data, text/plain
gibt an, wie die Formulardaten versendet werden, gilt nur, wenn type="submit"
formmethod: get, post
http-Methode für das Versenden der Formulardaten, gilt nur, wenn type="submit"
formnovalidate: gibt an, dass die Formulardaten nicht validiert werden, gilt nur, wenn type="submit"
formtarget: _blank, _self, _parent, _top; in welchen Fenster die Antwort eingespielt wird, gilt nur, wenn type="submit"
name: weist einer Schaltfläche eine Zeichenkette als eindeutige Bezeichnung zu, die von der verarbeitenden Anwendung oder einem clientseitigen Skript zur Identifizierung des Formularelements benutzt werden kann.
type: bestimmt die Art der Schaltfläche. Die erlaubten Werte sind button, reset oder submit.
value: weist einer Schaltfläche einen Wert zu. Der Wert kann später durch ein Skript geändert werden.