1.9 Buttons und Absenden von Formularen

Sobald das Formular vom Benutzer ausgefüllt wurde, sollen die Daten an den Webserver übermittelt werden.

Einfache Buttons

Um dem Benutzer die Möglichkeit zu geben, das Formular abzuschicken, stellt HTML einen speziellen Typ eines <input>-Elements bereit: type="submit". Dieser Button sendet alle Daten an die festgelegte Adresse. Dem Button kann über das Attribut value ein Text zugewiesen werden, der dann im Browser auf dem Button angezeigt wird.

<input type="submit" value="Abschicken">

Für die Funktion, Daten des Formulars zu löschen, ändern Sie den Typ zu type="reset", um einen Button zu erstellen, der alle Eingaben des Formulars zurücksetzt. Auch hier kann ein Textwert über das value-Attribut definiert werden.

<input type="reset" value="Löschen">

Häufig findet der Button ohne Standardfunktion Anwendung, bei dem die Funktionalität durch JavaScript implementiert wird.

<input type="button" value="Weiter" onclick="javaScript_methode_tu_was()">

Buttons zum Absenden oder Abbrechen

Hinweis

Ein verbreiteter Fehler beim Erstellen einfacher Formulare mit Buttons ist, das Formular vor dem Button zu schließen. Die korrekte Reihenfolge sieht vor, dass das Formular geöffnet, die input-Elemente wie Textfeld und Button definiert und erst dann das Formular mit dem </form>-Tag geschlossen wird.

Bilder als Buttons verwenden

Das Element <input type="image"> funktioniert ähnlich wie <input type="submit"> und sendet die Formulardaten mittels der in <form> spezifizierten Methode an den Webserver.

<input type="image" src="abschicken.jpg" alt="Abschicken">

<button>-Element

Alles, was bisher mit <input type="submit">, <input type="reset">, <input type="button"> oder <input type="image"> erreicht wurde, kann auch mit dem <button>-Element realisiert werden. Der große Vorteil des <button>-Elements liegt darin, dass zwischen dem öffnenden und schließenden Tag andere HTML-Elemente oder Texte platziert werden können. So kann der Button mittels CSS gestaltet oder ein Bild eingefügt werden.

1
2
3
<button type="submit" name="page1" id="page1">
  <span>Abschicken</span>
</button>

Best Practices

  • Verwenden Sie <button type="submit"> für Absendebuttons, um das Aussehen des Buttons einfacher zu gestalten.
  • Nutzen Sie type="reset" mit Bedacht, da Nutzer möglicherweise unbeabsichtigt Eingaben verlieren könnten. Oftmals können Sie auf einen Reset-Button verzichten.
  • Setzen Sie <input type="image"> ein, wenn der Button mit einem spezifischen Bild gestaltet werden soll, aber achten Sie darauf, einen alternativen Text anzugeben.