Schaltflächen in HTML-Formularen

Zu jedem Formular, das man auf einer Webseite mit HTML einfügt, gehört in der Regel mindestens eine Schaltfläche. Dabei gibt es Unterschiede bei den Funktionen und die Schaltflächen können auch mit unterschiedlichen Tags eingefügt werden. Folgende Tags werden in der Regel für Schaltflächen verwendet:

  • INPUT-Tag
  • BUTTON-Tag

Der INPUT-Tag ist ein selbstschließendes Element ohne Start- und End-Tag. Der BUTTON-Tag ist kein selbstschließendes Element und besitzt einen Start- und End-Tag (<button> ... </button>).

Die Schaltflächen unterscheiden sich nach folgenden Funktionen:

  • Zum Abschicken des Formulars: Wird auf die Schaltfläche geklickt, wird das Formular an das Script verschickt, das im FORM-Tag unter action="..." angegeben wurde.
  • Zum Leeren des Formulars: Damit werden die Formularfelder geleert.
  • Zur internen Verwendung: Schaltflächen können auch für interne Zwecke verwendet werden, z.B. wenn mit JavaScript Berechnungen mit den Formularfeldern durchgeführt werden. Dabei wird das Formular nicht abgeschickt und es wird lediglich der JavaScript-Code ausgeführt.
Schaltflächen in HTML-Formularen

HTML-Code für Schaltflächen mit dem INPUT-Tag

Die unterschiedlichen Funktionen werden beim INPUT-Tag über das Typ-Attribut gesteuert, das in der Form type="..." angegeben wird. Dabei können folgende Werte angegeben werden:

  • submit: Das ist der klassische Wert zum Abschicken des Formulars an die unter action="..." angegebene Adresse.
  • image: Auch damit wird ein Formular abgeschickt. Der Unterschied zum Wert submit ist, dass man beim image ein Bild für die Schaltfläche angeben kann. So hat man beim Gestalten der Schaltfläche mehr kreative Freiheiten.
  • reset: Darüber werden die Formularfelder geleert (resettet).
  • button: Dieser Typ dient primär für interne Zwecke verwendet, z.B. für JavaScript-Programme.

Ein Beispielcode in HTML für alle vier Typen. In XHTML muss lediglich beachtet werden, den abschließenden Trailing-Slash für selbstschließende Elemente mit " /> anzugeben. Beim Bildbutton wurde als Bilddatei schaltflaeche.jpg angegeben. Man könnte natürlich auch eine andere Bilddatei verwenden. Der Pfad zur verwendeten Bilddatei sollte dabei stimmen.

<!-- Zum Abschicken -->
<input type="submit">

<!-- Bildschaltfläche zum Abschicken -->
<input type="image" src="schaltflaeche.jpg">

<!-- Zum Leeren -->
<input type="reset">

<!-- Für interne Zwecke -->
<input type="button">

Attribute bei Schaltflächen, die mit dem INPUT-Tag erzeugt werden

Bei Schaltflächen, die mit dem INPUT-Tag erzeugt werden, können viele weitere Attribute mit einem Leerzeichen getrennt hinzugefügt werden. Dabei betrifft vor allem folgende Attribute.

  • value: Damit wird die Beschriftung der Schaltfläche angegeben.
  • name: Der Schaltfläche kann mit diesem Attribut ein Name zugewiesen werden. Wird das Formular an ein Script abgeschickt, kann über den Namen der Inhalt abgefragt werden, der mit value="..." angegeben wird.
  • id: Neben dem Namen kann der Schaltfläche das globale Attribut ID zugewiesen werden. Die ID muss eindeutig sein. Die Unterschiede zum Namen werden auf der Seite für die Eingabefelder unter Attribut für die ID erläutert.

Folgende Attribute sind bei Schaltflächen, die mit dem INPUT-Tag erzeugt werden, nur beim Typ image anwendbar.

  • src: Der Pfad zur Bilddatei wird in der Form src="..." angegeben.
  • alt: Mit alt="..." wird für die Bilddatei ein Alternativtext angegeben.
  • width: Angabe für die Breite des Bildes in der Form width="...".
  • height: Angabe für die Höhe des Bildes in der Form height="...".

Nachfolgend ein Beispielcode in HTML mit allen sieben Attributen. In XHTML muss der Trailing-Slash am Ende beachtet werden.

<!-- Zum Abschicken -->
<input type="submit" value="Abschicken" name="submit" id="submit">

<!-- Bildschaltfläche zum Abschicken -->
<input type="image" src="schaltflaeche.jpg" alt="Abschicken" name="image" id="image">

<!-- Zum Leeren -->
<input type="reset" value="Leeren" name="reset" id="reset">

<!-- Für interne Zwecke -->
<input type="button" value="JavaScript" name="button" id="button">

