07. formulieren

Formulieren zijn een zeer belangrijk onderdeel van elke moderne website. Het is de manier waarop je data kan invoeren in de website die dan verwerkt kan worden. Het meest gekende formulier is waarschijnlijk de zoekbalk in het midden van de Google homepage.

structuur

We maken een formulier aan met het <form> element. Binnen in dit element kunnen we dan de inputvelden gaan plaatsen. Het <form> element heeft 2 belangrijke attributen namelijk action en method . Het action attribuut bevat de URL waar de informatie in de form naartoe wordt gezonden, het method attribuut bepaald de manier waarop deze informatie wordt verzonden (GET of POST). Als je de action en method attributen niet invult, staan ze standaard op GET naar het adres van de pagina. Het effectief verzenden van formulieren valt buiten deze cursus.

<form action="https://www.example.com" method="GET">
    <p>Hier komen de input elementen</p>
</form>

meer info: https://www.w3schools.com/html/html_forms.asp

input elementen

Er zijn verscheidene soorten input-elementen voorzien in HTML5. Alle input-elementen maken gebruik van het name attribuut. Dit attribuut geeft aan wat de naam is van de waarde die wordt ingevoerd.

meer info: https://www.w3schools.com/html/html_form_input_types.asp

<input>

Het <input> element wordt gebruikt om verschillende soorten invoer te voorzien. Je geeft aan welk soort invoer je wenst met het type attribuut. vb: <input type="text" name="username">

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test

tekst

tekstveld

Het text type creëert een tekstveld waar de gebruiker tekst kan invullen. Je kan hier ook de size en maxlength attributen gebruiken om aan te geven hoe groot het tekstveld moet zijn en hoe lang de ingegeven tekst mag zijn.

<form action="https://www.example.com" method="GET">
    <input type="text" name="username" size="20" maxlength="30">
</form>

wachtwoord

Dit type dient om wachtwoorden in te voeren. De ingetypte karakters zullen dus niet op het scherm verschijnen. De attributen zijn identiek aan die van het tekstveld.

<form action="https://www.example.com" method="GET">
    <label for="username">Username:</label>
    <input type="text" name="username" size="20" maxlength="30">
    <label for="password">Password:</label>
    <input type="password" name="password" size="20">
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_password

e-mail

Met het type "email" wordt aan de gebruiker een e-mailadres gevraagd.

<form action="https://www.example.com" method="GET">
    <label for="email">e-mail:</label>
    <input type="email" name="email">
</form>

URL

Met het type "url" kan de gebruiker om een URL gevraagd worden.

<form action="https://www.example.com" method="GET">
    <label for="website">website:</label>
    <input type="url" name="website">
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_url

tekstgebied

Met het <textarea> element kan je een veld invoegen waar de gebruiker meerdere lijnen tekst in kan invoeren.

<form action="https://www.example.com" method="GET">
    <textarea name="comments"  cols="30" rows="10">Enter your comments</textarea>
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

keuzerondje

Het keuzerondje type="radio" gaat het mogelijk maken om een optie te selecteren. Je koppelt meerdere opties om tussen te selecteren aan elkaar door ze hetzelfde name attribuut mee te geven. De gebruiker kan slechts 1 van de aan elkaar gekoppelde opties tegelijkertijd selecteren. Wil je dat de gebruiker meerdere opties tegelijkertijd kan selecteren gebruik dan een selectievak.

Het attribuut checked kan in het element geplaatst worden om aan te duiden dat deze optie moet aangevinkt zijn bij het laden van de pagina.

<form action="https://www.example.com" method="GET">
    <input type="radio" name="sport" value="lopen" checked>lopen<br>
    <input type="radio" name="sport" value="fietsen">fietsen<br>
    <input type="radio" name="sport" value="zwemmen">zwemmen<br>
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

selectievak

Het selectievak wordt gebruikt als de gebruiker 1 of meerdere dingen moet kunnen aanvinken. Selectievakken mogen een verschillende naam hebben aangezien ze niet met elkaar in verbinding staan zoals de keuzerondjes. Je hebt hier ook het checked attribuut om al één of meerdere selecties te maken bij het laden van de pagina.

<form action="https://www.example.com" method="GET">
    <input type="checkbox" name="spotify" id="spotify" checked>Spotify<br>
    <input type="checkbox" name="itunes" id="itunes" checked>iTunes<br>
    <input type="checkbox" name="youtube" id="youtube">Youtube<br>
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox

keuzelijst

Het <select> element creëert een keuzelijst. Hier kan de gebruiker een item uit de lijst selecteren. Om items aan de selectie toe te voegen gebruik je het <option> element. Aan dit <option> element moet je het value attribuut toevoegen, deze value wordt dan meegezonden indien de optie geselecteerd werd.

<form action="https://www.example.com" method="GET">
    <select name="devices">
        <option value="ipod">iPod</option>
        <option value="radio">radio</option>
        <option value="computer">computer</option>
    </select>
</form>

meerdere opties

Het <select> element heeft het multiple attribuut. Dit is een keuzelijst waarbij de gebruiker meerdere opties kan selecteren door op de ctrl-toets (pc) of cmd-toets (mac) te blijven duwen terwijl hij de opties aanklikt. Met het size attribuut kan je aangeven hoeveel opties je tegelijkertijd aan de gebruiker wil tonen.

<form action="https://www.example.com" method="GET">
    <select name="instruments" multiple>
        <option value="guitar" selected>Guitar</option>
        <option value="drums">Drums</option>
        <option value="bass">Bass</option>
    </select>
