In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

Je begint met het openen van je formulier, dit kan bijvoorbeeld met de volgende code:

<form method="get" action="mailto:info@test.nl" />

Hier heb je je formulier geopend. Je begint met METHOD="GET". Vervolgens gebruik je ACTION. Hierbij kun je twee dingen invoeren. Indien je een PHP bestand hebt, voer je de link in. Dit hebben wij nog niet, dus voeren wij een MAILTO link in.

Na je formulier geopend te hebben, heb je natuurlijk ook een daadwerkelijk formulier nodig. Hierbij kun je alle opmaaktechnieken gebruiken die in de vorige lessen zijn behandeld. Ook moet je een tekstvak kunnen aangeven. Dit kun je doen met onderstaande code:

<input type="text" name="Naam" size="30" maxlength="20" />

Je begint met INPUT, om aan te geven dat er een tekstvak aankomt. Type gebruik je om aan te geven wat voor vak het is. In dit geval kan er dus tekst worden ingevuld. NAME gebruik je om er een naam aan te geven. Dit is noodzakelijk bij het verzenden van je formulier. Ook gebruik je nog SIZE, om te grootte van je vak op te geven. Als laatste krijg je MAXLENGTH, om een maximum aantal tekens op te geven.

TIP: Om een overzichtelijk formulier te krijgen, is het handig om een tabel te gebruiken!

De code met opmaak kan er dan zo uit komen te zien:

<p><font size="5"><b>Persoonsgegevens:</b></font></p>
<table>
<tr><td><b>Naam:</b></td><td><input type="text" name="naam" size="30" maxlength="20" /></td></tr>
<tr><td><b>Adres:</b></td><td><input type="text" name="adres" size="30" maxlength="30" /></td><td><b>Huisnummer:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
<tr><td><b>Plaatsnaam:</b></td><td><input type="text" name="plaatsnaam" size="30" maxlength="30" /></td><td><b>Postcode:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
</table>

Tot slot heb je nog een knop nodig om alles te verzenden. Wat vaak ook nog wel van pas kan komen is een knop om alles leeg te maken. Hieronder zie je daar de code voor:

<input type="submit" value="Verzenden"> <input type="reset" value="Opnieuw" />

Hierin gebruik je dus onder TYPE: SUBMIT en/of RESET. Te waarde die je geeft aan VALUE geeft de tekst aan die op de knop komt te staan.

Als je dat allemaal hebt gedaan, hoef je enkel nog het formulier af te sluiten. Dit doe je simpel met:

</form>

Nu hebben we alles besproken. Als je hebt meegedaan, zal je nu onderstaande code hebben:

<form method="get" action="mailto:info@test.nl" />
<p><font size="5"><b>Persoonsgegevens:</b></font></p>
<table>
<tr><td><b>Naam:</b></td><td><input type="text" name="naam" size="30" maxlength="20" /></td></tr>
<tr><td><b>Adres:</b></td><td><input type="text" name="adres" size="30" maxlength="30" /></td><td><b>Huisnummer:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
<tr><td><b>Plaatsnaam:</b></td><td><input type="text" name="plaatsnaam" size="30" maxlength="30" /></td><td><b>Postcode:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
</table>
<input type="submit" value="Verzenden"> <input type="reset" value="Opnieuw" />
</form>

Gefeliciteerd, je hebt nu je eerste formulier geschreven! Als je dit bestand opent in je browser, zal je ongeveer onderstaand resultaat krijgen: