Formulieren zijn de reden waarom HTML ook een succes werd bij bedrijven. Met formulieren kan je namelijk zorgen voor interactie. De gebruiker kan namelijk informatie invullen en die naar de server sturen om er iets mee te doen. Zo kan je bijvoorbeeld die informatie opslaan in een databank of emailen naar een email adres. Dat wordt in dit hoofdstuk niet uitgelegd, omdat daarvoor een scriptingtaal zoals PHP of ASP gebruikt moet worden. Wat HTML wel kan, is het maken van het formulier. Hoe je een formulier kan maken wordt helemaal uitgelegd in dit hoofdstuk.

FORM en INPUT elementen

Elk formulier zit in een FORM element die altijd twee standaard attributen heeft:

1. het action attribuut;
2. en het method attribuut.

Het action attribuut vertelt de browser waar de informatie die wordt ingevult door de gebruiker heen moet als hij/zij klaar is met invullen. Op die pagina kan dan wat met die informatie gedaan worden. Dat kan je overigens niet met HTML instellen. Met HTML kan je hooguit vertellen waarheen de informatie moet en hoe. Om in te stellen hoe de informatie verzonden moet worden gebruiken we het method attribuut. Hierin zet je welke HTTP methode gebruikt moet worden. Het beste is om gewoon POST te gebruiken, dus daar hoef je je niet zoveel zorgen over te maken. Hier volgt een voorbeeld van een FORM:

<form action="email.php" method="POST">
 <!-- De elementen die jouw formulier gaan voorstellen -->
</form>

Zoals je ziet in het commentaar van het voorbeeld moeten er in FORM nog andere elementen komen. Een voorbeeld daarvan is INPUT en is waarschijnlijk het meest gebruikte. Een INPUT element kan er als volgt uit zien:

INPUT wordt altijd, zoals je waarschijnlijk uit eigen ervaring al weet, gebruikt voor kleine tekstjes, meestal maar een paar woorden. Een naam of een adres is hiervan een voorbeeld. Maar INPUT is niet altijd alleen maar een tekst veld. Het INPUT element heeft namelijk 10 functies. De functie van INPUT wordt gegeven in het type attribuut. Er zijn dus 10 verschillende waarden voor type:

text

Deze zorgt ervoor dat de INPUT een tekst veld wordt, net zoals de INPUT uit het voorbeeld.

password

Net zoals het vorige type is dit veld bedoeld voor tekst maar alleen voor tekst dat wordt gebruikt als wachtwoord. Alle karakter wat je in dit type velden typt wordt meestal weergegeven met bijvoorbeeld het * karakter zodat het getypte wachtwoord niet kan worden afgekeken door iemand die ook naar het scherm kijkt.

checkbox

Dit type maakt van een INPUT een checkbox die je aan of uit kan vinken.

radio

Een "radio knop" is ongeveer hetzelfde als een checkbox alleen komt een radio knop nooit in z'n eentje voor maar altijd in een groep die over hetzelfde gaan. In zo'n groep is er altijd één die is aangevinkt. Wordt een andere aangevinkt, dan wordt de radio knop die was aangevinkt uitgevinkt. Dit kan bijvoorbeeld gebruikt worden bij vragen waar je maar één antwoord op kan geven (zoals het geslacht). Hiervoor worden dus twee radio knoppen gebruikt die bij elkaar horen. Je geeft aan dat deze twee radio knoppen bij elkaar horen dmv het name attribuut. De beide radio knoppen horen dezelfde waarde te hebben in dit attribuut (bijvoorbeeld geslacht).

submit

Dit type maakt een knop die de gegevens van alle INPUT doorstuurt naar de pagina die is aangegeven in het action attribuut van FORM zodat die pagina dmv een scripting taal (dus niet HTML, want dat is een markup taal) de gegevens kan gebruiken. De waarde van het value attribuut wordt gebruikt als de tekst die op de knop komt te staan.

image

Dit type maakt ook een submit knop, alleen gebruikt deze knop een plaatje ipv tekst op de knop. De locatie van het plaatje wordt aangegeven, net zoals bij het IMG element, met het src attribuut. Natuurlijk is er dan ook een alt attribuut nodig die gebruikt wordt als om één of andere rede het plaatje niet kan worden gebruikt.

reset

Net zoals het vorige type maakt dit type een knop, alleen wordt de inhoud van alle formulier elementen "gereset" als je erop klikt. Dat wil zeggen dat ze worden teruggezet naar hun orginele inhoud zoals ze waren toen de pagina werd geopend.

button

Dit is ook een knop. Het enige verschil met de vorige 3 knoppen is dat er niks gebeurt met de pagina of met de gegevens als je er op klikt. Dit kan je zien als een nadeel, maar het voordeel van deze knop is dat je met bijvoorbeeld Javascript (een scripting taal) een effect kan creëren.