Bei einem Klick auf eine Schaltfläche, wird beim Abschicken des Formulars an die unter action="..." angegebene Adresse nur der Wert von der Schaltfläche übertragen, der angeklickt wurde. Das Auslesen des Werts einer Schaltfläche über den Namen wird in der Praxis kaum gebraucht, da in erster Linie die Eingaben benötigt werden, die in den Formularfeldern eingegeben wurden. Außerdem betrifft das nur die Schaltfläche vom Typ submit.

Beim Typ image ist in den Spezifikationen nicht vorgesehen, dass man mit value="..." einen Wert für die Beschriftung angibt. Der Text sollte daher im Bild implementiert sein. Stattdessen gibt man für das Bild über alt="..." einen Alternativtext ein. Gibt man trotzdem mit value="..." einen Wert für die Bildschaltfläche ein, funktioniert das Anzeigen und Übertragen des Werts nicht bei allen Browsern und ist daher browserabhängig. In Tests konnte festgestellt werden, dass Chrome und Opera den Wert übertragen, Firefox und IE dagegen nicht. Das Verhalten kann sich natürlich bei jeder Version ändern.

Die übrigen Schaltflächen vom Typ button und reset sind nicht dafür da, um das Übertragen des Formulars an ein Script anzustoßen. Möchte man, aus welchen Gründen auch immer, dass für image, button und reset Werte übertragen werden, kann man das z.B. über versteckte Felder (HIDDEN-Feld) realisieren.

Beim Typ image ist außerdem die Besonderheit, dass die X- und Y-Koordinaten der angeklickten Stelle vom Bild übertragen werden. Diese können über <bildname>_x und <bildname>_y ausgelesen werden, z.B. in PHP über $_POST['image_x']; oder $_POST['image_y'];, wenn die Übertragungsmethode POST gewählt wurde und wenn der Name für das Feld image ist. Bei einer anderen Übertragungsmethode oder einem anderen Namen muss der Code entsprechend angepasst werden.

  • disabled: Über das Attribut wird eine Schaltfläche deaktiviert und ist technisch nicht existent. Der Code kann in HTML in verkürzter Form (ohne Wert) erfolgen. In XHTML muss dagegen die Langform (mit Wert) verwendet werden. Ein Beispielcode.
<!-- In HTML -->
<input type="submit" value="Abschicken" disabled>

<!-- In XHTML -->
<input type="submit" value="Abschicken" disabled="disabled" />

Das Attribut disabled kann auch bei Schaltflächen vom Typ image, reset und button verwendet werden.

Attribute für den INPUT-Tag bei Schaltflächen ab HTML5

Ab HTML5 sind bei Formularen viele Neuerungen hinzugekommen. Darunter sind folgende Attribute, die man beim INPUT-Tag verwenden kann, wenn das Typ-Attribut submit, image, reset oder button ist.

  • form: Vor HTML5 waren die Tags für die einzelnen Formularfelder innerhalb des FORM-Tags zu platzieren. Ab HTML5 können sie auch außerhalb platziert werden. Dabei wird beim Attribut mit form="..." die ID des Formulars angegeben, zu der die Schaltfläche gehört. Ein Beispielcode.
<!-- Ab HTML5 -->
<form id="formularid">
</form>

<!-- Schaltflächen außerhalb des FORM-Tags -->
<input type="submit" value="Abschicken" form="formularid">
<input type="image" src="schaltflaeche.jpg" alt="Abschicken" form="formularid">
<input type="reset" value="Leeren" form="formularid">
<input type="button" value="JavaScript" form="formularid">
  • autofocus: Legt fest, dass nach dem Laden der Seite der Fokus auf das Element gelegt wird. Bei der Schreibweise kann die HTML-Schreibweise in Kurzform (ohne Wert) oder die XHTML-Schreibweise verwendet werden. Das Attribut darf auf einer Seite nur einem Element zugewiesen werden. Ein Beispielcode.
<!-- HTML-Schreibweise -->
<input type="submit" value="Abschicken" autofocus>

<!-- XHTML-Schreibweise -->
<input type="submit" value="Abschicken" autofocus="autofocus" />

Bei den anderen Schaltflächen vom Typ image, reset und button verfährt man identisch. Die folgenden Attribute sind nur beim Typ submit und image anwendbar.

  • formaction: Damit wird die im FORM-Tag unter action="..." angegebene Adresse überschrieben. So kann man praktisch mehrere Schaltflächen einfügen, über die das Formular an jeweils andere Adressen verschickt werden kann.
  • formenctype: Mit diesem Attribut wird das im FORM-Tag angegebene Attribut enctype="..." überschrieben. Auch hierbei könnte man mehrere Schaltflächen einfügen und jeweils einen anderen Wert eingeben.
  • formmethod: Das Attribut überschreibt die Übertragungsmethode des Formulars, die im FORM-Tag mit method="..." angegeben wurde. Damit kann man ebenfalls mehreren Schaltflächen jeweils eine andere Übertragungsmethode vorgeben.
  • formtarget: Überschreibt den Wert, der im FORM-Tag unter target="..." angegeben wurde. Mehreren Schaltflächen können hierbei ebenfalls andere Werte zugewiesen werden.

