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 type="submit" 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. Das passiert i.d.R. mit Hilfe von JavaScript im Hintergrund.
formaction in button- oder input type=submit
Das Submit-Element hat ein weiteres Attribut: formaction. Das action-Attribut des form-Elements bestimmt nicht unbedingt, welche Anwendung beim Absenden des Formular angesprochen wird. Das formaction-Attribut des submit-Elements 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).
