HTML button • Schaltfläche in einem Formular

HTML Button

button erzeugt eine Schaltfläche in einem Formular, kann aber auch ohne Formular verwendet werden, meist um Skripte zu starten. Außerhalb von Formularen hat ein Button ohne Javascript keine Funktion.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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