file

Hiermee kan je een bestand selecteren op je eigen computer zodat je die kan uploaden (sturen) naar de website waar je op dat moment bent.

hidden

Zoals de naam van dit type al aangeeft is deze altijd verborgen. Hierin kan informatie worden verzonden die niet relevant is voor de gebruiker om te zien.

Elke INPUT hoort een name attribuut te hebben zodat die door de scripting taal geïdentificeert kan worden. Een value hoeft niet altijd aanwezig te zijn behalve bij een checkbox of radio knop. Deze geeft de waarde van het INPUT element aan. Bij knoppen (behalve image) wordt dit attribuut gebruikt voor de tekst die op de knop komt.

In de HTML ziet een INPUT er meestal zo uit:

<input type="" name="naam" value="Waarde">

De waarde van het type attribuut hangt natuurlijk af van welke van de 10 soorten INPUT je wilt. Het name attribuut geeft, zoals eerder beschreven, de naam van het INPUT element aan die gebruikt kan worden in de scripting taal. En als laatste zien we het value attribuut die aangeeft wat de waarde van de INPUT is. Als het type text is, dan komt de waarde van de value attribuut in het tekst veld. Is het type submit dan komt de waarde van value, zoals eerder vermeld, op de knop.

Het TEXTAREA element

TEXTAREA kan je zien als de grote broer van INPUT met het type text. TEXTAREA stelt de gebruiker namelijk in staat om grote teksten te typen in het formulier. Erg handig als je benieuwd bent naar een menig e.d. TEXTAREA ziet er meestal ongeveer zo uit:

Dit is een TEXTAREA

TEXTAREA heeft altijd de rows en cols attributen. rows geeft aan hoeveel regels het veld moet hebben. cols geeft het aantal kolommen aan. Daarnaast is het ook wel handig om, net zoals bij INPUT, TEXTAREA een name attribuut te geven zodat de TEXTAREA gebruikt kan worden in de scripting taal van de pagina waar het action attribuut van FORM naar wijst.

De inhoud van de TEXTAREA komt niet zoals bij INPUT in het value attribuut, maar tussen de start en eind tag in, zoals hier:

<textarea cols="50" rows="5">Dit komt in de TEXTAREA</textarea>

De SELECT, OPTGROUP en OPTION elementen

Soms heb je een vraag waar maar één antwoord op gegeven kan worden en waarvan je de mogelijke antwoorden al van tevoren weet (zoals de vraag wat jouw geslacht is). Je kan dan kiezen om voor elk mogelijke antwoord een radio button met een bijbehorende label, of om alle mogelijke antwoorden in een "drop-down menu" te doen zodat de gebruiker daaruit kan kiezen. Vooral als er veel antwoorden mogelijk zijn is dat een stuk handiger.

Zo'n drop-down menu kan er zo uit zien:

Windows XP Windows 2000 Windows Me Windows 98 Windows 95 Other Version Mac OS Mac OSX Other Version Debian Gentoo Knoppix Mandriva Red Hat Slackware Ubuntu Other Version

Een drop-down menu bestaat altijd uit een SELECT met daarin meerdere OPTION elementen. SELECT geeft aan dat het een drop-down menu is en de OPTIONs geven de kiesbare keuzes weer. Voor elke optie die gekozen kan worden gebruiken we dus een OPTION element. De inhoud van het OPTION element (dus de tekst tussen de start en eind tag) is de tekst die als optie wordt weergegeven.

Bij een groot aantal OPTIONs kan het misschien makkelijk zijn om ze te groeperen. Dit kan gedaan worden met het OPTGROUP element. Zoals je ziet in het drop-down menu hierboven zijn alle Operating System versies of distributies geordend naar OS (Operating System). Elke OS heeft dus zijn eigen OPTGROUP met elk een label attribuut. In dat attribuut staat de tekst die wordt weergegeven voor elke OPTGROUP. In het geval van de drop-down menu hierboven zijn de waarden van de label attributen Windows, Macintosh en Linux. In elke OPTGROUP komen dan alle OPTION elementen die bij die groep horen.

De HTML code van de bovenstaande drop-down menu ziet er ongeveer zo uit:

<select name="select_test">
 <optgroup label="Windows">
  <option>Windows XP</option>
  <!-- De overige Windows versies -->
 </optgroup>

 <optgroup label="Macintosh">
  <option>Mac OS</option>
  <option>Mac OSX</option>
  <option>Other Version</option>
 </optgroup>

 <optgroup label="Linux">
  <option>Debian</option>
  <!-- De overige Linux distributies -->
 </optgroup>
</select>

Zoals je ziet heeft ook de SELECT element een name attribuut. Dit voor dezelfde rede als waarvoor INPUT deze attribuut gebruikt: zodat het keuze van het drop-down menu door de scripting taal bekeken kan worden.

