Invulformulieren

Een leuke manier om feedback te krijgen van de bezoekers van je webpagina is door middel van een `invul-formulier'. Bezoekers kunnen hun mening geven, dingen aanklikken, en met een druk op de knop worden de gegevens per e-mail naar jou gestuurd. Hartstikke leuk. En het is nog makkelijk te maken ook. Hier zal ik laten zien hoe je een formulier kan maken (de benodigde HTML-codes).

Een formulier om e-mail mee te versturen wordt aangegeven met

  <form method=post  
      action=mailto:[email protected]>
  ....
  </form>

met in plaats van [email protected] uiteraard je eigen e-mail adres. In de e-mail die je krijgt staan de waardes die de gebruiker heeft gegeven aan de verschillende elementen. Als er bijvoorbeeld een element `e-mail' in stond, waarbij de gebruiker z'n e-mail adres "[email protected]" heeft ingevuld, staat er `[email protected]' in de mail die je gekregen hebt. Dit is nu misschien nog vrij onbegrijpelijk maar straks wordt het duidelijker.

Bij alle elementen moet je dus opgeven wat hun `naam' is, met behulp van de name= optie. Alleen dan kan die informatie namelijk verstuurd worden!

Tussen de form tags komen de verschillende invul-elementen. Daar zijn nogal wat mogelijkheden voor.

Het feedback-formulier hieronder wordt na invulling naar mijn opgestuurd. Ik zou je graag willen uitnodigen om je mening over de HTML-Hoek kenbaar te maken...

Tekstvelden

Dit is een `type=text' element. Je kan het formaat opgeven, hier heb ik een formaat op 20 tekens gezet. De naam is hier gelijk aan "Naam".
Je naam:

(HTML daarvan: <input type=text name="Naam" size=20>). Als de gebruiker hier dus "Johan Cruijff" invult, krijg je in je email `Naam=Johan Cruijff' te staan.

Je kan het aantal tekens beperken wat mensen mogen invullen. Dit is een `type=text' tag, met formaat van 8, waar je maximaal 7 tekens op kan invullen.
Je postcode:
(HTML daarvan: <input type=text name="Postcode" size=8 maxlength=7>)

Dit is een `type=password' tag. Hier kan je dus niet zien wat je typt. In dit element is ook nog maxlength=4 en size=4 gezet.
Je PIN-code:
(HTML: <input size=4 type=password name="PIN">)

Aan/uit knopjes

Dit is een `type=checkbox' tag, die je aan of uit kan zetten.
Ik ben voor de eerste keer in de HTML-Hoek
(HTML: <input type=checkbox name="Vaker" value="Eerste Keer">). Opletten: De naam van deze checkbox is dus `Vaker', en de waarde is "Eerste Keer". Als de gebruiker de checkbox indrukt, krijg je `Vaker=Eerste Keer' in je e-mail. En als de checkbox niet is ingedrukt, krijg je geen Vaker= informatie in je e-mail. De value is dus de waarde als hij ingedrukt is.

Overigens is dit knopje op sommige versies van Netscape volkomen onzichtbaar, namelijk 1 pixel groot.

Je kan een checkbox ook al van te voren aanzetten, met de checked optie:
Ik vind de layout erg mooi.
(HTML: <input type=checkbox name="Layout" value="Mooi" checked>)

Multiple Choice

Dat gaat met een `type=radio' element. Je moet verschillende knopjes maken met dezelfde naam maar verschillende `values'. Net als bij aan/uit knopjes kan je ze ook van te voren aanzetten met een `checked' optie; hier is de eerste optie alvast aangezet.

Wat vind je van de informatie op de HTML-Hoek?
Goed
Mwwoaah
Prut
De HTML code hier voor:

<input type=radio name="Waardering"
   value="Goed" checked>Goed<br>
<input type=radio name="Waardering"
   value="Matig">Mwwoaah<br>
<input type=radio name="Waardering"
   value="Slecht">Prut<br>

Zoals je misschien al kan raden krijg je `Waardering=Goed', `Waardering=Matig' of `Waardering=Slecht' in je e-mail.

Menu keuze uit een aantal

Als je wilt dat mensen maar 1 element mogen kiezen, heb je twee mogelijkheden die alleen wat uiterlijk betreft verschillen.
Hoe ben je op de HTML-Hoek gekomen?

De HTML-code hiervan:

  <select name="Afkomst">
  <option>Via de Planet Internet HTML Pagina
  <option>Via een link op een andere web-pagina
  <option>Iemand vertelde me het URL
  <option>Via een zoekmachine
  <option>Anders
  </select>

De tweede mogelijkheid: (keuze 2 is hier alvast geselecteerd; bij dit element heet dat niet checked maar selected, om onduidelijke redenen)

Welk type browser gebruik je?

Hier geef je met size aan hoeveel regels van de mogelijkheden zichtbaar mogen zijn. HTML-code:

  <select name="Browser"
    size=3>
  <option>Netscape 3.x
  <option selected>Netscape 2.x
  <option>Netscape 1.x
  <option>Internet Explorer 3.x
  <option>Internet Explorer 2.x
  <option>NetManage Chameleon
  <option>Tekstbrowser
  <option>Andere
  </select>

Je kan ook meerdere keuzes laten maken, door multiple toe te voegen in het select-tag:

Welke informatie vind je nuttig op deze site?

Helaas is de manier waarop gebruikers op verschillende operating systemen hun keuzes kunnen maken op verschillende operating systemen totaal anders. Op mijn HP Unix werkstation kan ik gewoon klikken op meerdere opties, die dan allemaal aan gaan. Op mijn Windows 95 PC thuis gaat dat niet. Daar moet ik met control clicken om meerdere te selecteren, en met shift clicken om een hele range te selecteren.
Zeer verwarrend dus. En als je zo'n knop in je pagina zet, krijg je gegarandeerd klachten: `Waarom kan ik hier maar 1 optie selecteren'? (Ik spreek uit ervaring..)

Groot tekstveld

En tot slot het TextArea. Ook hier kan je default tekst in plaatsen. Lieve Chiel,
Dit gaat zo in HTML:

  <textarea name="TextArea" rows=8 cols=40>
  Lieve Chiel,

  </textarea>

Het formaat geef je dus op met rows en cols, en de `voor-ingevulde tekst' zet je simpelweg tussen de <textarea> en </textarea> tags.

Opsturen

En tot slot moet je natuurlijk nog een opstuurknop maken:

De eerste knop stuurt het mailtje, de tweede knop zet alle elementen weer op hun `voor-ingestelde' waarde terug.

HTML:
<input type=submit value="Stuur op!"> <input type=reset value="Reset!">

En dat was het. De e-mail die je krijgt is helaas nogal moeilijk te lezen, alles staat op 1 regel gepropt. Er zijn programmaatjes om die regels uit elkaar te halen in verschillende elementen; een Nederlandse versie is FormPost voor Windows.

De linkjes op deze pagina:

Formpost voor Windows
http://www.cybercomm.nl/~smurf/formpost/