Een voorbeeld van een formulier:

Naam: Email: Geslacht: Man Vrouw Geen idee Bericht: Hier je bericht ...

Je kunt met HTML niet zo heel veel met een formulier. Hooguit een mailtje sturen. Als je na HTML ook nog andere web-talen gaat leren, dan kan je er o.a. berichten mee naar een database verzenden (denk aan een gastenboek / forum). Ook kun je dan bijvoorbeeld een webshop maken en gegevens van de klant opslaan.

Maargoed.. Wij kunnen alleen mailtjes verzenden. Ik zal stap voor stap uitleggen hoe je een mail formulier in elkaar zet.

<FORM method="POST" name="formulier" action="mailto:jouwemail@adres.nl" enctype="text/plain">     Hier het formulier </FORM>

Door de form-tag geven we aan dat we een formulier gaan maken. We gebruiken de attributen:

method:
Deze geef je met een mail formulier de waarde "post".

name:
Hier kan je je formulier een naam geven naar keuze.

action:
Net als bij een link kan je "mailto:" met een mail adres erachter invullen. Dit geeft aan dat er daar een mailtje heen gestuurd moet worden.

enctype:
enctype="text/plain" zet je neer om ervoor te zorgen dat de email die wordt verzonden, leesbaar is.

Naam: <INPUT type="text" name="naam" size="40" maxlength="25">

Hierboven staat beschreven hoe we het tekstvlak maken die in het formulier achter "naam" staat.

We gebruiken de attributen:

type:
Deze geef je de waarde "text". Hiermee geven we in dit geval aan dat het om een "tekstvlak" gaat.

name:
Hiermee geef je je input een naam.

size:
Hiermee bepaal je de breedte van je tekstvlak.

maxlength:
Hiermee bepaal je hoeveel tekens er maximaal ingevult mogen worden. We hebben bij de input "naam", een maxlength van 25, omdat een naam (volgens mij) nooit langer is als 25 tekens.

Je kan op deze manier ook een tekstvlak voor "email" maken, dan verander je gewoon het attribuut "name".

Geslacht:<BR> <INPUT type="radio" name="geslacht" value="man"> Man<BR> <INPUT type="radio" name="geslacht" value="vrouw"> Vrouw<BR> <INPUT type="radio" name="geslacht" value="geen idee" checked> Geen idee<BR>

Als je type de waarde "radio" geef, geef je aan dat je een radio button wilt maken. Met een radio button, is er maximaal één mogelijkheid.

Met value geef je aan wat de waarde is van de input. Dit kun je ook voor een tekstvlak gebruiken. Als je bij een tekstvlak value="Naam" intypt, dan staat er in je tekstvlak "Naam". Probeer het zelf eens en kijk wat ik bedoel.

Bericht:<BR> <TEXTAREA name="bericht" rows="7" cols="50">Hier je tekst ...</TEXTAREA>

Met textarea maak je het veld om je bericht te typen. Je geeft hem een naam (d.m.v. name) en bepaald de hoogte en breedte door rows en cols. De waarde achter rows, is het aantal regels die in de textarea passen, zonder dat er een scrollbar in hoeft te komen. Met cols bepaal je hoeveel letters er naast elkaar passen in het vlak.

<INPUT type="submit" name="verzend" value="Verzend">

Je geeft het attribuut "type" de waarde "submit" om een submit knop te maken. Net als bij de reset-/opnieuw button geef je d.m.v. value aan welke tekst er op de knop staat.

<INPUT type="reset" name="opnieuw" value="Opnieuw">

Om een "Opnieuw" button te maken, maak je een input tag en geef je type de waarde "reset". D.m.v. value bepaal je welke tekst er op de knop staat. Als je op deze knop drukt, worden alle velden tussen de form tags hersteld.

Het hele formulier wordt dus ongeveer zo:

<FORM method="POST" name="formulier" action="mailto:jouwemail@adres.nl" enctype="text/plain"> Naam: <INPUT type="text" name="naam" size="40" maxlength="25"><BR> Email: <INPUT type="text" name="email" size="40" maxlength="50"><BR><BR> Geslacht:<BR> <INPUT type="radio" name="geslacht" value="man"> Man<BR> <INPUT type="radio" name="geslacht" value="vrouw"> Vrouw<BR> <INPUT type="radio" name="geslacht" value="geen idee" checked> Geen idee<BR><BR> Bericht:<BR> <TEXTAREA name="bericht" rows="7" cols="50">Hier je tekst ...</TEXTAREA><BR><BR> <INPUT type="submit" name="verzend" value="Verzend"> <INPUT type="reset" name="opnieuw" value="Opnieuw"> </FORM>

Verder heb je nog checkboxen:

Welke boodschappen heb ik nodig ?<BR> <INPUT type="checkbox" name="koffie" value="Ik heb koffie nodig!"> Koffie<BR> <INPUT type="checkbox" name="thee" value="Ik heb thee nodig!"> Thee<BR> <INPUT type="checkbox" name="koekjes" value="Ik heb koekjes nodig!"> Koekjes

Resultaat:

Welke boodschappen heb ik nodig ? Koffie Thee Koekjes

Een checkbox en een radio button zijn dus bijna hetzelfde. Het verschil is dat er met een radio button maar één mogelijkheid is, en bij een checkbox meerdere. Je geeft radio buttons dezelfde naam omdat dit een groep is, maar je geeft checkboxen allemaal een eigen naam.


Selectielijst:

Hoe oud ben jij?<BR> <SELECT name="leeftijd">     <OPTION value="jonger dan 10 jaar">Jonger dan 10 jaar</OPTION>     <OPTION value="10 tot 25 jaar" selected>10 tot 25 jaar</OPTION>     <OPTION value="25 tot 50 jaar">25 tot 50 jaar</OPTION>     <OPTION value="50 tot 65 jaar">50 tot 65 jaar</OPTION>     <OPTION value="65 +">65 jaar of ouder</OPTION> </SELECT>

Resultaat:

Hoe oud ben jij? Jonger dan 10 jaar 10 tot 25 jaar 25 tot 50 jaar 50 tot 65 jaar 65 jaar of ouder

D.m.v. <SELECT> en <OPTION> maak je een selectielijst. Je geef select een attribuut "name" en option het attribuut "value". Er is maar één mogelijke keuze.
Door "selected" in de option tag te plaatsen, staat deze mogelijkheid geselecteerd.

Index

Hoofdstuk 1 - Hoofdstuk 2 - Hoofdstuk 3 - Hoofdstuk 4
Hoofdstuk 5 - Hoofdstuk 6 - Hoofdstuk 7 - Hoofdstuk 8
Hoofdstuk 9 - Hoofdstuk 10

Wat vind je van deze pagina? 79% Je moet ingelogd zijn om te kunnen stemmen!