Informatie over HTML formulieren, zelf een HTML formulier maken

Via een HTML formulier op je website kan je je bezoekers informatie laten invullen die vervolgens via de browser naar jouw e-mailadres wordt verstuurd. Formulieren worden onder andere gebruikt voor het aanmelden voor een nieuwsbrief of forum, het plaatsen van een bestelling of als contactformulier met de webmaster. Ook zoekmachines gebruiken

HTML formulieren waarin bezoekers zoektermen in kunnen vullen. De ingevulde zoektermen worden door een programma gebruikt om te zoeken in de database, en het programma stuurt vervolgens een htmlpagina met zoekresultaten terug aan de browser van de gebruiker.

Het element FORM

Het FORM element definieert het begin en het einde van een formulier. Je begint een formulier met <FORM> en aan het einde sluit je weer af met de </FORM> eindtag. Met de atributen METHOD en ACTION wordt bepaald hoe de informatie uit het formulier verzonden moet worden, en waarheen.

Bijvoorbeeld: <form method="post" action="mailto:jouwemail@adres.nl">

Het element INPUT

Een formulier bevat een aantal onderdelen die controls of invoervelden worden genoemd. Met het INPUT element kunnen onder andere de volgende controls worden gemaakt:

•    Tekst: Hier kan de gebruiker een (korte) regel tekst invoeren. Bijvoorbeeld een zoekterm, een wachtwoord of een naam of adres.
•    Wachtwoord: zelfde als een tekstveld, alleen wordt de ingevoerde tekst als sterretjes * getoond.
•    Tekstveld: Een invoerveld waar de gebruiker meerdere regels tekst in kan voeren.
•    Keuzerondjes: Dit zijn zogenaamde radiobuttons, waarbij de gebruiker een keuze moet maken uit meerdere opties.
•    Aankruisvakjes: Dit zijn checkboxes waarbij de gebruiker één of meerdere opties kan selecteren.
•    Knoppen: Buttons waarop de gebruiker kan klikken zoals een verzendbutton of een resetknop.
•    Bestandsselectie: In een keuzelijst kan de gebruiker een of meerdere bestanden selecteren die met het formulier meegestuurd moeten worden. Bijvoorbeeld een foto of een worddocument.
•    Verborgen informatie: dit is voor de gebruiker niet zichtbaar, maar is wel zichtbaar in de broncode van de HTMLpagina. Dit kan voor jou als webmaster handig zijn.

De <INPUT> tag heeft onder andere de volgende attributen:

•    type: geeft aan wat voor soort input er volgt. Mogelijke waarden zijn bijvoorbeeld: text, submit, en radio.
•    size: de breedte van het veld. Gemeten wordt in spaties.
•    maxlength: het maximum aantal karakters dat ingevoerd mag worden in het veld.
•    name: hiermee geef je het veld een naam, zodat er later naar verwezen kan worden.
•    value: bij Radiobuttons geeft value de informatie aan die zal worden verzonden als de bezoeker deze radio button selecteert.

De elementen SELECT, OPTION en TEXTAREA

Met de elementen SELECT en OPTION is het mogelijk om een uitschuifkeuzelijst of een meervoudige keuzelijst te maken. Bij een uitschuifkeuzelijst kan de gebruiker kiezen uit een uitklapbaar menu, en bij een meervoudige keuzelijst kies de gebruiker een of meerdere mogelijkheden uit een lijst, waarin meerdere opties zichtbaar zijn. Het SELECT element geeft aan dat het om een keuzelijst gaat, het OPTION attribuut definieert een keuze.
Het TEXTAREA element wordt gebruikt om een tekstvak te maken, waarin de gebruiker over meerdere regels tekst in kan voeren. Met behulp van de attributen rows en cols kan je aangeven uit hoeveel rijen en kolommen het tekstvak moet bestaan. In volgend voorbeeld bestaat het tekstvak waarin de bezoeker opmerkingen kan plaatsen uit 5 rijen en 25 kolommen:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Opmerkingen:</em><br>
<textarea rows="5" cols="25" name="opmerkingen"></textarea>
<input type="submit" value="Verzenden">
</form>

