SELFHTML

Buttons zum Absenden oder Abbrechen

Informationsseite

nach unten Buttons zum Absenden oder Abbrechen definieren (herkömmlich)
nach unten Grafische Buttons zum Absenden definieren
nach unten Buttons zum Absenden oder Abbrechen definieren (Bild)
nach unten Weitere Informationen

 nach unten 

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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 Seite Formular definieren). Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gelöscht.

Beispiel:

Beispiel-Seite 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 Kapitel JavaScript können Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. Innerhalb dieser Dokumentation finden Sie ein Anwendungsbeispiel Seite Formulareingaben überprüfen.

nach obennach unten

HTML 3.2XHTML 1.0MS IE 3.0Netscape 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite 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 Seite Referenzieren in HTML

Beachten Sie:

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.

nach obennach unten

HTML 4.0XHTML 1.0Netscape 6.0Opera 5.12Mozilla Firefox 1Safari 1.0 Buttons zum Absenden oder Abbrechen definieren (Bild)

Dies funktioniert genauso wie das Definieren von Seite 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.

nach obennach unten

Weitere Informationen

In der Kapitel 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:
Seite Element-Referenz für Input-Formularelemente (<input>)
Seite Attribut-Referenz für Input-Formularelemente (<input>)

 nach oben
weiter Seite Formulare formatieren mit CSS
zurück Seite Klick-Buttons
 

© 2007 Seite Impressum