Hoe gaat u een HTML-formulier maken?

Om een HTML-formulier te maken, gebruik ik het <form>-element. Hierin komen besturingselementen zoals tekstvelden (<input type="text">), wachtwoordvelden (<input type="password">), selectievakjes (<input type="checkbox">), radioknoppen (<input type="radio">), dropdown-lijsten (<select> en <option>), tekstgebieden (<textarea>) en verzendknoppen (<button type="submit"> of <input type="submit">).

Elk formulieronderdeel krijgt een name-attribuut voor identificatie aan de serverzijde en meestal een id-attribuut om het te koppelen aan een <label>.

Attributen van <form>:

action: URL waar de formuliergegevens naartoe worden gestuurd bij verzending.
method: HTTP-methode voor het verzenden van gegevens (GET of POST).
enctype: Type codering van gegevens bij verzending (bijvoorbeeld multipart/form-data voor bestand uploaden).

Voorbeeld van een eenvoudig formulier:

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

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

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Onthoud mij</label><br><br>

  <label for="country">Land:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusland</option>
    <option value="us">VS</option>
  </select><br><br>

  <label for="message">Bericht:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Verzenden</button>
</form>

Validatie van het formulier kan zowel aan de clientzijde (met HTML5-validatieattributen, JavaScript) als aan de serverzijde worden geïmplementeerd.

HTML5-validatieattributen:

required: Verplicht veld.
minlength, maxlength: Minimale en maximale lengte van tekstvelden.
min, max: Minimale en maximale waarde voor numerieke velden.
type met verschillende waarden (email, url, number, date, etc.) voor automatische validatie door de browser.
pattern: Reguliere expressie voor invoervalidatie.

Voorbeeld met HTML5-validatie:

<form action="/submit-form" method="post">
  <label for="email">E-mail:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Leeftijd (van 18 tot 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Postcode (5 cijfers):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Verzenden</button>
</form>

Voor het stylen van het formulier wordt CSS gebruikt. Voor complexere logica of asynchrone verzending van gegevens wordt JavaScript toegepast. Om de toegankelijkheid van het formulier te verbeteren, worden geschikte ARIA-attributen en een correcte HTML-structuur gebruikt.