HTML-formulier

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

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 uitbreiding ontwikkeld onder de naam XForms.

HTML-formulieren zorgen er voor dat op het World Wide Web tweezijdige communicatie plaats kan vinden. In die zin zijn ze essentieel voor het succes van het WWW.

Inhoud 1 Gebruik van HTML-formulieren 2 Elementen van HTML-formulieren 3 Interactie 4 Methoden om een formulier te versturen 4.1 Codering 4.2 Versturen 5 Opmerkingen 6 Externe links

[bewerk] 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. Het kan echter ook dienst doen voor interactiviteit in een webpagina, zonder dat er iets verstuurd wordt, met behulp van HTML-scripting. 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-mailadres. Op dat e-mailadres krijgt de zojuist geregistreerde gebruiker dan vaak 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 aanmelden 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.

[bewerk] 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.
• 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 toestanden: aangevinkt of niet aangevinkt. De selectievakjes zijn onderling niet verbonden. Selectievakjes worden meestal getoond als vierkantje.
• 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: 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.

[bewerk] 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 bereking 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.

[bewerk] 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 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-waardecombinatie eruitziet. Zo levert Google een querystring die er zo uit ziet: 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.

[bewerk] 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 gebruikt van "POST" verplicht (zie hieronder).

[bewerk] 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.

[bewerk] Opmerkingen

Internet Explorer, de browser van Microsoft 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 er voor 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.

[bewerk] Externe links

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

Webdesign
Opmaaktalen	HTML | XHTML | C-HTML | WML | XHTML Basic
Design	Cascading Style Sheets | XSL-FO | XSLT
Interactie	Document Object Model | HTML-event | HTML-scripting | JavaScript | Ajax | Dynamic HTML
Referentie	HTML-kleuren | HTML-tags | HTML-entiteiten | HTML-events
Details	Browser sniffing | User Agent | Cookie | Metatag | DTD | Broodkruimelnavigatie | Inline image | Java‑applet | Macromedia Flash | HTML‑formulier | Favicon | Frames | SVG | WAI
HTML-Editors	Dreamweaver | FrontPage | Nvu | Quanta Plus
Verwant	Wereldwijde web | Webbrowser | Webserver | Grafisch programma | Teksteditor | XML