CSS, HTML und Javascript mit {stil}

input / button type="submit"

Submit

Der Submit-Button ist das finale Element eines Formulars: Der Klick übermittelt das Formular 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.

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

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

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="Nähkurs für Fortgeschrittene">
<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-Tags bestimmt, welche Anwendung beim Absenden des Formular angesprochen wird. Das formaction-Attribut des submit-Buttons leitet die Formulardaten zu spezielle Anwendungen.

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