HTML-formulier

Een HTML-formulier is een formulier om gegevens in te vullen dat opgenomen is in een webpagina en dat door middel van HTML is gecodeerd.

HTML-formulieren werden in 1993 geïntroduceerd in de HTML+. Die specificatie werd later enigszins aangepast en vooral uitgebreid met de mogelijkheid om bestanden via de webbrowser te verzenden (RFC 1867). Voor toepassing in XHTML is een volgende uitbreiding ontwikkeld onder de naam XForms.

HTML-formulieren zorgen ervoor dat op het wereldwijde web tweezijdige communicatie plaats kan vinden. In die zin zijn ze essentieel voor het succes van het WWW.

Gebruik

HTML-formulieren zijn bedoeld om de gebruiker informatie te laten invullen en op te laten sturen naar de een URL op een webserver. Daar staat dan een bestand dat de opgestuurde gegevens verwerkt. Het kan ook dienstdoen voor interactiviteit in een webpagina, zonder dat er iets verstuurd wordt, met behulp van HTML-scripting. Hoe die verwerking precies plaatsvindt, is variabel. Er zijn verschillende mogelijkheden. Enkele toepassingen zijn:

• Zoeken - Elke zoekmachine op internet maakt gebruik van een HTML-formulier waarin bezoekers zoektermen kunnen invullen. De ingevulde zoektermen worden gebruikt door een programma om te zoeken in een database. Het programma zet de resultaten om in HTML en die HTML wordt teruggestuurd naar de browser van de gebruiker.
• Opslag van gegevens - Wikipedia werkt met HTML-formulieren om teksten die gebruikers invoeren op te slaan in een database. In dit geval worden de ingevoerde teksten ook weer beschikbaar gesteld aan andere bezoekers.
• Aanmelden als gebruiker - Op verschillende internetforums is het mogelijk (soms verplicht) dat een gebruiker zich registreert. Daartoe worden enkele gegevens gevraagd, ten minste een gebruikersnaam en een wachtwoord en doorgaans ook een geldig e-mailadres. Op dat e-mailadres krijgt de zojuist geregistreerde gebruiker dan een bericht om de registratie te bevestigen door een (tijdelijke) link te openen. Een dergelijk e-mailbericht wordt automatisch verstuurd door het programma dat de registratie verwerkt. Na het volgen van de procedure, kan de gebruiker zich aanmelden door zijn gebruikersnaam en wachtwoord op een formulier in te vullen.
• Betalingen via internet - Via HTML-formulieren kunnen betalingen met creditcards worden gedaan. De gebruiker voert daartoe de benodigde gegevens van zijn creditcard in en het ontvangende programma verwerkt de betaling.
• Versturen van bestanden - Met de browser kan ook een bestand worden verstuurd.

Hieraan zijn verschillende toepassingen toe te voegen.

Elementen

In HTML-formulieren kunnen de volgende soorten invoervelden worden gebruikt.

• tekst - Een eenregelig invoerveld, zoals wordt gebruikt door de meeste zoekmachines.
• wachtwoord - Hetzelfde als hierboven, alleen wordt de ingevoerde tekst getoond als sterren (******) om te voorkomen dat het wachtwoord over de schouders van de gebruiker wordt meegelezen.
• tekstveld - Een meerregelig invoerveld, bijvoorbeeld om de tekst van artikelen te bewerken.
• keuzerondje - Werkt vergelijkbaar met de knoppen op een ouderwetse radio, van een bij elkaar horende reeks keuzerondjes kan er slechts één geselecteerd zijn. Zodra een andere wordt geselecteerd, verdwijnt de selectie van de eerder geselecteerde. Verschillende keuzerondjes worden met elkaar verbonden door ze dezelfde naam te geven.
• selectievakje - Heeft twee of drie toestanden: aangevinkt of niet aangevinkt, en indien ingesteld door de maker, 'halfgeselecteerd'. De selectievakjes zijn onderling niet verbonden. Selectievakjes worden meestal getoond als vierkantje. 'Halfgeselecteerde' selectievakjes bedoelen een andere optie die door de maker is gezet.
• keuzelijst - Een meestal eenregelig hokje waarin rechts een pijl naar beneden staat. De verschillende keuzes worden zichtbaar als de gebruiker op het pijltje klikt. Er zijn twee varianten: de eerste waarbij slechts één keuze kan worden gemaakt en de andere waarbij meerder opties geselecteerd kunnen worden. Het is mogelijk om meerdere opties zichtbaar te maken.
• drukknop - Een knop waar de gebruiker met zijn muis op kan klikken. Hiervan zijn drie varianten:
  • een knop om het formulier te versturen
  • een knop om het formulier leeg te maken (of eigenlijk naar de oorspronkelijke toestand terug te laten keren) en
  • een knop die van zichzelf niets doet, maar waaraan de programmeur functionaliteit kan hangen.
• bestand - Deze bestaat uit twee delen: een tekstveld en een drukknop. Met de drukknop kan de gebruiker een bestand van zijn of haar harde schijf selecteren. Het pad van het geselecteerde bestand komt dan als tekst in het tekstveld te staan. Het pad kan eventueel ook direct ingetypt worden.
• verborgen - Een verborgen veld wordt niet aan de gebruiker getoond, maar het is wel zichtbaar in de broncode van de HTML.

