HTML Formulieren & interactieve elementen

Tot nu toe heb je geleerd hoe je informatie toont aan bezoekers via teksten, afbeeldingen, lijsten en tabellen. Een statische pagina is prima voor het tonen van je portfolio, maar moderne websites vereisen interactie. Denk aan een klant die een offerte wil aanvragen voor een grafisch ontwerp, het uploaden van een drukbestand, het inschrijven op een nieuwsbrief of een inlogscherm.

In deze les duiken we in HTML-formulieren. Je leert hoe je met het <form> element, diverse <input> types, labels, keuzemenu's en knoppen gebruiksvriendelijke en toegankelijke formulieren opbouwt.

1. De Basis: Het `<form>` element

Elk formulier op een webpagina begint en eindigt met het <form> element. Dit element werkt als een overkoepelende container die alle invoervelden, keuzemenu's en verzendknoppen bij elkaar houdt.

Het <form> element kent twee cruciale attributen:

action: Bepaalt waar de ingevulde gegevens naartoe gestuurd moeten worden wanneer de gebruiker op de verzendknop klikt (bijvoorbeeld een PHP-script of een verwerkingspagina).
method: Bepaalt hoe de gegevens worden verzonden. De twee meest gebruikte methodes zijn:
GET: De gegevens worden zichtbaar achter de URL geplakt (geschikt voor zoekbalken).
POST: De gegevens worden onzichtbaar op de achtergrond meegestuurd (geschikt voor formulieren met gevoelige gegevens of lange teksten).

<!-- Een basis formuliercontainer -->
<form action="verwerk.php" method="POST">
    <!-- Hier komen alle invoervelden -->
</form>

2. Labels en Toegankelijkheid (`<label>`)

Het <label> element toont de tekstbeschrijving naast of boven een invoerveld, zodat de gebruiker weet wat er verwacht wordt (bijvoorbeeld: "E-mailadres" of "Telefoonnummer").

Waarom is een `<label>` onmisbaar?

Gebruiksgemak: Wanneer je op de tekst van het label klikt, springt de cursor automatisch in het bijbehorende invoerveld. Dit is extra handig op mobiele telefoons met kleine schermen!
Toegankelijkheid: Schermlezers voor visueel beperkten lezen het label voor op het moment dat het invoerveld geselecteerd wordt.

Hoe koppel je een `<label>` aan een invoerveld?

Je koppelt een label aan een invoerveld met het attribuut for op het label. Dit moet exact overeenkomen met het id van het invoerveld:

<!-- Het attribuut 'for' van het label verwijst naar het 'id' van het input-element -->
<label for="voornaam">Voornaam:</label>
<input type="text" id="voornaam" name="voornaam">

Belangrijk: Het id wordt gebruikt voor de koppeling met het label (en CSS/JavaScript). Het name attribuut is verplicht om de gegevens na het verzenden te herkenne op de server!

3. Invoervelden: De veelzijdige `<input>` tag

Het <input> element is een van de meest flexibele tags in HTML. Door het attribuut type te veranderen, verandert het element compleet van vorm en functie.

Hier is een overzicht van de belangrijkste types voor webdesigners:

A. Tekst & Contactgegevens

type="text": Een standaard tekstregel (voor namen, zoekopdrachten, etc.).
type="email": Controleert automatisch of de invoer een geldig e-mailadres is (bevat een @ en domein).
type="password": Maskeert de getypte tekens met bolletjes of sterretjes ter bescherming.
type="tel": Voor telefoonnummers (opent op mobiel automatisch het numerieke toetsenbord).

<label for="user-email">E-mailadres:</label>
<input type="email" id="user-email" name="email" placeholder="naam@voorbeeld.be" required>

Handige extra attributen voor inputs:

* placeholder="...": Aanduidingstekst die verdwijnt zodra je begint te typen.

* required: Maakt het veld verplicht. Het formulier kan niet worden verzonden als dit veld leeg is.

* value="...": Geeft het veld een standaard (vooraf ingevulde) waarde.

B. Keuzes & Bestanden

type="checkbox": Vinkvakje. De gebruiker kan meerdere opties tegelijk selecteren.
type="radio": Keuzerondje. De gebruiker kan slechts één optie binnen een groep kiezen.
type="file": Hiermee kan de bezoeker een bestand (bijv. een PDF-drukbestand of afkortingsafbeelding) uploaden vanaf de computer.
type="color": Opent een interactieve kleurkiezer (color picker).
type="date": Opent een interactieve kalender.

<!-- Radio-buttons (Geef dezelfde 'name' om een groep te maken!) -->
<p>Kies het gewenste papierformaat:</p>

<input type="radio" id="a4" name="formaat" value="A4">
<label for="a4">A4-formaat</label>

<input type="radio" id="a3" name="formaat" value="A3">
<label for="a3">A3-formaat</label>

<!-- Bestand uploaden -->
<label for="ontwerp">Upload je drukbestand (PDF):</label>
<input type="file" id="ontwerp" name="drukbestand" accept=".pdf">

4. Meerdere regels tekst: `<textarea>`

Wanneer je de bezoeker ruimte wilt geven om een langere tekst te typen (zoals een opmerking, projectomschrijving of bericht), is een standaard <input type="text"> te klein. Daarvoor gebruik je het <textarea> element.

