HTML Structuur

HTML Formulieren

  • 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 WorldWideWeb.

Het gebruik van HTML-formulieren

  • HTML-formulieren zijn bedoeld om de gebruiker informatie te laten invullen en op te laten sturen naar een URL op een webserver.
    Daar staat dan een bestand dat de opgestuurde gegevens verwerkt.
  • Het kan echter ook dienstdoen 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
    • 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.

naar boven 

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.

naar boven 

Methode 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.

Codering

  • 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

Verzenden

  • 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 worden dan ook altijd met POST verstuurd.

naar boven 

Element Beschrijving Attributen
<button> definieert een knop. disabled, name, type, value
<fieldset> Groepeert controle-elementen. geen
<form> Definieert het begin en het einde van een formulier. accept, accept-charset, action, enctype, method, name, target
<input>
In XHTML <input />
Definieert een veld in een formulier. accept, align, alt, cheked, disabled, maxlenght, name, readonly, size, src, type, value
<label> Definieert een bijschrift van een tabel. for
<legend> Definieert een bijschrift van een fieldset element. align
<optgroup> Groepeert opties in een drop-down lijst. disabled, label
<option> Definieert een mogelijke keuze voor een formulierveld. disabled, label, selected, value
<select> Specificeert een controle-element in de vorm van een keuzelijst. disabled, multiple, name, size
<textarea> Definieert een tekstvak. cols, disabled, name, readonly, rows
  • + eventuele standaard en gebeurtenis attributen.

naar boven 

naar boven naar boven naar form
naar boven naar het form element