Interactie

Toen Netscape in 1995 de eerste browser met JavaScript introduceerde, werd het mogelijk om de waarden in formuliervelden aan te passen met behulp van een script. Andere browsers volgden snel. Het zou nog enige jaren duren voordat het mogelijk werd om de tekst in de HTML zelf aan te passen. Daarom werden formulieren ook gebruikt om interactieve webpagina's te maken. Een eenvoudig voorbeeld is de "javascript clock", met een tekstveld waarin de tijd meeloopt. Een ander voorbeeld is een rekenmachine in JavaScript. Dergelijke formulieren hebben soms geen verstuurknop en kunnen niet derhalve opgestuurd worden.

In sommige gevallen wordt dergelijke interactie wel gecombineerd met de mogelijkheid om een formulier op te sturen. Een voorbeeld daarvan kan zijn een webpagina om een offerte voor een hypotheek aan te vragen. Na het invoeren van enkele financiële gegevens wordt in het formulier al een voorlopige berekening gemaakt. Als de berekening bevalt kan de bezoeker zijn persoonlijke gegevens er bij zetten en het formulier opsturen.

De waarde van alle soorten velden is met JavaScript aan te passen, behalve die van het "bestand"-veld. Dat laatste is van belang om te voorkomen dat een webpagina automatisch bestanden van de computer van de gebruiker kan laten opsturen. De maker van de webpagina zou kunnen gokken waar een belangrijk bestand op de computer van bezoekers staat, dat invullen en door JavaScript het formulier automatisch laten versturen.

Methoden om een formulier te versturen

Met de "methode" om een formulier te versturen worden twee verschillende dingen bedoeld. Ten eerste welke actie er gedaan wordt om het formulier te versturen, en ten tweede op welke wijze het formulier wordt verstuurd. De benodigde actie is meestal aangegeven met een verzendknop, maar ook met de Enter-toets kan het formulier vaak worden verzonden. Ook met JavaScript kan de opdracht "verzend formulier" worden gegeven.

De tweede methode om het formulier te versturen staat in de HTML-code, de gebruiker heeft daar geen invloed op, het wordt door de browser afgehandeld. Er zijn twee methoden om een formulier te versturen en twee manieren waarop de browser het codeert. De browser doet eerst de codering en vervolgens wordt het verstuurd. In alle gevallen worden de ingevulde velden omgezet tot paren van naam (key) en waarde (value). Elk veld in het formulier heeft in de HTML-code een naam gekregen, deze naam wordt gebruikt als naam. Datgene wat er is ingevuld (of aangevinkt of anderszins gekozen) wordt verstuurd als de waarde. Bij zoekmachines is soms in de browser te zien hoe deze naam-waardecombinatie eruitziet. Zo levert Google een querystring die er zo uitziet: http://www.google.nl/search?hl=nl&q=wikipedia&btnG=Zoeken. Dit betekent dat in het veld met de naam "q" de waarde "wikipedia" was ingevuld, dat het veld (of in dit geval de knop) met de naam "btnG" de waarde "Zoeken" had en dat het veld met de naam "hl" de waarde "nl" had. Dit laatste veld is overigens een "verborgen" veld, onzichtbaar voor de bezoeker, maar de waarde wordt wel opgestuurd.

Codering

(Zie ook MIME)

• application/x-www-form-urlencoded - Dit is de standaardmanier. Alle velden worden verwerkt tot naam-waardeparen. In principe zoals het is ingevuld, maar sommige tekens (die niet gebruikt mogen worden in een url) worden via urlencode aangepast.
• multipart/form-data - Dit is bedoeld om bestanden te versturen. Alle naam-waardeparen worden omgezet tot binaire code en deze binaire code wordt als één geheel verstuurd. Hierbij is het gebruik van "POST" verplicht (zie hieronder).

Versturen

(Zie ook HTTP)

• GET - Als een formulier met GET wordt verstuurd, dan worden de ingevulde waarden als een querystring aan de url van bestemming toegevoegd, zoals dat bijvoorbeeld met het bovengenoemde voorbeeld gebeurt. Het nadeel is dat er slechts een beperkte hoeveelheid informatie kan worden verstuurd.
• POST - Bij het versturen van een formulier met de methode POST is er alleen een praktisch maximum aan de hoeveel verstuurde gegevens. Langere invulteksten (zoals bij de Wikipedia-artikelen) worden dan ook altijd met POST verstuurd.

Opmerkingen

Internet Explorer kent (tot en met versie 6) enkele problemen met formulieren. De meest opvallende is dat een keuzelijst altijd zichtbaar is door bovenliggende lagen van de webpagina heen. In veel webpagina's wordt dit opgelost door een gecompliceerde functie die ervoor zorgt dat keuzelijsten in zijn geheel onzichtbaar worden wanneer er een laag overheen komt te liggen. Een ander probleem is de "multipart/form-data boundary bug", waardoor Internet Explorer in sommige gevallen bij het versturen van bestanden een corrupt bestand doorgeeft.

Externe links

• (en) Fill-out Forms and Input fields, HTML+ specificatie van het W3C
• (en) Forms in HTML documents, W3C

Bronnen, noten en/of referenties

Webdesign