# Formulieren

# Gebruikersinvoer

Om een gebruiker de mogelijkheid te geven data in te voeren op een webpagina heb je nood aan allerlei soorten invoervelden. Deze invoervelden behoren tot een formulier. Enkele voorbeelden van invoervelden:

• Tekstvak
• Checkbox
• Keuzerondjes
• Selectielijst
• Kleurenkiezer

De browser toont invoervelden niet altijd op een volledig uniforme manier, maar de functionaliteit blijft gelijk. Je kan later uiteraard de opmaak van de invoervelden via CSS aanpassen.

# <form> element

Alles begint met het blokelement <form>. Dit element vertelt de browser dat een nieuw formulier gemaakt moet worden waarin invoervelden kunnen geplaatst worden. Het form-element neemt twee belangrijke attributen aan:

• action: Het attribuut action vertelt het formulier wat er moet gebeuren wanneer het formulier verzonden (submitted) wordt. Het attribuut zal in de meeste gevallen een andere webpagina als waarde hebben, waarnaar gegevens kunnen verzonden worden. Denk hierbij bijvoorbeeld aan een PHP-pagina die data ontvangt en achteraf verwerkt in een databank.
• method: Het attribuut method is een technisch attribuut dat als waarde de HTTP-methode krijgt waarmee de data moet worden verzonden. De meest voorkomende waardes zijn get en post. De details van de werking van deze methodes vallen buiten het bereik van dit hoofdstuk.
• enctype: Het attribuut enctype bepaalt in welke vorm de gegevens worden verstuurd naar de ontvanger. Je moet de waarde van dit attribuut enkel veranderen wanneer je de gebruiker ook bestanden wil laten uploaden. In dat geval wordt de waarde multipart/form-data.

Een volledige omkadering voor een formulier ziet er dus als volgt uit:

<form action="nieuwe_gebruiker.php" method="post">
    <!-- Invoervelden -->
</form>

Als je de gegevens van het formulier niet wil verzenden naar een andere pagina, om ze bijvoorbeeld via Javascript te verwerken, kan je de action- en method attributen weglaten.

# Invoervelden

Zoals eerder aangehaald zijn er een groot aantal verschillende soorten invoervelden die in een formulier thuishoren. De keuze van het type invoerveld hangt af van het soort gegeven dat je de gebruiker wil laten invoeren.

De meeste invoervelden maken gebruik van het lege, inline element <input>, maar er zijn uitzondering.

# Attribuut: type

Het element <input> op zich doet niet veel, maar door het attribuut type toe te voegen kan je via de waarde kiezen voor het soort invoerveld dat je wil tonen.

Een overzicht van mogelijke waardes:

Een aantal van de bovenstaande invoervelden werken met specifieke attributen of regelgevingen om ze correct te gebruiken. We bespreken een aantal van deze invoervelden van dichterbij in de rest van dit hoofdstuk. Naast het input-element bestaan er ook andere elementen die invoervelden aan de gebruiker tonen, zoals <textarea> en select. Ook deze komen verder in het hoofdstuk aan bod.

<!-- Tekstvak -->
<input type="text">
<!-- Checkbox -->
<input type="checkbox">
<!-- Verzendknop -->
<input type="submit">

# Attribuut: name

Wanneer de gegevens van een formulier verzonden worden krijgt elk invoerelement een naam toegewezen via het attribuut name. Deze naam kan dan door de ontvanger van de gegevens gebruikt worden als referentie naar het invoerveld en de gegevens die erin staan. Zo zou je een invoerveld voor het ingeven van een adres de logische naam "adres" kunnen geven. Let op: dit is geen id; dezelfde naam mag aan meerdere elementen gegeven worden, hoewel dit enkel in specifieke gevallen gegrond is.

<!-- Tekstvak voor invoer voornaam -->
<input type="text" name="voornaam">

# Attribuut: value

De initiële waarde van een invoerveld kan in HTML bepaald worden door ze als waarde te gebruiken voor het value attribuut van het input-element. Zo kan je invoervelden waarvan je verwacht dat de gebruiker ze zelden zal veranderen al een standaardwaarde geven, bv. voor het land van de gebruiker (België) of de eerste cijfers van een telefoonnummer (+32).

<input type="tel" name="telefoon-nummer" value="+32">

# Attribuut: autofocus

Om een invoerveld automatisch de focus te geven, d.w.z. de cursor in het invoerveld te plaatsen, gebruik je het attribuut autofocus. Dit attribuut ontvangt als geldige waardes true of false (waar of niet waar), maar als het attribuut gebruikt wordt zonder waarde (dus gewoon de vermelding autofocus) interpreteert de browser dit als een true-waarde voor het attribuut. Hierdoor wordt de schrijfwijze verkort.

<input type="text" name="voornaam" autofocus>

# Attribuut: disabled

