Stil mit {stil}

Jun 08

HTML button • Schaltfläche in einem Formular

Etwas Text

Das HTML-Tag button erzeugt eine Schaltfläche in einem Formular, darf aber – im Gegensatz zu den sonstigen Formular-Tags – auch außerhalb von form-Elementen verwendet werden. Dann dient es z.B. dem Aufruf eines Javascripts bei einem Klick auf ein BUTTON-Element. Außerhalb von Formularen hat ein Klick auf einen Button ohne Javascript keine Funktion.

<form action="form.php" method="post">
   <fieldset style="border: none;"> 
      Etwas Text <input type="text" name="text" /><br />
      <button><img src="button.gif" … /></button>
   </fieldset> 
</form>

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.

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.

Darstellung des button-Tags

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.

Und mehr … Hier einmal bitte
klicken

Das <button>-Tag erzeugt ein Inlineelement, d.h., es führt nicht zu einem 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>.

HTML-Attribute für das button-Tag

accesskey

eine Taste auf der Tastatur, die beim Drücken zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert, z.B. wie hier: <a href="#Seitenanfang" accesskey="2">Direkt zum Inhalt (PC Alt+2 und Mac Ctrl+2)</a>

disabled

boolescher Wert. Wenn er angegeben ist, setzt er die Schaltfläche außer Kraft. In einigen Browsern wird die Schaltfläche ausgegraut dargestellt.

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.

tabindex

ist eine ganze Zahl, die den Rang innerhalb der Tabulatoraufrufe bei der Navigation mit der Tastatur festlegt.

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.

Kernattribute und Ereignisse für button (Schaltflächen)