## Buttons zum Absenden oder Abbrechen

| Buttons zum Absenden oder Abbrechen definieren (herkömmlich) Grafische Buttons zum Absenden definieren Buttons zum Absenden oder Abbrechen definieren (modern) 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 Absende-Button kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden `<form>`-Tag bei `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>Text des Titels</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://selfhtml.teamone.de/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 Absende-Button (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.
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 Absende-Button 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>Text des Titels</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://selfhtml.teamone.de/cgi-bin/comments.pl">
    <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
     <tr>
      <td align="right">Ihre Mailadresse:</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">
      </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 (modern)

Dies funktioniert genauso wie das Definieren von Klick-Buttons (modern). Dort wird erklärt, wie solche Buttons definiert werden.

Um einen Button zum Absende-Button (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.

## 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 mit CSS formatieren
| Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen

© 2001 selfhtml@teamone.de