- Kleurcodes
- Editors
- Webbrowsers
- Webhosting
- Website uploaden
- Website promotie
- Stel je vraag (forum)
- (Geen registratie nodig)
Les 4
Formulieren.
TweetenEen contact formulier op de website kan erg handig zijn voor een binding met de bezoeker. Ook is handig voor in een verder stadium als je met PHP gaat werken. Er zal nu worden uitgelegd welke soorten invoervelden er bestaan.
Maak een nieuwe pagina aan en noem het contact.html. Zet daar het volgende in:
|
Let op vanaf nu gaat de cursus een beetje veranderen. Omdat de broncode groot wordt gaan we vanaf nu alleen de code plaatsen waarmee we mee bezig zijn. Dus nu wordt alleen het formulier weergegeven. Je dient de code te plaatsen tussen <BR> en tussen <CENTER> in de tweede cel van de tweede rij. Hierboven staat in het rood aangegeven waar je de code moet plaatsen. Aan het einde van deze les staat de gehele code weer vermeld.
Een formulier open je met <FORM> en je sluit ook deze weer met </FORM>. Achter <FORM> zet je de methode, dit is in ons geval POST en de actie wat er moet gebeuren. Dit is in ons geval MAILTO:. (ACTION kan ook gebruikt worden om bijvoorbeeld naar een volgende pagina te gaan. Je zet dan de webpagina tussen de haakjes). Je krijgt nu dit:
<FORM METHOD="post" ACTION="mailto:mijnnaam@emailadres.nl">
|
<FORM METHOD="post" ACTION="mailto:mijnnaam@emailadres.nl"> </FORM> |
In de FORM zet je de invoervelden. Er bestaan verschillende soorten invoervelden zoals de input, het wachtwoord, een checkbox, een keuzerondje en een uitschuiflijst. Omdat we geen wachtwoord nodig hebben bij het contactformulier zullen we deze los neerzetten en niet in de website voegen.
Een invulveld maak je aan met het attribuut INPUT. Hierachter geef je het type aan die er gebruikt moet worden. Een naam geef je met NAME. Eventueel kan je erachter nog een lengte aangeven. TYPE en NAME zijn verplichte onderdelen van de INPUT.
<INPUT TYPE="text" NAME="jouwnaam" SIZE="30">
Dit veld is bedoeld om een naam in te zetten.
|
Naast NAME is er ook nog de VALUE. Hiermee kan je een standaard waarde geven die dan in het invulveld staat. VALUE is handig in combinatie met PHP. Het is dan handig om waarde door te geven die ingevoerd zijn. We gaan nu een invoerveld maken van hetzelfde type als daarnet, maar dan met een VALUE. De waarde zet je tussen haakjes achter VALUE. Het wordt een invoerveld om je e-mail adres in te voeren.
<INPUT TYPE="text" NAME="email" VALUE="@emaildomein.nl" SIZE="30">
De waarde die nu wordt weergegeven is @emaildomein.nl.
|
Als je de code heb ingevoegd in de website dan zie je dat “@emaildomein.nl” wordt weergegeven in het invoerveld.
In het contactformulier gaan we vragen of de persoon een man of een vrouw is. Dit gaan we vragen door middel van keuzerondjes. Dit is de TYPE radio. Met radio kan er 1 keuze worden gedaan. Je kunt dus geen man en vrouw kiezen. We moeten hier dus wel een VALUE gebruiken. De NAME geeft nu aan dat het bij elkaar hoort. De VALUE geeft nu het verschil aan. De code ziet er zo uit:
<INPUT TYPE="radio" NAME="geslacht" VALUE="man">
De radiobuttion ziet er zo uit:
In het script:
|
Met het type radio mogen we maar 1 keuze maken. Maar als je de gebruiker meer keuzes wil laten maken dan kunnen we het type checkbox gebruiken. Met checkbox is het dus mogelijk om meer keuzes te maken. Het gebruik van de checkbox is precies hetzelfde als die van het type radio. Het enige wat veranderd is het type. Het type wordt veranderd in checkbox. Dat ziet er zo uit:
<INPUT TYPE="checkbox" NAME="redencontact" VALUE="klacht">
De code geeft dit weer:
We gaan de checkbox gebruiken in de code om te weten wat de reden is van het contact. Bewerk het script weer zoals je gewend bent.
|
Misschien heb je een keer een uitschuiflijst (drop down lijst) gezien. Deze kan je ook maken met HTML. Als je met een uitschuiflijst gaat werken dan gebruik je geen INPUT meer maar SELECT. Een TYPE hoef je ook niet in te voeren. Je geef eerst aan om wat voor soort formulier je wilt. Dat is bij een uitschuiflijst SELECT. Daarachter zet je de NAME. Je sluit dan de code weer en je begint dan aan de opties. De code gaat er vervolgens zo uit zien:
|
De uitschuiflijst ziet er dan zo uit:
We gaan de code toepassen in het script. We gaan de vraag stellen waar iemand woont. Op websites wordt dan vaak een land gevraagd.
|
Onderaan het contactformulier plaatsen we een invoerveld waarin het bericht kan worden getypt. Met de
<INPUT TYPE="text">
kan er maar 1 regel worden ingevoegd die alleen in de breedte kan worden uitgebreid. Om een groot tekstvak te maken gebruiken we TEXTAREA. Met TEXTAREA kan er bepaald worden hoeveel regels u wilt hebben. Met ROWS kunt u bepalen hoeveel regels u wilt. Met COLS kunt u bepalen hoe groot de breedte mag zijn. De code ziet er zo uit:
<TEXTAREA NAME="bericht" ROWS="8" COLS="40"></TEXTAREA>
De code geeft dit weer:
We voegen de textarea onderaan het contactfomulier:
|
We zijn nu aan het einde gekomen van het contactformulier. We moeten nu nog een knop maken om het formulier te kunnen verzenden. De knop is form gebonden. Er kunnen dus meerdere knoppen op 1 pagina staan. De knop kijkt naar wat er is ingevoerd bij de METHOD en de ACTION bij FORM. De code voor de knop begint weer met INPUT maar het type is nu “submit”. De tekst op de knop wordt bepaald door wat er ingevoerd wordt bij VALUE. De NAME is de unieke naam van de knop. De code ziet er zo uit:
<INPUT TYPE="submit" VALUE="Verzenden" NAME="verzendbericht">
|
Voorbeeld van het formulier:
We zijn nu aan het einde gekomen van de les over formulieren. Er staat nu een grote brok code. Maar je weet nu het onderscheidt tussen de verschillende soorten invoervelden. We hebben nu de functie MAILTO gebruikt. Het nadeel hiervan is dat er als op de knop “Verzenden” wordt gedrukt dat dan het lokale e-mail programma wordt opgestart. Hierbij raak je meestal de ingevoerde gegevens kwijt. Als je de PHP functie MAIL gebruikt kan je met behulp van de mailserver op je hosting goed een contactformulier maken. De kennis van het contactformulier is hierbij nodig.
Hieronder staat de complete code van formulieren.html.
|