De <textarea> tag moet afgesloten worden met de eindtag: </textarea>. Voor de <input> tag is dit niet noodzakelijk.

De attributen NAME en VALUE

Bij de meeste voorgenoemde elementen kun je de attributen NAME en VALUE toevoegen. Met het NAME attribuut wordt er een unieke naam aan een control gegeven, zodat het bij de verwerking van het formulier op de server onderscheiden kan worden van andere controls. Met het VALUE attribuut leg je de waarde vast die naar de server gestuurd moet worden als er een bepaalde keuze gemaakt wordt. Daarnaast kan het VALUE attribuut in sommige gevallen gebruikt worden om een beginwaarde te definiëren (bij tekstvelden).

Nieuwe elementen en attributen

In HTML 4.0 zijn nieuwe elementen opgenomen, namelijk FIELDZET, LEGEND, OPTGROUP, LABEL en BUTTON. Deze elementen hebben vooral betrekking op de weergave en toegankelijkheid van formulieren.

•    Het FIELDSET element wordt gebruikt om een aantal controls van een formulier te groeperen door er een kader omheen te plaatsen. Met het LEGEND element kan een bijschrift bij dat kader geplaatst worden.
•    Met het OPTGROUP element kunnen keuzemogelijkheden in een keuzelijst gegroepeerd worden. Dit voorkomt dat de gebruiker bij een lange lijst in de vele mogelijkheden verdwaalt.
•    Met het LABEL element kan informatie aan een control verbonden worden zodat het voor de gebruikelijker makkelijker wordt gemaakt om een bepaalde control te selecteren. Zo kan je bijvoorbeeld een bijschrift plaatsen.
•    Met het BUTTON element kan je knoppen maken die meer mogelijkheden hebben voor de opmaak dan de normale knoppen van het INPUT element.

Ook zijn er een aantal nieuwe attributen opgenomen: TABINDEX en ACCESKEY. De attributen TABINDEX en ACCESSKEY kun je aan meerdere elementen toevoegen.

•    Met het TABINDEX attribuut kun je de volgorde bepalen, waarmee de verschillende controls van een formulier geactiveerd moeten worden als de gebruiker de tab-toets op het toetsenbord indrukt.
•    Het ACCESSKEY attribuut kan je gebruiken om een sneltoets aan een element toe te wijzen en daarmee de gebruiker direct vanaf het toetsenbord toegang te geven tot het control, dat door het element in het formulier is geplaatst.

HTML formulier code schrijven

Een formulier begin je altijd met de <FORM>tag waarin je attributen mee kunt geven. Daarna komt de tekst van het formulier, bijvoorbeeld een vraag en daarna definieer je met de <INPUT> tag het soort control.

Een voorbeeld van de code voor de vraag ” Wat is jouw lievelingskleur?” met daarachter een tekstveld waarin de gebruiker het antwoord in kan vullen:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat is jouw lievelingskleur?>
<input type="text" size="20" maxlength="35" name="kleur">
</form>

In het voorbeeld hierboven gebruikten we een tekstveld (type="text") met een breedte van 20 en een maximum aantal karakters van 35. We gaven het veld de naam "kleur" in het name attribuut.

Het formulier verzenden

Aan het eind van een formulier staat meestal een submit of verzendknop, waarmee de bezoeker de informatie kan verzenden, bijvoorbeeld naar je e-mailadres.

Om de verzendknop te maken, voegen je type="submit" toe aan een nieuwe <input> tag. Met het value attribuut geef je de tekst aan die op de knop moet komen, bijvoorbeeld "Verzenden" of "OK". De code voor de verzendknop wordt bijvoorbeeld als volgt:

<input type="submit" value="Verzenden">

Deze knop voegen we nu toe aan het formulier met het tekstveld dat we eerder gemaakt hebben:

<form method="post" action="mailto:jouwemail@adres.nl">
<em>Wat is jouw lievelingskleur?>
<input type="text" size="20" maxlength="35" name="kleur"><BR>
<input type="submit" value="Verzenden">
</form>