HTML Formulieren


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie formulieren | Verwerken informatie | Verzenden via mailto | Tekstvelden | Keuzerondjes | Aankruisvakjes | Knoppen | Bestanden verzenden | Keuzelijsten | Tekstvakken | Een formulier opmaken | Controls groeperen | Controls activeren | Het gebruik van stijlen | Voorbeeld zoekformulier | Voorbeeld vragenformulier

Gerelateerde elementen: BUTTON | FIELDSET | FORM | INPUT | LABEL | LEGEND | OPTGROUP | OPTION | SELECT | TEXTAREA


Introductie formulieren

Formulieren (forms) worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. Het kan daarbij gaan om bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enquête, het beantwoorden van vragen en het plaatsen van een bestelling.

De belangrijkste elementen bij het maken van formulieren zijn FORM, INPUT, SELECT, OPTION en TEXTAREA.

Het FORM element definieert het begin en einde van een formulier. Met de attributen METHOD en ACTION wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen.

Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen, lijsten en koppen) een aantal onderdelen, welke controls worden genoemd.

Het INPUT element wordt onder andere gebruikt voor het maken van de volgende controls:

  • tekstvelden, waarin de gebruiker op één regel tekst kan invoeren (gewone tekst, of een wachtwoord)
  • verborgen informatie, welke voor de gebruiker niet zichtbaar is, maar wel met de overige informatie uit het formulier naar de server gestuurd wordt)
  • keuzerondjes (radio buttons), waarbij de gebruiker één keuze moet maken uit meerdere mogelijkheden
  • aankruisvakjes (checkboxen), waarvan de gebruiker er één of meer kan selecteren
  • bestandsselectie, waarbij de gebruiker bestanden kan selecteren welke met het formulier meegestuurd moeten worden
  • knoppen voor verzenden (submit) en terug naar de beginwaarden van het formulier (reset)

De elementen SELECT en OPTION worden gebruikt voor het maken van de volgende controls:

  • uitschuifkeuzelijst: de gebruiker kiest uit een uitklapbaar menu één of meer mogelijkheden
  • meervoudige keuzelijst: de gebruiker kiest één of meer mogelijkheden uit een lijst, waarin meerdere opties zichtbaar zijn

Het TEXTAREA element wordt gebruikt om het volgende control te maken:

  • tekstvak, waarin de gebruiker over meerdere regels tekst kan invoeren

In het volgende "formulier" zijn een aantal controls te zien.


Tekstveld:

Aankruisvakjes: keuze 1 keuze 2

Keuzerondjes: mee eens niet mee eens

Tekstvak:

Uitschuifkeuzelijst: Meervoudige keuzelijst:

Knoppen:


Aan de meeste van de hiervoor genoemde elementen kunnen de attributen NAME en VALUE toegevoegd worden. Met het NAME attribuut wordt aan een control een naam gegeven, zodat het bij de verwerking van het formulier op de server onderscheiden kan worden van andere controls. Het VALUE attribuut legt vast welke waarde naar de server gestuurd moet worden, als een bepaalde keuze gemaakt wordt. Daarnaast kan het in sommige gevallen gebruikt worden om een beginwaarde te definiëren (bij tekstvelden).

Nieuwe mogelijkheden bieden de in HTML 4.0 opgenomen elementen FIELDSET, LEGEND, OPTGROUP, LABEL en BUTTON. Deze elementen hebben vooral betrekking op de weergave en toegankelijkheid van formulieren.
Het FIELDSET element kan gebruikt worden om een aantal (bijvoorbeeld thematisch gerelateerde) controls van een formulier te groeperen door er een kader om te plaatsen. Met het LEGEND element kan bij dat kader een bijschrift geplaatst worden.
Met het OPTGROUP element kunnen keuzemogelijkheden in een keuzelijst gegroepeerd worden. Dit moet voorkomen dat de gebruiker bij een lange lijst in de vele mogelijkheden verdwaalt.
Met het LABEL element kan informatie aan een control verbonden worden (bijvoorbeeld een bijschrift), welke het de gebruiker makkelijker moet maken dat control te selecteren.
Het BUTTON element kan gebruikt worden om een knop te maken met meer mogelijkheden voor de opmaak dan de knoppen, welke gemaakt worden met het INPUT element.
Tot de nieuwe mogelijkheden behoren ook de attributen TABINDEX en ACCESSKEY, welke aan meerdere elementen toegevoegd kunnen worden. Met het TABINDEX attribuut kan de volgorde bepaald worden, waarmee de verschillende controls van een formulier geactiveerd kunnen worden als de gebruiker de tab-toets op het toetsenbord indrukt. Het ACCESSKEY attribuut kan gebruikt worden 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.
De ondersteuning van de genoemde elementen en attributen beperkt zich vooral tot de nieuwste browsers.

Hierna wordt eerst ingegaan op het verwerken van de informatie uit een formulier met behulp van een script op de server en op het verzenden van de informatie per e-mail. Daarna worden de hiervoor genoemde controls toegelicht en wordt ingegaan op de mogelijkheden voor groepen en activeren ervan. Verder wordt aandacht besteed aan de opmaak van een formulier en het gebruik van stijlen. Dit onderdeel over formulieren wordt afgesloten met voorbeelden voor een zoekformulier en een vragenformulier.


Vervolg: Verwerken informatie



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 8 april 2004