Formulieren in HTML
De basisuitrusting van een formulier
Formulieren kun je probleemloos direct in HTML genereren, met eenvoudige tags. Daardoor nemen zelfs heel uitgebreide formulieren bijna geen opslagruimte en overdrachtstijd in beslag. De browser bij de gebruiker genereert de grafische weergave ervan naar je aanwijzingen.

De basis voor elk formulier is de tag <FORM>, die afzonderlijke formulierelementen in de HTML omsluit. De volgende regels zorgen al voor een eenvoudig formulier met een invoerveld.
 

<FORM NAME=”Formulier”>
Naam: <INPUT TYPE=”Text” NAME=”Invoer”>
</FORM>

Voorbeeld van bovenstaande code:

Naam:

Om meerdere formulieren op dezelfde pagina van elkaar te kunnen onderscheiden, leg je met NAME een willekeurige naam vast voor het formulier, die dan bijvoorbeeld ook door Javascript kan worden herkend.

De meeste elementen in een formulier hebben dezelfde opbouw en worden gegenereerd met de tag <INPUT>

  • met TYPE bepaalt u het type element. Een overzicht van de verschillende TYPEN vind je later.
  • NAME dient ook hier voor het onderscheid tussen de verschillende invoerelementen, zodat de gegevens later kunnen worden geordend en bijvoorneeld met javascript verder kunnen worden verwerkt.
<FORM NAME=”Formulier”>
<TABLE BORDER=0>
<TR>
       <TD WIDTH=100>Voornaam:</TD>
        <TD><INPUT TYPE=”Text” NAME=”Voornaam”></TD>
</TR>
<TR>
        <TD>Achternaam:</TD>
        <TD><INPUT TYPE=”Text” NAME=”Achternaam”></TD>
</TR>
</TABLE>
</FORM>
 
Voorbeeld van bovenstaande code:
 
Voornaam:
Achternaam:

Formulierinvoer verzamelen via e-mail

Om de gebruikersgegevens te kunnen verwerken, dien je in de inleidende <FORM> tag vast te leggen wat er met de gegevens moet gebeuren. Natuurlijk heeft het formulier ook een knop nodig waarop de bezoeker kan klikken als hij klaar is met het invullen, als hij wil dat de gegevens worden verwerkt.

<FORM ACTION=”mailto;naam@provider.nl” METHOD=”post”NAME=”Formulier” ENCTYPE=”text/plain”>
<INPUT TYPE=”Text” NAME=”Invoer”> <P>
<INPUT TYPE=”Submit” VALUE=”Verzenden”>
<INPUT TYPE=” Reset” NAME=”wissen” VALUE=”Wissen”>
</FORM>

 

Heb je bovenstaande ingevoerd, krijg je dit als resultaat:

* Bij ACTION geef je aan wat er met het formulier moet gebeuren als de bezoeker klikt op verzenden. In dit geval wordt bepaald dat de invoer per e-mail moet worden verzonden aan het opgegeven adres.


* METHOD bepaalt hoe de gegevens moeten worden verzonden. Voor het verzenden van e-mail dient u altijd de optie POST te kiezen. Als de invoer moet worden verwerkt door een programma, dan gebruik je GET.

* Om de invoer niet platformafhankelijk op te laten slaan- wat zou leiden tot onleesbare informatie in de email- dien je voor de verzending per email “text/plain”aan te geven bij ENCTYPE, zodat u in gewone ASCII-tekst opgeslagen email ontvangt.

* De beide knoppen voor het verzenden en wissen of annuleren van de invoer worden gedefinieerd met Submit en Reset. Submit verzendt de gegevens naar de server en Reset wist alle invoer en zet het gehele formulier terug op de oorspronkelijke instellingen. Met VALUE kun je een willekeurige tekst voor de knop aangeven. Als je VALUE weglaat, vult de browser automatisch een standaardtekst in.