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 – im Gegensatz zu den sonstigen Formular-Tags – auch ohne Formular verwendet werden.

Dann dient HTML button z.B. dem Aufruf eines Javascripts. Außerhalb von Formularen hat ein Button ohne Javascript keine Funktion.

button ist eine Aufwertung des simplen Submit-Buttons, bei dem wir außer dem Text im value-Attribut nur wenig ändern können.

button span { color: red }

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

In einem Formular hat button dieselbe Wirkung wie <input type="submit">, aber innerhalb eines button-Tags kann HTML verwendet werden – z.B. zur Formatierung des eingespielten Textes oder ein img-Tag wie in diesem Beispiel.

Eingabe
<form>
    Eingabe <input type="text" name="text">
    <button><img src="button.png"></button>
</form>

Ein button-Element macht von Haus aus nichts. Damit button in einem Formular wie ein submit-Button wirkt, braucht es type="submit".

HTML button in Internet Explorer 8 | 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.

Button mit Bild

Button mit Bild (Kamera) Button mit Bild (Zurück)

Der Inhalt einer Schaltfläche kann aus einem Bild oder Text bestehen. Wird innerhalb des button-Tags weder Text noch ein Bild gesetzt, erscheint ein kleiner leerer Button auf der Seite.

Wenn der Inhalt ein Text ist, kann die Schaltfläche zusätzlich in einer 3D-Optik dargestellt werden.

button erzeugt ein Inlineelement und erzeugt keinen Zeilenvorschub.

<button id="button3" style="background: none; border: none;">
   <img src="button.gif" … /></button>

<button id="button4">Und mehr …</button>

<button id="button5">Hier einmal bitte <br />
   <span style="color: red;">klicken</span></button>
   
<button id="button6"> </button>

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

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 gehört
formaction (Neu in HTML5)
gibt an, wohin die Formulardaten geschickt werden, gilt nur, wenn type="submit"
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.