Een HTML-formulier wordt gebruikt om gegevens, die de gebruiker invult, te versturen.

Alle code voor het formulier komt tussen de <form>-tag en de eindtag </form>. Deze tag moet twee attributen bevatten:

• action: URL waarnaar de gegevens moeten verstuurd worden (verzendbestemming)
• method: stelt in wat er met die gegevens moet gebeuren. Er zijn twee mogelijkheden voor de HTTP-aanvraagmethode: GET of POST. Met GET worden gegevens opgehaald via de URL en getoond in een webpagina. Met POST worden de gegevens naar de URL verstuurd en veroorzaken ze een verandering op de webserver.

Om effectief gegevens te kunnen invullen wordt gebruik gemaakt van invoervelden (<input>). Om aan te geven wat er moet ingevuld worden gebruik je labels (<label>). Er zijn veel soorten invoervelden. Het attribuut type bepaalt in dit onderstaand voorbeeld dat er text moet worden ingegeven (zie verder voor meer mogelijkheden).

Sommige formuliervelden krijgen een unieke identificatie met behulp van een id attribuut. Het for attribuut van het label moet verwijzen naar de id van het bijhorende input tag.

Het attribuut name is de naam van het invoerveld die mee verstuurd zal worden.

Een formulier bevat altijd een indienknop (submit) waarmee je de gegevens ook verstuurt. Deze voeg je toe met een <button type="submit">-tag.

Webserver voorbeeld

Dit is een voorbeeld van een eenvoudig HTML-formulier dat zoekopdrachten naar Google kan verzenden met een indienknop:

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

<form action="https://www.google.com/search" method="GET">
    <label for="zoekterm">Zoekterm:</label>
    <input id="zoekterm" type="text" name="q">
    <button type="submit">Zoeken</button>
</form>

Dit formulier heeft een enkel tekstveld met een label en een verzendknop. Wanneer de gebruiker het formulier verzendt, wordt de zoekopdracht verstuurd naar de zoekpagina van Google (https://www.google.com/search) en worden de resultaten weergegeven in een nieuwe pagina. Het tekstveld heeft de naam q, wat de afgesproken naam is voor zoekopdrachten op Google. De URL van de zoekopdracht met als tekst wordt https://www.google.com/search?q=ugent (zie afbeelding). Test je eens wat er verandert als je de method aanpast naar POST?

Samenvatting

Label koppelen aan input-tag

Het for attribuut van het label moet verwijzen naar de id van het bijhorende input tag. De waarden van beide attributen moeten dus hetzelfde zijn (zie voorbeeld). Let op, een id moet uniek zijn in het HTML-document en moet starten met een letter. Als je klikt op het label in de browser en het invoerveld wordt geactiveerd, dan weet je dat ze correct gekoppeld zijn aan elkaar.

<label for="vnaam">Voornaam:</label>
<input type="text" id="vnaam">