HTML | Formulieren

Formulieren zijn een uitstekende manier om informatie van je bezoekers te verzamelen. Je kunt een formulier gebruiken voor een enquête, maar ook om een contact pagina op te stellen zodat bezoekers gemakkelijk contact met je op kunnen nemen. Ook kun je het formulier element gebruiken om een zoekbox op je website te plaatsen. Samenvattend gebruik je het form element dus om informatie te verzamelen en te versturen.

Soorten formulieren

Er zijn verschillende manieren om data van je bezoekers te verzamelen:

• bezoekers kunnen tekst invoeren, bijvoorbeeld een emailadres of wachtwoord om in te loggen in hun account (denk aan je account van een webshop)
• keuzes maken, bijvoorbeeld wanneer je je registreert voor een emailaccount en je geslacht aangeeft
• submit-knop, bijvoorbeeld de knop "inloggen" op facebook
• bestanden uploaden, bijvoorbeeld wanneer je een foto op twitter wilt plaatsen

Tags

De tags die je gebruikt voor het formulier element zijn:

• form
• input
• textarea
• select
• option

Bovenstaande elementen bestaan uit een openings- en sluitingstag omdat tussen beide tags content geplaatst wordt.

Hieronder volgt een uitleg per tag.

Form

Het formulier element begint met de <form> tag en sluit met de </form> tag. Binnen de form openingstag wordt altijd het action attribuut gebruikt om aan te geven naar welke pagina de ingevoerde informatie verstuurd moet worden. Dit action attribuut is verplicht, anders wordt er niets met de ingevoerde informatie gedaan en is het formulier dus eigenlijk nutteloos.

<form action="http://lacodista.blogspot.com/aanmelden.php">

Volgens bovenstaand voorbeeld wordt de ingevoerde informatie in het formulier doorgestuurd naar de pagina aanmelden.php

Naast het action attribuut, kun je ook nog het method attribuut gebruiken. Het method attribuut vertelt de browser hoe de informatie verstuurd wordt door een keuze te maken tussen de waarde get of post.

Get | de ingevoerde informatie wordt na het verzenden toegevoegd aan het einde van de url die in het action attribuut is ingevoerd. De get waarde gebruik je voor korte formulieren met informatie die niet gevoelig is (zoals de zoekterm die je in een zoekmachine invoert). 

Post | deze waarde wordt gebruikt als het volgende van toepassing is:

• als de ingevoerde informatie in het formulier erg lang is
• wanneer er door de bezoeker een bestand geupload wordt
• wanneer er gevoelige informatie ingevoerd is, bijvoorbeeld een wachtwoord
• wanner er d.m.v. het formulier informatie aan een database wordt toegevoegd (bijv. aanmelding voor een nieuwsbrief), of juist verwijderd (bijv. afmelding van een nieuwsbrief).

Indien er geen method attribuut gespecificeerd wordt, gebruikt de browser automatisch de waarde get.

Als laatste kun je ook het id attribuut toevoegen aan de form openingstag. Dit attribuut wordt gebruikt om het formulier te identificeren en een bepaalde opmaak te geven in je css stylesheet.

Input

De input tag geeft aan wat voor soort informatie door de bezoeker ingevoerd wordt in het formulier:

<input type="text"> | Deze tag creert een veld van 1 regel waar de bezoeker tekst in kan voeren.

<input type="password"> | Deze tag creert een veld van 1 regel waar de bezoeker een wachtwoord in kan voeren.

<input type="radio"> | Deze tag creert een radio button die de bezoeker kan aanklikken om 1 keuze aan te geven.


<input type="checkbox"> | Deze tag creert een checkbox die de bezoeker kan aanklikken om 1 of meerdere keuze(s) aan te geven.

Tip! Bij de checkbox en radio types kun d.m.v. het selected attribuut aangeven dat de radio button of checkbox als default aangevinkt moet staan. Dit ziet er in HTML zo uit: <input type="checkbox" selected> of <input type="radio" selected>

<input type="file"> | Door middel van deze tag kan de bezoeker een bestand uploaden.


<input type="submit"> | Deze tag creert een submit of verzend knop waarmee de ingevoerde informatie de action get of post opvolgt.
Wil je een andere tekst weergeven op de knop, dan kun je hiervoor het value attribuut gebruiken:

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

Textarea

Door middel van de tag <input type="text"> kan de bezoeker een tekstveld van 1 regel vullen met tekst. Wil je dat de bezoeker meer ruimte heeft om tekst in te vullen, bijvoorbeeld door een Opmerkingen: veld aan te bieden? Dan kun je hiervoor beter de <textarea> tag gebruiken.

Select

Door de tag <select> in combinatie met de tag <option> te gebruiken kun je een dropdown-menu aanmaken. Wanneer de bezoeker het formulier verstuurd wordt de waarde van de geselecteerde option meegestuurd, tenzij je een specifieke option d.m.v. het value attribuut hebt aangegeven.

<select>

  <option selected>Keuze 1</option>

  <option>Keuze 2</option>

  <option value="overig">Keuze 3</option>

</select>

Wanneer de bezoeker Keuze 1 heeft geselecteerd in het dropdown-menu, wordt Keuze 1 ook verstuurd als hij/zij op submit klikt. Wanneer de bezoeker Keuze 3 heeft geselecteerd, wordt niet Keuze 3 verstuurd maar "overig" want dit heb je als value aangegeven.

Net zoals bij de radio button en checkbox kun je ook 1 keuze als default aangeven door het attribuut selected in de openingstag te vermelden. Hierboven is dat dus Keuze 1:

Keuze 1 Keuze 2 Keuze 3

Verschil tussen radiobox en dropdown-menu

De radiobox en dropdown-menu geven beide een lijst met keuzemogelijkheden aan de bezoeker, waaruit er maar een optie gekozen kan worden. Wanneer kun je het beste een radiobutton gebruiken? Als het belangrijk is dat de bezoeker alle opties in een oogopslag ziet, of als het een korte lijst met keuzes is. Is de lijst erg lang? Dan is het handiger om een dropdown-menu te gebruiken om je formulier zo kort en overzichtelijk mogelijk te houden. Zeg nou eerlijk, zit jij er op te wachten om een enquête in te vullen met 10 radiobuttons per vraag? ;-)

Het name-attribuut

Je formulier staat en kan ingevuld worden door de bezoekers. Maar de data die hieruit komt moet uiteindelijk ook op een makkelijke manier te verwerken zijn. Op dit moment heb je alle mogelijke antwoorden aangegeven voor de bezoeker, maar de browser weet niet bij welke vraag deze antwoorden horen. Daar is een oplossing voor: gebruik het name attribuut in iedere <input> tag.

<input type="text" name="voornaam" value="Voornaam">

Wanneer de bezoeker Jan invoert, weet je bij het verwerken van de data dat het hier om de voornaam van de bezoeker gaat, want dit heb je d.m.v. het name attribuut aangegeven.

<input type="radio" name="geslacht" value="man">Man</input>

<input type="radio" name="geslacht" value="vrouw">Vrouw</input>

Als de bezoeker de value vrouw heeft aangevinkt, weet je bij het verwerken van de data dat het hier om het geslacht gaat.