HTML5 Formulare mit mehreren Submit-Buttons

In manchen Situationen hegt man den Wunsch, dass ein Formular mehrere „Ausgänge“ hat, also mehrere Submit-Buttons. Je nachdem, welche dieser Schaltflächen ein Anwender anklickt, werden unterschiedliche URL-Adressen mit unterschiedlichen Formular-Verarbeitungsscripts aufgerufen.

<form>
  <p>
    <label>E-Mail-Adresse eines Newsletter-Abonnenten:</label><br>
    <input type="email" name="mail" size="40">
  </p>
  <input type="submit" value="Ändern" formaction="/scripts/updateAbo.php" formmethod="post"> 
  <input type="submit" value="Löschen" formaction="/scripts/deleteAbo.php" formmethod="post"> 
</form>

Das Formular im Beispiel könnte so in einer Verwaltungsanwendung für Newsletter-Abonennten vorkommen. Der Anwender wird aufgefordert, die E-Mail-Adresse eines gewünschten Newsletter-Abonennten einzugeben. Dann soll er eine der Schaltflächen „Ändern“ oder „Löschen“ anklicken, um wahlweise die Daten des Abonennten zu ändern oder das Abo zu entfernen.

Das einleitende <form>-Tag enthält in diesem Beispiel gar keine sonst typischen Angaben wie „action“ oder „method“. Stattdessen enthält das Formular zwei Schaltflächen zum Absenden des Formulars (<input type=“submit“>). Die eine ist mit „Ändern“ beschriftet, die andere mit „Löschen“. Beide Schaltflächen erhalten die zusätzlichen Attribute formaction und formmethod. Diese Attribute entsprechen in ihrer Bedeutung genau den Attributen action bzw. methodim <form>-Tag, mit dem Unterschied, dass jeder Submit-Button eigene und unterschiedliche formaction- und formmethod-Attribute mit unterschiedlichen Werten haben kann.

Auch für die übrigen Attribute im <form>-Tag gibt es diese Entsprechungen in Submit-Buttons:

  • formaction entspricht action und bestimmt die URL-Adresse, die beim Absenden des Formulars aufgerufen werden soll
  • formmethod entspricht method und bestimmt die Übertragungsmethode (in der Regel entweder get oder post)
  • formenctype entspricht enctype und definiert den Kodierungstyp der Formulardaten (application/x-www-form-urlencoded, multipart/form-data oder text/plain)
  • formtarget entspricht target und definiert das Zielfenster bzw. den Ziel-Browsing-Context der Formulardaten
  • formnovalidate entspricht novalidate und ist ein Standalone-Attribut ohne Wertzuweisung. Wenn notiert, werden die Feldinhalte vor dem Absenden nicht auf gültige Eingaben hin überprüft