Gelegentlich kann es bei der Erstellung von HTML-Formularen nötig sein, mehrere Buttons innerhalb eines Formulares zu verwenden. Legt man ein Formular mit diversen Feldern und Buttons an, dann stößt man auf das Problem, dass mit dem Klick auf jeden Button die Seite neu geladen wird und das Formular bereits übermittelt wird.

Formularbeispiel mit normalen Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="DE">
   <head>
     <meta charset="utf-8" />
     <title>Formular</title>
   </head>
   <body>
     <form>
         Straße<br>
         <input type="text" name="straße"><br>
         Ort:<br>
         <input type="text" name="Ort">
         <button>Adresse prüfen</button>
         <button>Übermitteln</button>
     </form>
    </body>
</html>

Unser Ziel ist es aber eigentlich nur einen Übermittlungs-Button zu haben und mit den anderen Buttons zum Beispiel JavaScript Funktionen auszuführen.
Um dies zu erreichen müssen zwei wichtige Bedingungen erfüllt sein:

  • Jeder Button muss eine einzigartige id erhalten
  • Jedem Button muss ein type zugeordnet werden

Als type verwenden wir für alle Buttons welche wir nicht zur Formularübermittlung nutzen wollen button. Für unseren Übermittlungsbutton verwenden wir submit.

Formularbeispiel mit definierten Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="DE">
   <head>
     <meta charset="utf-8" />
     <title>Formular</title>
   </head>
   <body>
     <form>
         Straße<br>
         <input type="text" name="straße"><br>
         Ort:<br>
         <input type="text" name="Ort">
 
         <!--
         Buttons erhalten eine id und einen type um das Problem zu lösen
         -->
         <button id="chk_button" type="button" onclick='alert("Adresse ok!");'>Adresse prüfen</button> 
         <button id="sbm_button" type="submit">Übermitteln</button>
     </form>
    </body>
</html>

Mit dem zweiten Codebeispiel ist es nun möglich in einem Formular mehrere Buttons zu nutzen.
Die Ursache das normalerweise ein Button das Formular übermittelt liegt in der Standarddefinition für Buttons. Diese erhalten immer als Standardwert type=“submit“.