8.1: Formulieren

In de les over links is al eens aangegeven hoe je je e-mailadres in een webpagina kan opnemen. Op die manier kunnen we onze bezoekers op eenvoudige wijze in de gelegenheid stellen snel en doeltreffend op onze pagina's, en de daarin aangeboden informatie, te laten reageren. Zo'n e-mail kan dan natuurlijk over van alles en nog wat gaan, maar wat nu als we alleen maar geïnteresseerd zijn in specifieke informatie?
Daartoe zouden we onze bezoekers eigenlijk een soort vragenformulier moeten kunnen voorschotelen, zodanig dat alleen de antwoorden in onze mailbox terecht komen. En dat kan.

Een voorbeeldformulier wordt hieronder afgebeeld inclusief de bijbehorende code. De code wordt onder het voorbeeld nader verklaard.

§ 8.1.1: Het formulier element

Elk formulier begint met het <form> element en eindigt met het </form> element. Een aantal opties dienen direct aan dit element te worden toegevoegd.

De gemakkelijkste oplossing voor de afhandeling van het formulier is de volgende:

We zullen de diverse opties doornemen:

Met 'method' geven we de methode aan volgens welke de gegevens behandeld moeten worden. Er zijn twee mogelijkheden: "get" en "post". Aangezien we de gegevens in onze elektronische mailbus willen ontvangen kiezen we voor method="post". De methode "get" wordt in deze cursus niet besproken.

Met 'action' geven we aan wie de ontvanger van de gegevens is. Maak je een website voor jezelf dan zul jij ook de ontvanger van evt. reacties zijn en zul je hier dus je eigen emailadres in moeten vullen. Bijvoorbeeld: action="mailto:annie@hotmail.com"

Nu we de basis voor een formulier hebben gelegd wordt het tijd om de inhoud te gaan bepalen. Tussen <form> en </form> zijn vrijwel alle html-elementen, die je normaal gebruikt om een pagina op te maken, mogelijk.
Wat in ieder geval belangrijk is zijn de specifieke formulierobjecten die je nu kunt gaan toepassen. Mogelijk zijn onder meer: tekst (type="text"), keuzerondjes (type="radio"), aankruisvakjes (type="checkbox") en keuzemenu's (select) en buttons (type="submit").

Alleen de objecten die voorkomen in het voorbeeldformulier worden besproken. Er wordt van uit gegaan dat je op dit moment reeds zoveel html-kennis vergaard hebt dat je met een blik in de code van bovenstaand formulier een heel eind kunt komen.

§ 8.1.2: Het tekstinvoervak (input type="text")

Een tekstinvoervak maak je als volgt: <input type="text" name="zinvolle naam">. Let er op dat een tekstregel iets anders is dan een tekstgebied. Dit laatste wordt besproken in de textarea.

§ 8.1.3: Keuzerondjes (input type="radio")

Keuzerondjes (radiobutton) maken gaat als volgt:
<input type="radio" name="onderwerp" value="ja">
Ja. Hierbij zijn twee dingen belangrijk:

1. Bij een keuze gaat het altijd om één onderwerp en de daarbij behorende keuzemogelijkheden (minimaal 2). Bijvoorbeeld: Onderwerp: "ik heb ervaring". Keuze uit "ja" en "nee". Het onderwerp wordt ingevuld achter 'name'. De keuze vul je in achter 'value'.
2. Aangezien het om 2 verschillende rondjes gaat zou de mogelijk kunnen ontstaan dat er 2 rondjes ingevuld zijn. Dat is nu net niet de bedoeling van het type "radio". Om dit te voorkomen zorg je ervoor dat achter 'name' hetzelfde onderwerp staat. Er kan nu slechts één van de keuzen gekozen worden.

§ 8.1.4: Het tekstgebied (textarea)

Een tekstgebied in een formulier maak je op de volgende wijze
<textarea name="zinvolle naam" rows="n-regels" cols="y-tekens"> </textarea>
De lezer krijgt nu een (wit) invoer veld te zien van n-regels hoog en y-letters breed, waarin hij zijn verhaal kwijt kan.

Uiteindelijk moeten we nog de mogelijkheid geven om de ingevulde gegevens te verzenden. Dat gaat door middel van buttons:

§ 8.1.5: Knoppen (input type="submit" of input type="reset")

voorbeeld:       

Hierdoor worden er twee knoppen onderaan het formulier geplaatst. De eerste met opschrift verzenden, de ander met opschrift Wissen. Uiteraard kun je hiervoor ook andere teksten gebruiken. Wanneer de bezoeker zich bedenkt en op de knop Wissen klikt worden alle velden gewist en kan hij het formulier opnieuw invullen of geheel negeren.
Interessanter is de submit-knop. Wordt deze aangeklikt, dan gebeurt er het volgende:

Er wordt een email gestuurd naar degene die in de action van het form-element genoemd is. Het ontvangen e-mailtje zou er als volgt uit kunnen zien:

Aan de linkerkant staat steeds de "zinvolle naam" of het "onderwerp" afgedrukt. Aan de rechterkant staat hetgeen de bezoeker heeft ingevuld of waar de bezoeker voor heeft gekozen.