Les 9: Formulier maken

Met een formulier kan informatie worden ingevoerd en verzonden door een bezoeker van je website. Denk bijvoorbeeld aan de voor- en achternaam, het e-mailadres en adresgegevens. Formulieren worden gebruikt voor allerlei doeleinden, zoals het aanmelden voor een nieuwsbrief of forum, het plaatsen van een bestelling of als contactformulier. In deze les bekijken we hoe je een formulier kunt maken in HTML.

De <form> tag

Als je een formulier wilt opnemen in een pagina dan begin je met de <form> tag. Met deze tag vertel je de browser dat er een formulier volgt en geef je aan wat er met de gegevens in het formulier moet gebeuren. In de voorbeelden op deze pagina sturen we de ingevoerde gegevens naar een e-mailadres. Er zijn echter ook veel scripts waarmee je formulieren vaak een stuk beter kunt verwerken. Voor websites waar je zulke scripts kunt vinden, verwijs ik je naar de pagina met PHP scripts.

De begintag van een formulier is:

<form method="post" action="mailto:jouwemail@adres.nl">

In de code plaats je je eigen e-mailadres direct achter mailto: in de code, dus zonder een spatie ertussen. Met method="post" geven we de manier aan waarop de data moet worden verzonden. Als we klaar zijn met het maken van het formulier dan sluiten we altijd weer af met de eindtag </form>.

<input> voor tekstvelden

Met de <input> tag kunnen we een tekstveld maken in een formulier. Bijvoorbeeld:

Vul je voornaam in:

De code die we hiervoor gebruiken is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Vul je voornaam in:</em>
<input type="text" size="20" maxlength="40" name="voornaam">
</form>

Als je het veld met je muisknop activeert dan kun je er in typen. De <input> tag heeft de volgende attributen:

• type: geeft aan wat voor soort input er volgt. Mogelijke waarden zijn bijvoorbeeld: text, submit, en radio.
• size: de breedte van het veld. Gemeten wordt in spaties.
• maxlength: het maximum aantal karakters dat ingevoerd mag worden in het veld.
• name: hiermee geef je het veld een naam, zodat er later naar verwezen kan worden.

In het voorbeeld hierboven gebruikten we een tekstveld (type="text") met een breedte van 20 en een maximum aantal karakters van 40. We gaven het veld de naam "voornaam" in het name attribuut.

Het formulier verzenden

Nu moet een bezoeker het formulier nog kunnen verzenden naar ons e-mailadres. Dit doen we door een submit knop toe te voegen. Doorgaans plaats je deze knop aan het einde van de code van het formulier. Om de verzendknop te maken, voegen we type="submit" toe aan een nieuwe <input> tag. Met het value attribuut geef je de tekst aan die op de knop moet komen, bijvoorbeeld "Verzenden" of "Versturen". De code voor de verzendknop wordt als volgt:

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

Nu voegen we de verzendknop toe aan het formulier met het tekstveld dat we hierboven gemaakt hebben:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Vul je voornaam in:</em> <input type="text" size="20" maxlength="40" name="voornaam"><br>
<input type="submit" value="Verzenden">
</form>

Het resultaat ziet er als volgt uit:

Vul je voornaam in:

<textarea> voor grotere teksten

Als we bezoekers een grotere tekst willen laten invoeren dan kunnen we hiervoor de <textarea> tag gebruiken. Dit kan bijvoorbeeld nuttig zijn als we een bezoeker om commentaar vragen of we hem/haar een vraag willen laten stellen. Een voorbeeld van een textarea:

Opmerkingen:

Met behulp van de attributen rows en cols geven we aan uit hoeveel rijen (de hoogte) en kolommen (de breedte) het tekstvak zal bestaan. Het bovenstaande tekstvak bestaat uit 7 rijen en 25 kolommen en heeft de naam "opmerkingen" gekregen:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Opmerkingen:</em><br>
<textarea rows="7" cols="25" name="opmerkingen"></textarea>
<input type="submit" value="Verzenden">
</form>

De <textarea> tag moet afgesloten worden met de eindtag: </textarea>. Voor de <input> tag is dit niet noodzakelijk.

Radio button

Met een radio button kunnen we een bezoeker een antwoord laten selecteren uit meerdere mogelijkheden. Je bent deze radio buttons ongetwijfeld wel eens tegengekomen op andere websites. Ze worden bijvoorbeeld vaak gebruikt voor een poll of een quiz.

In de code gebruiken we de volgende attributen:

• type: nu kiezen we voor een radio button en daarom vullen we hier radio in.
• name: hiermee geven we aan welke radio buttons bij elkaar horen.
• value: geeft de informatie aan die zal worden verzonden als de bezoeker deze radio button selecteert.

Een voorbeeld van het gebruik van radio buttons:

Wat voor kleur ogen heb je?
Blauw Bruin Grijs Groen
Draag je een bril?
Ja Nee