Om een invoerveld onbeschikbaar te maken voor de gebruiker (nog wel zichtbaar) kan je het attribuut disabled gebruiken. Ook dit attribuut ontvangt true of false, met ook de vermelding voldoende om als true-waarde beschouwd te worden.

<input type="text" name="bus-nr" disabled>

# Labels

Een invoerveld kan voorzien worden van een label om de gebruiker te vertellen wat er verwacht wordt als waarde voor het invoerveld. Hiervoor gebruik je het element <label>. Om een label intrinsiek te koppelen aan een invoerveld, wordt het attribuut for gebruikt, met als waarde het id van het invoerveld waar het label bijhoort. Officiële labels voorzien heeft ook extra voordelen: het helpt schermlezers en zoekmachines met het begrijpen van het invoerveld en het zorgt ervoor dat wanneer je klikt (of tikt!) op een label, de cursor automatisch in het gekoppelde invoerveld geplaatst wordt.

<label for="naam">Naam:</label>
<input type="text" id="naam">

# Tekstvelden

De invoervelden die op het scherm worden getoond als tekstvakken (text, email, search, password, tel en url) ondersteunen de volgende gedeelde attributen:

• maxlength: Maximum aantal karakters voor het invoerveld.
• pattern: een reguliere expressie (regex) waaraan de invoer moet voldoen om als valid aangeduidt te worden. Meer informatie over het valideren van formuliervelden volgt in een later hoofdstuk.
• placeholder: tekst die wordt getoond als hint voor het type invoer dat wordt verwacht. Deze tekst verdwijnt wanneer de gebruiker tekst invoert in het invoerveld.

<label for="adres">Adres:</label>
<input type="text" id="adres" maxlength="75" placeholder="Bv. Kerkstraat 4">

# Selectievakjes en rondjes

Selectievakjes (checkbox) en selectierondjes (radio) geven de gebruiker de mogelijkheid te kiezen tussen meerdere opties. Het verschil tussen vakjes en rondjes, is dat de keuze bij rondjes een exclusieve keuze is (maximum één aangevinkt), terwijl bij selectievakjes er geen, meerdere of alle opties aangevinkt kunnen worden. Om vakjes of rondjes te groeperen in groepen moet elk individueel input-element hetzelfde name attribuut hebben.

Het attribuut value wordt op de achtergrond gebruikt als waarde voor het vakje of rondje. Dit is de waarde die wordt verstuurd bij het verzenden van het formulier. Bij een reeks selectierondjes zal de combinatie name en value doorgestuurd worden voor het geselecteerde rondje. Bij een reeks selectievakjes wordt de combinatie name en value meerdere keren opgenomen per aangevinkt vakje.

Verder kan je het attribuut checked gebruiken om een vakje of rondje standaard aan- of uit te vinken. Geldige waardes voor dit attribuut zijn true of false. Voor de waarde true volstaat het om enkel de attribuutnaam checked te gebruiken, zonder waarde.

<h2>Type kamer:</h2>

<input type="radio" id="keuze-enkel" name="kamer" value="enkel" checked>
<label for="keuze-enkel">Enkel</label>

<input type="radio" id="keuze-dubbel" name="kamer" value="dubbel">
<label for="keuze-dubbel">Dubbel</label>

<input type="radio" id="keuze-familie" name="kamer" value="familie">
<label for="keuze-familie">Familie</label>

<h2>Geliefde dieren:</h2>

<input type="checkbox" id="keuze-honden" name="dieren" value="honden">
<label for="keuze-honden">Honden</label><br>

<input type="checkbox" id="keuze-katten" name="dieren" value="katten">
<label for="keuze-katten">Katten</label><br>

<input type="checkbox" id="keuze-vissen" name="dieren" value="vissen">
<label for="keuze-vissen">Vissen</label><br>

<input type="checkbox" id="keuze-hamsters" name="dieren" value="hamsters">
<label for="keuze-hamsters">Hamsters</label>

# Knoppen

Een formulier kan voorzien worden van verschillende knoppen die elk een andere taak binnen het formulier krijgen. De standaardtaken zijn verzenden en leegmaken. Deze twee taken komen als invoerelement overeen met de types submit en reset.

Bij het klikken op een verzendknop worden de gegevens van een formulier verzameld en gestuurd naar het webadres dat staat opgegeven als waarde voor het action attribuut van het formulier. Het verzenden van het formulier zal dus een andere pagina openen (tenzij anders bepaald via Javascript).

Bij het klikken op de knop leegmaken zullen alle invoervelden van het formulier terug worden gezet op de standaardwaarden zoals ze bepaald zijn in de HTML-code.

Om de weergavetekst van een knop van type submit en reset te veranderen gebruik je het value attribuut. Er hoeft dus geen label-element voorzien te worden!

