Formulieren

• Inleiding
• Standaard Code
• Voorbeeld.1
• Voorbeeld.2
• FormulierTags
• <TEXTAREA>
• <SELECT>
• <INPUT>
• Uitgebreid Voorbeeld

Inleiding

We kennen ze allemaal wel, die check boxjes, die leuke invulvakjes en alles wat er bij komt kijken. De implementatie van deze formulierelementen is eigenlijk heel simpel. Er komt niet echt zo veel bij kijken en levert al snel eluke resultaten. Hier vindt je meer info over dit alles.

Standaard Code

<FORM>
</FORM>

Nu kan je <FORM> op verschillende manieren initializeren, met de ACTION tag kan je zeggen naar welke URL de uitvoer gestuurd moet worden. Met de METHOD tag kan je aangegeven hoe de gegevens van je formulier verstuurd moeten worden. Als je GET gebruikt, worden alle gegevens die je bij ACTION hebt opgegeven, achter de URL geplakt.

Voorbeeld.1:

<FORM METHOD="POST" ACTION="http://www.ranbooke.com/fatman/cgi-bin/getcomments2.cgi">
Hier komt de form
</FORM>

Dit formuliertje verzameld al de gegevens van het form en stuurt die naar de cgi.

Voorbeeld.2:

Veel pers. zullen geen cgi prohrammaatjes mogen uitvoeren, voor deze personen bestaat er een andere opl., zijn kunnen de gegeven van hun form via E-Mail laten sturen:
<FORM METHOD="POST" ACTION="mailto:fatman@sin.khk.be" ENCTYPE="text/plain">
Hier komt de form
</FORM>

De inhoud van het formulier wordt nu over E-mail gestuurd naar het E-Mail adres

De tag ENCTYPE zorgt ervoor dat het resultaat als platte tekst verstuurt wordt, wat handig is voor later verwerking.

Merk op dat in de volgende uiteenzetting de parameter NAME steeds zelf mag gekozen worden. Zij moet liefst uniek zijn voor deze pagina. Zo weet je welk veld overeenkomt met welk form-element op je pagina.

Formuliere Tags

• <TEXTAREA> Dit creëert een tekstveld waarin je zelf iets kan invullen.
  Voorbeeld:
  <TEXTAREA NAME="Tekstvak" COLS=70 ROWS=6>
  Vul hier de beoordeling van deze site in
  </TEXTAREA>
    
• <SELECT> Hiermee maak je een keuzemenuutje aan. Met SIZE geef je aan hoeveel keuzes zichtbaar moeten worden gemaakt. Als dit getal groter is dan 1, klapt het menu niet langer open maar krijgt het een scrooll bar. Als de SIZE groter is dan het aantal waarden, kan de gebruiker een lege waarde kiezen om bijvoorbeeld aan te geven dat het gevraagde niet van toepassing is. Met het keyword MULTIPLE geef je de gebruiker de mogelijkheid om meerdere keuzes te maken.
  Voorbeeld:
  Hoe ben je op deze site terechtgekomen?<BR>
  <SELECT NAME="Keuzeform" SIZE=1>
    <OPTION SELECTED VALUE="site"> Via SIN
    <OPTION VALUE="Vrienden"> Via vrienden
  </SELECT>
    
• <INPUT>
  • <TEXT> Hiermee kan de gebruiker een korte tekst invullen, 1 lijn.
    Voorbeeld:
    Wat is je telefoonnummer:
    <INPUT TYPE=TEXT NAME="tel" SIZE=10 MAXLENGTH=10>
       
  • <PASSWORD> Werkt hetzelfde als text, maar je ziet de input niet, in plaats daarvan zie je sterretjes.
    Voorbeeld:
    <INPUT TYPE=PASSWORD NAME="code" SIZE=10 MAXLENGTH=10>
       
  • <CHECKBOX> Hiermee maak je een vakje dat je kan afvinken. Kan je dus bijvoorbeeld gebruiken om ja of nee te antwoorden.
    Voorbeeld:
    <INPUT TYPE=CHECKBOX  NAME="Check" VALUE="ik_ken_SIN" CHECKED>
        Ik ken de website van SIN <BR>
    <INPUT TYPE=CHECKBOX  NAME="Check2" VALUE="ik_ken_SIN niet">
        Ik ken de website van SIN <BR>
         
  • <RADIO> Hetzelfde als Checkbox, maar, ze zijn rond en ze kunnen in groep aan elkaar gekoppeld worden. Op die manier kan je maar een optie uit de groep kiezen.
    Voorbeeld:
    Welk type CPU bevat uw PC: <BR>
    <INPUT TYPE=RADIO NAME="CPU" VALUE="486">Intel 486 of eenvoudiger<BR>
    <INPUT TYPE=RADIO NAME="CPU" VALUE="Pent">Intel Pentium, Pro, II<BR>
    <INPUT TYPE=RADIO NAME="CPU" VALUE="Anders">Anders<BR>
       
  • <HIDDEN> Deze tag tag heeft een speciale functie, hij doet namelijk niets. Je kan hem gebruiken om onverranderende waardes door te geven.
    Voorbeeld:
    <INPUT TYPE=HIDDEN NAME="SIN" VALUE="SIN voorbeeld Formulier">
      
  • <RESET> Deze knop zorgt ervoor dat alle ingevulde waarden op het formulier verwijderd worden. Met de optie VALUE kun je het opschrift van de knop definiëren.
    Voorbeeld:
    <INPUT TYPE=RESET VALUE="Formulier leegmaken">
      
  • <SUBMIT> Met deze knop wordt het formulier verstuurd zoals dat gedefiniëerd is in de form-tag met ACTION en METHOD.
    Voorbeeld:
    <INPUT TYPE=SUBMIT VALUE="Mailen naar SIN">

Uitgebreid Voorbeeld

Klik hierop om een vrij groot uitgewerkt voorbeeld te zien.