SELFHTML: HTML/XHTML / Formulare / Buttons zum Absenden oder Abbrechen

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Buttons zum Absenden oder Abbrechen
	Buttons zum Absenden oder Abbrechen definieren (herkömmlich) Grafische Buttons zum Absenden definieren Buttons zum Absenden oder Abbrechen definieren (Bild) Weitere Informationen

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.

Beispiel:

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&ouml;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>

Erläuterung:

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).

Beachten Sie:

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 definieren

Sie 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.

Beispiel:

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>

Erläuterung:

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

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.

Beachten Sie:

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.

Weitere Informationen

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