SELFHTML: HTML/XHTML / Formulare / Buttons zum Absenden oder Abbrechen
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie in HTML-Formularen Buttons zum Absenden des Formulars oder zum Zurücksetzen aller Eingaben definieren.
Keywords: SELFHTML, HTML, XHTML, Formulare, Absenden, Abbrechen, Absendebutton, Abbrechen-Button, Submit, Reset, Submit-Button, Reset-Button, input, type
Date: 2005-10-31T12:25:34+01:00

| # 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

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

## 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

© 2007 Impressum