CSS, HTML und Javascript mit {stil}

HTML button • Schaltfläche in einem Formular

HTML button

Ein HTML button erzeugt eine Schaltfläche in einem Formular, kann aber – anders als die übrigen Formular-Tags – auch ohne Formular verwendet werden. Dann dient der Button z.B. dem Aufruf eines Javascripts. Außerhalb von Formularen hat ein Button ohne Javascript keine Funktion.

Das 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: red }

<button>
   <span>Ich bin button</span>
</button>

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.

IE6 und IE7 übertragen noch den HTML-Inhalt des button-Elements an die aufgerufene Anwendung. Erst IE 8 überträgt ordnungsgemäß den Wert des value-Attributs. Vorraussetzung ist ein Standard-Doctype. Aber da diese ganze Linie von Altlasten jetzt endgültig vom Internet gefegt ist, kann das button-Tag genauso gut als submit-Button in Formularen eingesetzt werden wie ein input-Tag.

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>-Tags enthalten und ebenso wenig die Tags <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 (Neu in HTML5)
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 (Neu in HTML5)
ein oder mehrere Formulare, zu denen das button-Element gehört
formaction (Neu in HTML5)
gibt an, wohin die Formulardaten geschickt werden und gilt nur wenn das button-Element als type="submit" behandelt wird.
formenctype (Neu in HTML5)
application/x-www-form-urlencoded, multipart/form-data, text/plain
gibt an, wie die Formulardaten versendet werden, gilt nur, wenn type="submit"
formmethod (Neu in HTML5)
get, post
http-Methode für das Versenden der Formulardaten, gilt nur, wenn type="submit"
formnovalidate (Neu in HTML5)
gibt an, dass die Formulardaten nicht validiert werden, gilt nur, wenn type="submit"
formtarget (Neu in HTML5)
_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.