Het LABEL element

Een label is meestal een kleine regel tekst die in verbinding staat met een formulier element. Een checkbox of radio knop moet altijd een label hebben zoals hieronder:

Deze tekst is een label

Zoals je misschien al had gemerkt kan je ook op de label klikken om de checkbox aan te vinken. Dit is vooral handig voor mensen die nog niet zo handig zijn met de muis, maar je zal merken dat je het zelf ook een stuk handiger vindt dan op zo'n kleine checkbox te klikken. Natuurlijk kan je een label ook gebruiken voor elke andere type van INPUT.

Er zijn twee manieren om aan te geven bij welke INPUT de label hoort:

1. Je kan de INPUT en LABEL elementen apart houden. De voorwaarde is dan wel dat je de INPUT een id attribuut moet geven en dezelfde waarde van dat attribuut in het for attribuut van LABEL doen, zoals hier:

   <input type="radio" id="test" name="test" value="1"><label for="test">Dit is een label</label>

2. Of je kan de INPUT in het LABEL element doen samen met de tekst die de label wordt. Zoals hier:

   <label><input type="checkbox" name="test" value="1"> Dit is een label</label>

Het is aangeraden om het voorlopig bij manier 1 te houden. Manier 2 wordt namelijk niet door Internet Explorer ondersteund, dus werkt de label niet voor een groot deel van je bezoekers.

De FIELDSET en LEGEND elementen

Het FIELDSET element wordt gebruikt om formulier elementen te groeperen naar onderwerp. LEGEND wordt gebruikt als titel van de FIELDSET.

Het onderverdelen van je formulier d.m.v. FIELDSET kan erg handig zijn bij lange formulieren. Zo krijgen de gebruikers een makkelijk overzicht van de vragen. Een voorbeeld is bijvoorbeeld op een website van een huisarts. Daar kan gevraagt worden naar:

• persoonlijke gegevens;
• symptomen;
• en huidige medicatie.

Per onderdeel kan een FIELDSET worden gemaakt met daarin vragen over dat onderwerp.

Een voorbeeld

Na al deze verschillende elementen en attributen die allemaal gebruikt kunnen worden in een formulier is het te begrijpen dat het allemaal een beetje verwarrend kan worden. Daarom is hieronder een simpel voorbeeld formulier voor een huisarts gemaakt met daaronder de HTML code ervan, zodat elk formulier goed bestudeert kan worden.

Persoonlijke Gegevens

Uw voornaam:

Uw achternaam:

Symptomen

Hoofdpijn

Draaierig

Niezen

Gebruikt u medicijnen?

Ja

Nee

Zo ja, vul dan aub hier uw huidige medicatie in:

Verzenden

<form action="#voorbeeld" method="post">
 <fieldset>
  <legend>Persoonlijke Gegevens</legend>
  <p><label for="vnaam">Uw voornaam:</label><br>
  <input name="vnaam" id="vnaam" type="text"></p>

  <p><label for="anaam">Uw achternaam:</label><br>
  <input name="anaam" id="anaam" type="text"></p>
 </fieldset>

 <fieldset>
  <legend>Symptomen</legend>
  <p><input name="hpijn" id="form-hoofdpijn" type="checkbox">
  <label for="form-hoofdpijn">Hoofdpijn</label></p>

  <p><input name="draaierig" id="form-draaierig" type="checkbox">
  <label for="form-draaierig">Draaierig</label></p>

  <p><input name="niezen" id="form-niezen" type="checkbox">
  <label for="form-niezen">Niezen</label></p>
 </fieldset>

 <fieldset>
  <legend>Gebruikt u medicijnen?</legend>
  <p><input name="gebruiken" value="1" id="form-ja" type="radio">
  <label for="form-ja">Ja</label></p>

  <p><input name="gebruiken" value="0" id="form-nee" type="radio">
  <label for="form-nee">Nee</label></p>

  <p><label for="form-bericht">Zo ja, vul dan aub hier uw huidige medicatie
  in:</label><br>
  <textarea cols="50" rows="5" id="form-bericht"></textarea></p>
 </fieldset>

 <p><button type="submit">Verzenden</button></p>
</form>

Zoals je ziet hebben we gekozen voor het BUTTON element i.p.v. van INPUT met het type submit als knop om de informatie te verzenden. Dit hebben we gedaan omdat je dan makkelijker de knop kan opmaken zonder dat de andere formulier elementen ook veranderen. Maar let wel: als je het BUTTON element wilt gebruiken om informatie te versturen, dan moet de waarde van het type element submit zijn, zoals in het voorbeeld.

Nu we formulieren hebben gehad, laten we nu eens gaan kijken naar tabellen »