Ein Beispielcode mit allen vier Attributen.

<form action="script.php" enctype="multipart/form-data"
 method="post" target="_self">

<!-- Schaltfläche, die die Werte vom FORM-Tag überschreibt -->
<input type="submit" value="Abschicken" action="anderesscript.php"
 enctype="text/plain" method="get" target="_blank">

</form>

Weitere Schaltflächen können nach demselben Schema eingefügt werden.

  • formnovalidate: Das Attribut formnovalidate ist etwas schwierig zu verstehen. Daher wird an dieser Stelle eine ausführliche Beschreibung gewidmet. In den Spezifikationen heißt es sinngemäß, dass damit das Attribut novalidate des FORM-Tags überschrieben wird.

Ab HTML5 können bei vielen Formularfeldern gewisse Vorgaben gemacht werden. Beispielsweise kann man bei einem Textfeld vorgeben, dass es nur Zahlen enthalten darf. Ist im FORM-Tag das Attribut novalidate nicht gesetzt, erfolgt eine clientseitige Prüfung durch den Browser, sofern das vom Browser unterstützt wird. Das ersetzt zwar keine serverseitige Prüfung, ist aber trotzdem ein einfaches Mittel zur Überprüfung der Daten und die clientseitige Überprüfung mit JavaScript kann an dieser Stelle entfallen.

Das Attribut formnovalidate, das bei einer Schaltfläche zum INPUT-Tag als Attribut mit formnovalidate="formnovalidate" hinzugefügt werden kann, schaltet die Überprüfung aus, wenn im FORM-Tag das Attribut novalidate nicht angegeben wurde. So könnte man die Überprüfung der Formulardaten von der angeklickten Schaltfläche abhängig machen. Wenn im FORM-Tag das Attribut novalidate angegeben wurde, kann die Angabe bei der Schaltfläche eigentlich entfallen und ist überflüssig.

Das Ganze funktioniert auch in umgekehrter Richtung. Im FORM-Tag kann das Attribut novalidate angegeben worden sein, wodurch die Formulardaten nicht überprüft werden. In dem Fall kann man das Attribut bei der Schaltfläche mit formnovalidate="" angeben und die Überprüfung erfolgt trotzdem. Somit wird das Attribute novalidate des FORM-Tags überschrieben. Wenn im FORM-Tag das Attribut novalidate nicht angegeben wurde, dann ist das Setzen des Attributs bei der Schaltfläche mit formnovalidate="" ebenfalls überflüssig und kann eigentlich entfallen. Dazu ein Bespielcode für beide Fälle.

<!-- Fall 1: novalidate im FORM-Tag nicht angegeben -->
<form action="script.php">

<!-- Schaltfläche setzt das Formular auf novalidate -->
<input type="submit" value="Abschicken" novalidate="novalidate">
</form>

<!-- Fall 2: novalidate im FORM-Tag angegeben -->
<form action="script.php" novalidate>

<!-- Schaltfläche überschreibt novalidate vom FORM-Tag -->
<input type="submit" value="Abschicken" novalidate="">
</form>

Positionierung der Schaltflächen innerhalb von Block-Elementen

Die zuvor beschriebenen Codebeispiele haben einen Schönheitsfehler. Denn, der INPUT-Tag ist ein Inline-Element und die Schaltflächen müssten für die korrekte Syntax in ein Block-Element eingefügt werden, z.B. in einem DIV-Tag. Ein Beispielcode.

<div><input type="submit" value="Abschicken"></div>

Das Aussehen der Schaltfläche und des Block-Elements kann über CSS erfolgen.

Formular-Schaltfläche mit dem BUTTON-Tag erzeugen

Neben dem INPUT-Tag kann in HTML auch der BUTTON-Tag verwendet werden, um eine Schaltfläche zu erzeugen. Der Hauptunterschied zum INPUT-Tag besteht darin, dass der BUTTON-Tag ein leeres Element ist und mit mehreren Elementen gefüllt werden kann. Beispielsweise könnte man eine Schaltfläche mit mehreren Texten und Bildern erstellen und diese außerdem mit CSS formatieren. So hat man wesentlich mehr kreative Freiheiten. Ein Beispielcode.

<button type="submit" class="css1">
<p class="css2">Text</p>
<p class="css3"><img src="bild.jpg"></p>
<p class="css4">Text</p>
</button>

Attribute für den BUTTON-Tag

Welche Funktion die Schaltfläche erfüllen soll, wird beim BUTTON-Tag ebenfalls über das Typ-Attribut mit type="..." festgelegt. Hierbei kann man die Werte submit, reset oder button angeben. Der Wert image ist beim BUTTON-Tag nicht möglich. Für die übrigen Attribute gilt dasselbe wie beim Erzeugen einer Schaltfläche mit dem INPUT-Tag.