HTML-formulier

Een HTML formulier is een formulier dat in een webpagina staat en dat door middel van HTML is gecodeerd.

De bedoeling van een dergelijk formulier is dat het kan worden ingevuld en worden verstuurd via de webbrowser. Het kan echter ook dienst doen voor interactiviteit in een webpagina, zonder dat er iets verstuurd wordt, met behulp van HTML scripting.

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

Gebruik van HTML formulieren

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. Hoe die verwerking precies plaats vindt, is variabel, er zijn vele mogelijkheden. Enkele veelgebruikte 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. De 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 veel internetforums is het mogelijk (soms zelfs verplicht) dat een gebruiker zich registreert. Daartoe worden enkele gegevens gevraagd, tenminste een gebruikersnaam en een wachtwoord, en vaak ook een geldig e-mail adres. Op dat e-mail adres krijgt de zojuist geregistreerde gebruiker dan vaak een bericht om de registratie te bevestigen door een (tijdelijke) link te openen. Een dergelijk e-mail bericht wordt automatisch verstuurd door het programma dat de registratie verwerkt. Na het volgen van de procedure kan de gebruiker inloggen door zijn gebruikersnaam en wachtwoord in 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, de plaatjes op de wikipedia zijn hier op deze manier geplaatst (zie Speciaal:Upload).

Hieraan zijn veel toepassingen toe te voegen. HTML formulieren zorgen er voor dat op het World Wide Web tweezijdige communicatie plaats kan vinden.

Elementen van HTML formulieren

In HTML formulieren kunnen de volgende soorten invoervelden worden gebruikt.

tekst. Een eenregelig invoerveld, zoals bijvoorbeeld 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, zoals op de wikipedia wordt gebruikt om de tekst van artikelen te bewerken.
radioknop. Werkt vergelijkbaar met de knoppen op een ouderwetse radio, van een bij elkaar horende reeks radioknoppen kan er slechts één geselecteerd zijn. Zodra een andere wordt geselecteerd, verdwijnt de selectie van de eerder geselecteerde. Radioknoppen worden meestal getoond als een rondje. Verschillende radioknoppen worden met elkaar verbonden door ze dezelfde naam te geven.
aanvinkhokje. Heeft twee toestanden: aangevinkt of niet aangevinkt. De aanvinkhokjes zijn onderling niet verbonden. Aanvinkhokjes worden meestal getoond als vierkantje.
uitklapmenu. 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: 1). een knop om het formulier te versturen, 2) een knop om het formulier leeg te maken (of eigenlijk naar de oorspronkelijke toestand terug te laten keren) en 3) 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 gebruiken een bestand van zijn 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.

Methoden om een formulier te versturen

De 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 coderen. 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-waarde combinatie er uit ziet, bijvoorbeeld zoeken op Google levert een querystring op die er bijvoorbeeld zo uit kan zien: http://www.google.nl/search?hl=nl&q=test&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

application/x-www-form-urlencoded. Dit is de standaard manier. Alle velden worden verwerkt tot naam-waarde paren. 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-waarde paren worden omgezet tot binaire code en deze binaire code wordt één geheel verstuurd.

Versturen

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 POST methode 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.

Externe links

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