</form>

datum

Met <input type="date"> kan je de gebruiker om een datum vragen.

<form action="https://www.example.com" method="GET">
    <label for="birthDate">Geboortedatum:</label>
    <input type="date" name="geboortedatum" id="birthDate">
</form>

file

Het type file van input laat gebruikers toe een bestand te uploaden.

<form action="https://www.example.com" method="GET">
    <input type="file" name="fav-song">
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_file

submit-knop

De submit-knop staat de gebruiker toe om alle ingevulde informatie in te dienen. Als deze knop wordt ingedrukt zal de informatie in het formulier worden verzonden naar de pagina aangegeven in het action attribuut van het <form> element.

<form action="https://www.example.com" method="GET">
    <input type="submit" value="Upload">
</form>

afbeeldingsknop

We hebben ook een invoerveld van het type image ter beschikking om een afbeelding als knop te gebruiken. Deze input heeft ook het src attribuut nodig om de locatie van de afbeelding aan te geven. Alsook zijn de height en width attributen beschikbaar om de grootte van de afbeelding in te stellen.

<form action="https://www.example.com" method="GET">
    <input type="image" src="images/subscribe.svg" width="100" height="20">
</form>

knoppen

Met het <button> element kunnen we een knop op het scherm plaatsen waar de gebruiker op kan klikken. Het type attribuut kan gebruikt worden om het gedrag van de knop in te stellen. Er zijn 3 mogelijke waarden:

1. "button" - De gebruiker kan op de knop klikken.

2. "submit" - De knop wordt gebruikt als verzendknop.

3. "reset" - De knop dient als resetknop voor het formulier.

<form action="https://www.example.com" method="GET">
    <button type="button">testKnop</button>
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_type

verborgen invoer

Het <input type="hidden"> element staat toe om een verborgen waarde aan het formulier toe te voegen. Deze waarde kan info bevatten over de pagina waarop het formulier staat.

schuifbalk

Het <input type="range"> element definieert een besturingselement voor het invoeren van een getal waarvan de exacte waarde niet belangrijk is (zoals een schuifregelaar).

Het standaardbereik is 0 tot 100 en met de onderstaande kenmerken kunnen beperkingen ingesteld worden waarbij getallen geaccepteerd worden.

• max: specificeert de maximaal toegestane waarde

• min: specificeert de minimaal toegestane waarde

• step: specificeert de wettelijke nummerintervallen

• value: specificeert de standaardwaarde

<form action="https://www.example.com" method="GET">
  <label for="vol">Volume (tussen 0 en 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit">
</form>

zoekveld

Het <input type="search"> element zorgt voor een zoekbalk. Sommige browsers voorzien een kruisje in een searchbar zodat input kan worden weggehaald. Met het placeholder attribuut kan een voorlopige tekst worden ingesteld. Deze verdwijnt van zodra de gebruiker zelf tekst wil ingeven.

<form action="https://www.example.com" method="GET">
    <input type="search" name="searchTerm" id="searchInput" placeholder="Zoek...">
</form>

meer info over search

placeholder

Het placeholder-attribuut specificeert een korte hint die de verwachte waarde van een invoerveld beschrijft (bijvoorbeeld een voorbeeldwaarde of een korte beschrijving van het verwachte formaat). De tekst wordt weergegeven in het invoerveld voordat de gebruiker een waarde invoert. De placeholder werkt bij de volgende invoertypen: tekst, zoeken, url, tel, e-mail en wachtwoord.

<form action="https://www.example.com" method="GET">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit">
</form> 

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_placeholder

labels

Met het <label> element kunnen er labels aan invoervelden worden toegewezen. Dit kan op basis van het id attribuut van het inputveld. Het id-attribuut van het te labelen invoerelement wordt in het for attribuut geplaatst.

<form action="https://www.example.com" method="GET">
    <label for="unTxt">Username:</label>
    <input type="text" name="username" size="15" maxlength="30" id="unTxt"><br>
    <label for="pswdTxt">Password:</label>
    <input type="password" name="password" size="15" id="pswdTxt">
</form>

groeperen

Het <fieldset> element maakt het mogelijk om bepaalde inputelementen te groeperen. Er kan ook een titel aan een groep elementen worden gegeven door een <legend> element binnen het <fieldset> element te plaatsen.

<form action="https://www.example.com" method="GET">
    <fieldset>
        <legend>select your favorites</legend>
        <input type="checkbox" name="spotify">Spotify<br>
        <input type="checkbox" name="itunes">iTunes<br>            
        <input type="checkbox" name="youtube">Youtube
    </fieldset>
</form>

try it yourself: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

invoervalidatie

HTML5 biedt de mogelijkheid om de browser (beperkte) invoervalidatie te laten doen. De browser maakt hiervoor gebruik van het attributen die bij het element geplaatst worden.

verplichte invoer

Hiervoor wordt het required attribuut gebruikt. Dit attribuut kan zonder waarde worden gebruikt.

<input type="text" name="username" required>

attribute-selector (css)

Het is mogelijk om HTML-elementen op te maken die specifieke attributen of attribute-waarden hebben. De [attribute]selector wordt gebruikt om elementen met een gespecificeerd attribuut te selecteren (text, radio, email, date,...).

input[type="text"] {
background-color: yellow;}

input[type="radio"] {
display: block;}

input[type="button"] {
width: 20%; margin-left: 5%;}

input[type="email"] {
width: 40em;}

meer info: https://www.w3schools.com/css/css_attribute_selectors.asp

oefening formulieren

oefening met HTML-formulier