<input type="submit" value="Verzenden">
<input type="reset" value="Leegmaken">

# Bestanden uploaden

Om de gebruiker de mogelijkheid te geven een bestand te uploaden gebruik je file als waarde voor het type-attribuut van een invoerveld. Je hoeft in principe verder niets te doen; het apparaat van de gebruiker (desktop of mobiel) zal zelf de volgende stappen ondernemen om de gebruiker een bestand te laten kiezen voor te uploaden. Het pad naar het gekozen bestand wordt na het kiezen in het value attribuut gestoken.

Een bestand heeft steeds een bepaalde extensie. Denk aan extensies zoals .jpg, .doc, .mp3, enz... Je kan de gebruiker beperken tot het kiezen van een bestand met enkel extensies uit een reeks die je meegeeft aan het input-element via het attribuut accept. Dit attribuut neemt als waarde een lijst van extensies aan, gescheiden door komma's, bv. .jpg, .doc, .mp3.

Door het attribuut multiple toe te voegen (waarde true/false of weglaten) mag de gebruiker meerdere bestanden kiezen.

Denk eraan dat een formulier voorzien moet zijn van het juist enctype voor het uploaden van bestanden!

<form enctype="multipart/form-data" action="ontvanger.php" method="POST">
    <input type="file" name="foto" accept=".jpg, .png" multiple>
</form>

# Grote tekstvakken

Als alternatief voor tekstvelden die als input-element gemaakt worden, kan je ook gebruikmaken van het element <textarea>. Dit element is ook een invoerveld voor tekst, maar met de mogelijkheid om meerdere lijnen tekst in te geven.

Het element <textarea> neemt grotendeels dezelfde attributen aan als input-elementen die een tekstveld maken. Daarnaast is er ondersteuning voor een breedte en hoogte in aantal karaktertekens op te geven, met de attributen cols en rows respectievelijk. Deze afmetingen worden overschreven door afmetingen bepaald in stijlbladen.

<label for="feedback">Feedback:</label><br>
<!-- Tekstvak van 30 karakters breed en 6 lijnen hoog -->
<textarea name="feedback" id="feedback" cols="30" rows="6"></textarea>

<textarea> is geen leeg element en heeft dus een sluitingstag nodig!

# Selectielijsten

Soms wil je een gebruiker de keuze geven uit een reeks van mogelijke opties, zonder hiervoor te grijpen naar selectierondjes of -vakjes. Als alternatief kan je kiezen voor een selectielijst (dropdown list), waar de gebruiker een keuzes voorgeschoteld krijgt na het openklikken van de lijst.

Om een selectielijst te bouwen gebruik je het element <select>. Binnen dit element wordt elke keuze opgenomen als <option> element. Je kan het vergelijken met het principe van een lijst (<ul>, <ol>) en lijstitems (<li>). Elk option-element moet ook het attribuut value bevatten, met als waarde de tekst die wordt doorgegeven bij het versturen van het formulier (zoals bij keuzerondjes en -vakjes).

Je kan de gebruiker toelaten meerdere opties aan te duiden door het attribuut multiple op te nemen in het select-element. Daarnaast kan je een optie op voorhand selecteren door het attribuut selected op te nemen in een option-element.

<label for="kleur">Kleur artikel:</label>
<select name="kleur" id="kleur">
    <option value="rood">Rood</option>
    <option value="blauw" selected>Blauw</option>
    <option value="geel">Geel</option>
    <option value="groen">Groen</option>
</select>

# Optiongroups

Je kan opties in een selectielijst verder onderverdelen in zelfgekozen groepen of categorieën. Hiervoor gebruik je, binnen het select-element, het element <optgroup>. Om de weergavenaam van de groep te veranderen gebruik je het attribuut label binnen het element <optgroup>.

<label for="kleur">Kleur artikel:</label>
<select name="kleur" id="kleur">
    <optgroup label="Voorradig">
        <option value="rood">Rood</option>
        <option value="blauw">Blauw</option>
    </optgroup>
    <optgroup label="Niet voorradig">
        <option value="Geel">Geel</option>
        <option value="Groen">Groen</option>
    </optgroup>
</select>

# Invoervelden groeperen

Om een visuele groepering van invoervelden te maken kan je gebruikmaken van het element <fieldset>. Dit element is een blokelement waarbinnen je één of meerdere invoervelden kan plaatsen. Met het kindelement <legend> geef je de groepering een naam die zichtbaar is op de pagina.

<fieldset>
    <legend>Persoonlijke gegevens</legend>
    <label for="voornaam">Voornaam:</label>
    <input type="text" name="voornaam" id="voornaam">
    <br>
    <label for="familienaam">Familienaam:</label>
    <input type="text" name="familienaam" id="familienaam">
    <br>
    <label for="adres">Adres:</label>
    <input type="text" name="adres" id="adres">
</fieldset>