In tegenstelling tot een <input> is een <textarea> geen lege tag; het heeft een expliciete sluitingstag </textarea>.

<label for="bericht">Projectomschrijving:</label>
<textarea id="bericht" name="bericht" rows="5" cols="40" placeholder="Beschrijf hier je wensen voor het grafisch ontwerp..."></textarea>

rows: Bepaalt de hoogte van het tekstvak in aantal regelhoogtes.
cols: Bepaalt de breedte van het tekstvak in aantal tekens.

5. Keuzemenu's: `<select>` en `<option>`

Wanneer je veel opties hebt en de pagina niet vol wilt bouwen met radio-buttons, gebruik je een uitklapbaar keuzemenu (drop-down menu).

Dit bouw je op met twee elementen:

<select>: De container voor het keuzemenu.
<option>: Elke individuele keuze binnen het menu.

<label for="type-opdracht">Kies het type grafische dienst:</label>
<select id="type-opdracht" name="dienst">
    <option value="" disabled selected>-- Maak een keuze --</option>
    <option value="logo">Logo & Huisstijl</option>
    <option value="webdesign">Webdesign & UI</option>
    <option value="drukwerk">Drukwerk & Posters</option>
    <option value="illustratie">Digitale Illustratie</option>
</select>

Tip: Het toevoegen van <option value="" disabled selected> zorgt voor een neutrale, niet-selecteerbare instructieregel bovenaan het menu!

6. Het Formulier Verzenden: `<button>`

Om het formulier daadwerkelijk te versturen naar de server, hebben we een actieknop nodig. Gebruik hiervoor het <button> element met het attribuut type="submit".

<!-- Verzendknop -->
<button type="submit">Aanvraag Verzenden</button>

<!-- Optionele wisknop (maakt het hele formulier leeg) -->
<button type="reset">Formulier Wissen</button>

7. Compleet Praktijkvoorbeeld: Offerteaanvraag Grafisch Bureau

Laten we alle elementen samenvoegen tot een realistisch formulier voor een fictief grafisch bureau:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offerte Aanvragen - Studio Grafix</title>
</head>
<body>

    <main>
        <h1>Vraag een vrijblijvende offerte aan</h1>
        <p>Vul het onderstaande formulier in en we nemen binnen 24 uur contact met je op.</p>

        <form action="offerte-verwerken.php" method="POST">
            
            <!-- Persoonlijke gegevens -->
            <section>
                <h2>1. Je Gegevens</h2>
                
                <p>
                    <label for="naam">Volledige naam:</label><br>
                    <input type="text" id="naam" name="klantnaam" placeholder="Jan Jansen" required>
                </p>

                <p>
                    <label for="email">E-mailadres:</label><br>
                    <input type="email" id="email" name="emailadres" placeholder="jan@voorbeeld.be" required>
                </p>
            </section>

            <!-- Projectdetails -->
            <section>
                <h2>2. Projectdetails</h2>

                <p>
                    <label for="dienst">Type Dienst:</label><br>
                    <select id="dienst" name="type_dienst" required>
                        <option value="" disabled selected>Selecteer een dienst...</option>
                        <option value="branding">Huisstijl & Logo</option>
                        <option value="poster">Poster & Drukwerk</option>
                        <option value="website">Website Ontwerp</option>
                    </select>
                </p>

                <p>
                    <label for="deadline">Gewenste opleverdatum:</label><br>
                    <input type="date" id="deadline" name="opleverdatum">
                </p>

                <p>
                    <label for="omschrijving">Beschrijf je project:</label><br>
                    <textarea id="omschrijving" name="project_info" rows="4" placeholder="Geef kort uitleg over je wensen, stijl of doelgroep..."></textarea>
                </p>

                <p>
                    <label for="bestand">Upload eventueel een voorbeeld of briefing (PDF):</label><br>
                    <input type="file" id="bestand" name="briefing_file" accept=".pdf,.png,.jpg">
                </p>
            </section>

            <!-- Extra opties -->
            <section>
                <p>
                    <input type="checkbox" id="voorwaarden" name="akkoord_voorwaarden" required>
                    <label for="voorwaarden">Ik ga akkoord met de algemene voorwaarden.</label>
                </p>
            </section>

            <!-- Knoppen -->
            <p>
                <button type="submit">Verstuur Aanvraag</button>
            </p>

        </form>
    </main>

</body>
</html>

Samenvatting

<form>: Omvat het hele formulier. Bepaal met action de verwerkingslocatie en met method="POST" de verzendmethode.
<label>: Maakt invoervelden toegankelijk. Koppel het for attribuut van het label altijd aan het id van de input!
<input>: Zeer veelzijdig element. Het gedrag verandert op basis van type (text, email, password, checkbox, radio, file, date).
name attribuut: Cruciaal voor elk invoerelement om de ingevulde data op de server te kunnen herkennen.
<textarea>: Voor tekstinvoer van meerdere regels.
<select> & <option>: Om een uitklapbaar keuzemenu te bouwen.
<button type="submit">: Verstuurt de ingevulde gegevens van het formulier.

HTML Formulieren & interactieve elementen

1. De Basis: Het <form> element

2. Labels en Toegankelijkheid (<label>)

Waarom is een <label> onmisbaar?

Hoe koppel je een <label> aan een invoerveld?

3. Invoervelden: De veelzijdige <input> tag