Buttons zum Absenden oder Abbrechen definieren (herkömmlich)Zwei Standard-Buttons stellt HTML zur Verfügung, um Formulareingaben zu handhaben: einen Button zum "Absenden" und einen zum "Abbrechen". Mit dem Absendebutton kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <form>-Tag mit dem Attribut action festgelegt wurde (siehe hierzu 
Formular definieren). Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gelöscht.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Buttons zum Absenden oder Abbrechen definieren (herkömmlich)</title>
</head>
<body>
<h1>Das hier können Sie absenden!</h1>
<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>
<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
<tr>
<td align="right">Vorname:</td>
<td><input name="Vorname" type="text" size="30" maxlength="30"></td>
</tr>
<tr>
<td align="right">Zuname:</td>
<td><input name="Zuname" type="text" size="30" maxlength="40"></td>
</tr>
<tr>
<td align="right" valign="top">Kommentar:</td>
<td><textarea name="Text" rows="10" cols="50"></textarea></td>
</tr>
<tr>
<td align="right">Formular:</td>
<td>
<input type="submit" value=" Absenden ">
<input type="reset" value=" Abbrechen">
</td>
</tr>
</table>
</form>
</body>
</html>
Mit <input type="submit"> definieren Sie einen Absendebutton (input = Eingabe, submit = bestätigen). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action angegeben ist. Zur unterschiedlichen weiteren Behandlung der übermittelten Daten können Sie mehrere Absendebuttons mit name-Attribut verwenden.
Mit <input type="reset"> definieren Sie einen Abbrechen-Button (reset = zurücksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt.
Mit dem Attribut value bestimmen Sie die Beschriftung der Buttons (value = Wert).
Mit Hilfe von 
JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel Formulareingaben überprüfen.
Grafische Buttons zum Absenden definierenSie können innerhalb von Formularen Grafiken referenzieren und diese als Absendebutton definieren. Solche grafische Buttons können Sie als Alternative zu Buttons vom Typ <input type="submit"> verwenden.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafische Buttons zum Absenden definieren</title>
</head>
<body>
<h1>Absenden mit Komfort!</h1>
<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>
<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
<tr>
<td align="right">Ihre E-Mail-Adresse:</td>
<td><input name="Mail" type="text" size="30" maxlength="30"></td>
</tr>
<tr>
<td align="right">Formular:</td>
<td><input type="image" src="absende.gif" alt="Absenden"></td>
</tr>
</table>
</form>
</body>
</html>
Mit <input type="image"> definieren Sie einen grafischen Button (input = Eingabe). Die gewünschte Grafikdatei bestimmen Sie mit dem Attribut src (src = source = Quelle). Weisen Sie eine geeignete Grafik vom Typ GIF, JPEG oder PNG zu. Im obigen Beispiel wird vorausgesetzt, dass sich die Grafik absende.gif im gleichen Verzeichnis befindet wie die HTML-Datei mit dem Formular. Für das Adressieren der Grafik gelten die Regeln zum Referenzieren in HTML
Bei grafischen Buttons wird nicht nur der eventuell vorhandene Wert im value Attribut übertragen, sondern zusätzlich auch die Koordinaten des Klicks auf das Bild. Das heißt es werden zwei zusätzlich Werte abgeschickt in der Form name.x und name.y (in PHP wird daraus name_x/name_y). Der IE sendet nur die Koordinaten.
Buttons zum Absenden oder Abbrechen definieren (Bild)Dies funktioniert genauso wie das Definieren von Klick-Buttons (Bild). Dort wird erklärt, wie solche Buttons definiert werden.
Um einen Button zum Absendebutton (Submit-Button) zu erklären, müssen Sie im einleitenden <button>-Tag type="submit" notieren. Um den Button zu einem Abbrechen-Button (Reset-Button) zu erklären, müssen Sie type="reset" notieren.
Der Internet Explorer (getestet bis Version 6.0) verhält sich bei dieser Art Button leider falsch. Er sendet die Buttonbeschriftung, nicht den Inhalt des value-Attributes. Existieren mehrere Absende-Buttons, werden die Beschriftungen aller Buttons gesendet, nicht nur die des geklickten. Deshalb muss man dem IE leider attestieren, dass er dieses Feature derzeit noch nicht korrekt unterstützt.
In der HTML-Referenz finden Sie Angaben darüber, wo das hier beschriebene Formularelement vorkommen darf, welche Attribute erlaubt sind und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Input-Formularelemente (<input>)
Attribut-Referenz für Input-Formularelemente (<input>)
|
| |
 |
Formulare formatieren mit CSS
|
 |
Klick-Buttons
|
 SELFHTML/Navigationshilfen HTML/XHTML Formulare |
|
© 2007 Impressum