HTML button

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

button span { color: white }

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

button type

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

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>

Außerhalb von Formularen haben button-Elemente von Haus keine Wirkung, sondern sind auf den Beistand von Javascript angewiesen. Innerhalb von Formularen sind sie auch ohne ausdrückliches type="submit" der Button zum Absenden des Formulars.

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