Als je een website maakt, wil je natuurlijk dat bezoekers jou kunnen bereiken. Daarom kun je 2 dingen doen: Een contactformulier maken of een link om jou te mailen. Het makkelijkst is een link om jou te mailen. Hiervoor gebruik je: <a href="mailto:naam@domein.com>Mail mij!</a>. Let wel op dat je emailadres direct achter mailto: komt, dus zonder spatie ertussen. Je krijgt dat dit resultaat: Mail mij! Door op die link te klikken wordt het mailprograma geopend met jouw emailadres bij het vakje "aan:". Zo kunnen bezoekers je mailen.
De 2e mogelijkheid is het maken van een contactformulier. Hiervoor heb je wel een ingewikkelde HTML-code nodig. Ik zal je dat precies uitleggen. Het nadeel is, dat het uiteindelijk wel met mailto verzonden moet worden. Het kan op een andere manier, maar niet alle HTML-editors ondersteunen die methode.
Je begint een contactformulier altijd met <form method="post" action="mailto:naam@domein.com"> en je eindigt met </form>. Deze manier gaat via mailto. Als je dat niet wilt, doe je: <form method="post" action="http://www.domein.com/cgi-bin/MailForm.html">. Bij www.domein.com vul je je eigen domeinnaam in. Dit werkt niet altijd!!!
Op deze manier kun je nog niets van het formulier zien. Daarom komen ertussenin de <input> tags. Deze hoef je niet te sluiten.
De eerste, meestgebruikte vorm in een contactformulier is een tekstbalkje. Eerst typ je wat bezoekers moeten invullen: <em>Vul hier je voornaam in:</em><br>. Dan typ je: <input type="text" size="[...]" maxlength="[...]" name="[...]">. Type is de soort veld. In dit geval een tekstveld. Size is de lengte van het veld. Bijvoorbeeld 15. Maxlength is het maximaal aantal tekens die in dat veld mogen komen, bijvoorbeeld 30. Als je hier geen limiet op wilt zetten laat je maxlength gewoon weg. Name is de "naam" van het veld. Als het formulier wordt verzonden kun je velden herkennen aan wat je bij name hebt gezet. Hier zet je bijvoorbeeld: voornaam. Als je wilt dat bezoekers dit veld verplicht in moeten vullen, zet je er nog bij: required="true". Je krijgt dan dit resultaat:
Je kunt ook een groot vak maken voor heel veel tekst. Hiervoor doe je: <em>Je bericht:</em><br><textarea rows="[...]" cols="[...]" name="bericht">. Bij rows zet je het aantal rijen en bij cols het aantal kolommen, bijvoorbeeld 10. Je krijgt dan dit: .
Je begint een contactformulier altijd met <form method="post" action="mailto:naam@domein.com"> en je eindigt met </form>. Deze manier gaat via mailto. Als je dat niet wilt, doe je: <form method="post" action="http://www.domein.com/cgi-bin/MailForm.html">. Bij www.domein.com vul je je eigen domeinnaam in. Dit werkt niet altijd!!!
Op deze manier kun je nog niets van het formulier zien. Daarom komen ertussenin de <input> tags. Deze hoef je niet te sluiten.
De eerste, meestgebruikte vorm in een contactformulier is een tekstbalkje. Eerst typ je wat bezoekers moeten invullen: <em>Vul hier je voornaam in:</em><br>. Dan typ je: <input type="text" size="[...]" maxlength="[...]" name="[...]">. Type is de soort veld. In dit geval een tekstveld. Size is de lengte van het veld. Bijvoorbeeld 15. Maxlength is het maximaal aantal tekens die in dat veld mogen komen, bijvoorbeeld 30. Als je hier geen limiet op wilt zetten laat je maxlength gewoon weg. Name is de "naam" van het veld. Als het formulier wordt verzonden kun je velden herkennen aan wat je bij name hebt gezet. Hier zet je bijvoorbeeld: voornaam. Als je wilt dat bezoekers dit veld verplicht in moeten vullen, zet je er nog bij: required="true". Je krijgt dan dit resultaat:
Je kunt ook een groot vak maken voor heel veel tekst. Hiervoor doe je: <em>Je bericht:</em><br><textarea rows="[...]" cols="[...]" name="bericht">. Bij rows zet je het aantal rijen en bij cols het aantal kolommen, bijvoorbeeld 10. Je krijgt dan dit: .
Verder kun je nog meerkeuze velden maken. De eerste is radio buttons. Dat zijn een aantal vakjes waarvan je er 1 moet selecteren. Gebruik hiervoor: <form method="post" action="mailto:naam@domein.com"><em>Hoe oud ben je?</em><br><input type="radio" name="leeftijd" value="0-11">0-11<br><input type="radio" name="leeftijd" value="12-18">12-18<br><input type="radio" name="leeftijd" value="19-44">19-44<br><input type="radio" name="leeftijd" value="45-64">45-64<br><input type="radio" name="leeftijd" value="65 of ouder">65 of ouder</form>. Je krijgt dan dit resultaat:
Je kunt ook instellen dat er meerdere vakjes te selecteren zijn. Gebruik dan als type "checkbox". Je krijgt dan dit:
Piep1
Piep2
Piep3
Verder kun je nog dropdown lijsten maken. Doe dan: <form method="post" action="mailto:naam@domein.com"><select name="Piep"><option value="piep1">piep1</option><option value="piep2">piep2</option><option value="piep3">piep3</option><option value="piep4">piep4</option><select></form>. Je krijgt dan het volgende:
Je kunt ook dropdown lijsten maken waar je meerdere vakjes kunt selecteren. Doen dan bij de select tag niet <select name="piep"> maar <select multiple name="piep">.
Verder kun je bezoekers wachtwoorden laten invullen. Doe dan ...<input type="password" ...>... (bij ... komen de andere dingen die ik je eerder al heb geleerd.). Die ziet er zo uit: Als allerlaatste moet je natuurlijk een verzend button invoegen. Daarvoor doe je <input type="submit" value="Verzenden">. Die ziet er als volgt uit:
Als extraatje kun je ook nog een reset knop invoegen. Dan zijn alle velden leeg. Doe dan: <input type="reset" value="reset">. Probeer maar:
Je kunt ook instellen dat er meerdere vakjes te selecteren zijn. Gebruik dan als type "checkbox". Je krijgt dan dit:
Piep1
Piep2
Piep3
Verder kun je nog dropdown lijsten maken. Doe dan: <form method="post" action="mailto:naam@domein.com"><select name="Piep"><option value="piep1">piep1</option><option value="piep2">piep2</option><option value="piep3">piep3</option><option value="piep4">piep4</option><select></form>. Je krijgt dan het volgende:
Je kunt ook dropdown lijsten maken waar je meerdere vakjes kunt selecteren. Doen dan bij de select tag niet <select name="piep"> maar <select multiple name="piep">.
Verder kun je bezoekers wachtwoorden laten invullen. Doe dan ...<input type="password" ...>... (bij ... komen de andere dingen die ik je eerder al heb geleerd.). Die ziet er zo uit: Als allerlaatste moet je natuurlijk een verzend button invoegen. Daarvoor doe je <input type="submit" value="Verzenden">. Die ziet er als volgt uit:
Als extraatje kun je ook nog een reset knop invoegen. Dan zijn alle velden leeg. Doe dan: <input type="reset" value="reset">. Probeer maar: