input / button type="submit" – Formular absenden

HTML input type submit oder button type submit

Der Submit-Button ist das finale Element eines Formulars: Der Klick übermittelt die Daten des Formulars an die Anwendung – fast immer auf eine serverseitige Anwendung. Ein Submit-Tag gibt es nicht, sondern der Submit-Button entsteht durch das submit-Attribut in einem input-Feld oder durch ein button-Tag.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Der Button zum Absenden des Formulars

Das Attribut type="submit" macht aus einem Eingabefeld einen graphischen Button. Wenn der Nutzer auf den Button klickt, leitet der Browser die eingegebenen Daten zu der URL aus dem action-Attribut des form-Tags.

<input type="submit" value="Senden">
<button type="submit">Senden</button>
<input type="image" src="img-button.png" alt="senden"> 

Innerhalb eines Formulars passiert das ebenfalls, wenn anstelle von input type="submit" ein HTML-Button-Element benutzt wird – selbst wenn das öffnende Button-Tag das submit-Attribut nicht aufführt.

Der dritte Button im Bunde für das Submit des Formulars ist ein input-Tag vom Typ image.

Anders als input-Elemente wie input type="text", type="checkbox" oder auch als select-Optionen übertragen Submit-Buttons keine Werte an die Anwendung auf dem Server. Der Text im value-Attribut wird zum Button-Text, und wenn value leer bleibt, zeigt der Button den voreingestellten Text Senden.

In das value-Attribut kann also ein beliebiger Text gesetzt werden, vom einfachen Absenden bis Ab die Post.

Mehr als ein submit-Button im Formular

Ein Formular muss nicht unbedingt mit einem einzigen submit-Button auskommen. Wenn der Benutzer z.B. die Wahl hat, das Formular zu senden oder seine Eingaben noch einmal zu prüfen, können weitere Submit-Buttons eingesetzt werden – im Grunde genommen beliebig viele.

<input type="submit" name="delete[]" value="Löschen">
<input type="text" name="kurs[]" value="Nähkurs für Anfänger">
<input type="submit" name="save[]" value="Ändern">
	
<input type="submit" name="delete[]" value="Löschen">
<input type="text" name="kurs[]" value="3D-Drucken für Einsteiger">
<input type="submit" name="save[]" value="Ändern">

In diesem Beispiel wird das Formular nicht erst abgesendet, wenn alle Felder ausgefüllt sind, sondern die Änderung jedes Datensatzes wird direkt an die Anwendung übertragen. Der Nutzer kann die Kurse löschen oder die Titel einzelner Kurse direkt ändern.

Jeder Submit-Button hat ein individuelles name-Attribut, mit dem die Anwendung auf dem Server den Datensatz identifiziert.

formaction in button- oder input type=submit

Das Submit-Feld hat mit HTML5 ein weiteres neues Attribut formaction. Zuvor hat das action-Attribut des form-Elements bestimmt, welche Anwendung beim Absenden des Formular angesprochen wird. Das formaction-Attribut des submit-Buttons enthält die URL der Anwendung auf dem Server und leitet die Formulardaten weiter.

<input type="text" name="vorname" placeholder="Ihr Vorname">
<input type="text" name="nachname" placeholder="Ihr Nachname">
<button type="submit" formaction="check.php">Eingaben prüfen</button>
<button type="submit" formaction="send.php">Senden</button>

IE ab Version 11, alle modernen Browser (Firefox ab Version 50, Chrome seit Version 49, Safari ab Version 10, mobile Browser in den aktuellen Versionen).