Verzend- en reset-knop met (input of button)

In HTML kan je op twee manieren een knop maken: met input en button.

Met <input type="submit"> maak je een knop om een formulier te verzenden.

Met <input type="reset"> maak je een knop die het formulier terugzet naar de oorspronkelijke waarden (leeg of standaardwaarden).

De tekst die op de knop moet komen wordt opgegeven bij het value attribuut.

Knoppen maken kan op twee manieren

Onderstaande voorbeelden geven hetzelfde resultaat. Merk op dat je bij input de tekst die op de knop moet komen moet vermelden bij value.

<form>
    <label for="voornaam">Voornaam:</label>
    <input type="text" id="voornaam" name="naam">
    <button type="submit">Verzenden</button>
    <button type="reset">Reset</button>
</form>

<form>
    <label for="voornaam">Voornaam:</label>
    <input type="text" id="voornaam" name="naam">
    <input type="submit" value="Verzenden">
    <input type="reset" value="Reset">
</form>

Afbeelding als knop

Voorbeeld: img_button.html (Klik op deze link om onderstaand formulier te zien in je browser.)

   <form action="https://www.example.com" method="post">
       <input type="image" src="vliegtuig.png" alt="Ga naar website" width="150">
   </form>

type="image" maakt van de afbeelding een submit-knop. Bij klikken wordt het formulier verzonden. alt is belangrijk voor toegankelijkheid. De afbeelding vervangt een tekst op de submit-knop.

Samenvatting