Wat betekent het attribuut type met de waarde submit in HTML?

Het attribuut type="submit" in het HTML-element <button> of <input> bepaalt dat dit element bedoeld is om het formulier te verzenden. Door op de knop met dit attribuut te klikken, verzamelt de browser de gegevens van alle elementen in het formulier waarin de knop is opgenomen en stuurt deze naar de URL die is opgegeven in het action-attribuut van de <form>-tag (of naar de huidige URL als action niet is opgegeven).

Hoe werkt het:

• Binnen <form>: De knop met type="submit" wordt automatisch gekoppeld aan het dichtstbijzijnde ouderformulier. Klikken hierop start het standaardproces van formulierverzending via de HTTP-methode die is opgegeven in het method-attribuut (standaard GET).
• Buiten <form>: Een knop met type="submit" buiten een formulier heeft geen automatische verzendfunctie. Het kan worden gebruikt met JavaScript om het formulier handmatig te verzenden of andere acties uit te voeren.

Voorbeeld van gebruik:

<form action="/submit-handler" method="POST">
  <label for="username">Gebruikersnaam:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Wachtwoord:</label>
  <input type="password" id="password" name="password"><br><br>

  <button type="submit">Verzend formulier</button>
</form>

In dit voorbeeld, wanneer op de knop "Verzend formulier" wordt geklikt, zal de browser de gegevens van de velden username en password verzenden naar de URL /submit-handler met de POST-methode.

Vergelijking met type="button":

Attribuut	Doel	Automatisch formulier verzenden	Gebruik met JS
type="submit"	Formulier verzenden	Ja	Ja
type="button"	Willekeurige knop, niet gekoppeld aan verzending	Nee	Ja