De code voor deze twee sets radio buttons is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat voor kleur ogen heb je?</em><br>
<input type="radio" name="oogkleur" value="blauw">Blauw
<input type="radio" name="oogkleur" value="bruin">Bruin
<input type="radio" name="oogkleur" value="grijs">Grijs
<input type="radio" name="oogkleur" value="groen">Groen<br>
<em>Draag je een bril?</em><br>
<input type="radio" name="bril" value="welbril">Ja
<input type="radio" name="bril" value="geenbril">Nee<br>
<input type="submit" value="Verzenden">
</form>

Checkbox

De checkbox lijkt op de radio button, maar de check box geeft de bezoeker de mogelijkheid om meerdere opties te selecteren. Verder gebruik je de name en value attributen op dezelfde wijze:

Wat zijn je favoriete soorten muziek?
Pop Rock House Hip Hop

De HTML code voor deze checkboxes is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat zijn je favoriete soorten muziek?</em><br>
<input type="checkbox" name="muzieksoort" value="Pop" checked>Pop
<input type="checkbox" name="muzieksoort" value="Rock">Rock
<input type="checkbox" name="muzieksoort" value="House">House
<input type="checkbox" name="muzieksoort" value="Hip Hop">Hip Hop<br>
<input type="submit" value="Verzenden">
</form>

Valt je iets op in dit voorbeeld? Bij deze checkbox staat al een standaardkeuze aangevinkt. In het vakje voor "Pop" staat al een vinkje. Dit zie je in de code terug: value="Pop" checked. "Checked" geeft aan dat een optie standaard geselecteerd moet worden. Dit kan handig zijn om te gebruiken als je weet dat een groot deel van je bezoekers een bepaalde optie zullen aanvinken. Je kunt checked op dezelfde wijze gebruiken voor de radio buttons.

Drop down list

Een drop down list is een andere manier waarop bezoekers een optie kunnen selecteren. In een drop down lijst gebruiken we de <select> en <option> tags. Zo'n lijst ziet er bijvoorbeeld zo uit:

Welke film uit deze lijst vind je het beste?
The Godfather Pulp Fiction The Shawshank Redemption Raiders of the Lost Ark Spartacus

De HTML code:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Welke film uit deze lijst vind je het beste?</em><br>
<select name="film">
<option>The Godfather</option>
<option>Pulp Fiction</option>
<option>The Shawshank Redemption</option>
<option>Raiders of the Lost Ark</option>
<option>Spartacus</option>
</select>
<input type="submit" value="Verzenden">
</form>

Een lijst met meerdere keuzemogelijkheden

We kunnen ook een lijst maken waarin meerdere mogelijkheden geselecteerd kunnen worden door de bezoekers. We maken daarvoor gebruik van het multiple attribuut. Met het attribuut size kunnen we bepalen hoeveel keuzemogelijkheden er getoond worden voordat de bezoeker moet scrollen in de lijst. Door selected toe te voegen aan een <option> tag kunnen we een standaardkeuze selecteren.

Hier is een voorbeeld van een lijst met meerdere keuzemogelijkheden:

Selecteer je favoriete drankjes:
Bier Wijn Cola Sinas Vruchtensap Wodka IJsthee

Zoals je ziet worden er vier opties in beeld getoond en wordt "Bier" als een standaardkeuze geselecteerd. Je kunt in de lijst meerdere opties selecteren door de control toest ingedrukt te houden.

De HTML code voor de bovenstaande lijst is:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Selecteer je favoriete drankjes:</em><br>
<select multiple name="drankjes" size="4">
<option value="bier" selected>Bier</option>
<option value="wijn">Wijn</option>
<option value="cola">Cola</option>
<option value="sinas">Sinas</option>
<option value="vruchtensap">Vruchtensap</option>
<option value="wodka">Wodka</option>
<option value="ijsthee">IJsthee</option>
</select>
<input type="submit" value="Verzenden">
</form>

Einde les negen en einde van de HTML Cursus

In deze les bekeken we hoe je met formulieren kunt werken. Er is nog wel meer te zeggen over formulieren, maar de basis is in dit artikel wel behandeld.

Hiermee zijn we ook aan het einde gekomen van de HTML cursus.
Ik hoop dat je wat aan deze lessen gehad hebt. Met de informatie uit deze cursus kun je zelf een eigen site maken en publiceren. Tijdens het werken aan je site zul je steeds meer dingen leren en zal het gebruik van HTML code naar verloop van tijd steeds makkelijker voor je worden. Ik wens je veel succes en plezier bij het maken van je site!

Lees ook onze XHTML Cursus. XHTML is een strengere en schonere code dan HTML. Je kunt XHTML vrij gemakkelijk leren, want er zijn maar een paar verschillen met HTML.

Als je uitgebreidere informatie over HTML wilt hebben en graag alles rustig wilt kunnen teruglezen dan is het een goed idee om een boek over HTML te kopen. Een uitgebreide selectie kun je vinden via onze Boeken Shop: Klik Hier voor Boeken over HTML!

Homepage-Maken Tip