Om bezoekers iets te kunnen laten invullen, hebben we invoerelementen nodig.

Er bestaan zeven formulierelementen:

• tekstveld;
• wachtwoordveld;
• tekstgebied;
• aankruisvakje;
• keuzerondje;
• keuzelijst;
• reset-knop;
• verzendknop.

Al deze formulierelementen moet je tussen de tags <form> en </form> plaatsen. In de onderstaande voorbeelden en opdrachtregels zijn voor de duidelijkheid deze tags weggelaten.

Tekstveld

Om de bezoeker van je webpagina bijvoorbeeld een naam, adres of woonplaats te laten opgeven wordt het tekstveld gebruikt.

Het belangrijkste kenmerk van een tekstveld is dat er maar één regel aan informatie kan worden ingetypt. Het vaste gedeelte van de opdrachtregel is :

Tussen de aanhalingstekens komt een zelfgekozen naam te staan die naar het script wordt gestuurd. Zo weet je welke data je naar waar in het script moet sturen.
Aan deze vaste regel kunnen nog drie attributen worden toegevoegd.

Met value="", kun je het tekstvak al (gedeeltelijk) invullen. Met size="x" kan de lengte van het tekstvak worden bepaald, door voor de 'x' een waarde in te vullen, terwijl met het attribuut maxlength="x" het maximaal aantal tekens wordt gedefinieerd dat kan ingetypt worden. In ons voorbeeld :

En ziet er dan zo uit :

Wachtwoordveld

Om de bezoeker een wachtwoord te laten invullen wordt het wachtwoordveld gebruikt. De ingetypte karakters worden gemaskeerd met sterretjes of bolletjes. Het vaste gedeelte van de opdrachtregel is:

Tekstgebied

Soms kan het handig zijn de gebruiker een reactiemogelijkheid te geven. Als je vindt dat één regel daarvoor niet genoeg is, kun je een tekstgebied ('text area') maken met de tags: <textarea> en </textarea>

De begin-tag kent drie attributen: name="", cols="x" en rows="x". Het attribuut name is verplicht en hebben we eerder al besproken. Met cols="x" kun je aangeven hoeveel kolommen het tekstvak krijgt, terwijl met rows="x" het aantal rijen wordt bepaald.

Aankruisvakjes

Een aankruisvakje wordt in het Engels 'checkbox' genoemd en geeft de invuller van het formulier de mogelijkheid dit vakje te selecteren of leeg te laten.

Het verplichte deel van de opdrachtregel voor het aankruisvakje is:

Tussen de aanhalingstekens komt de naam te staan die aan het script wordt doorgegeven. Je kunt verder nog twee attributen toekennen aan deze regel.

Met value= "", ken je een waarde toe aan de variabele die bij het attribuut name staat ingevuld. Naar het script wordt dan bijvoorbeeld gestuurd kleur=rood. Het attribuut checked zorgt ervoor dat het aankruisvakje standaard al is geselecteerd. Een voorbeeld van een regel met beide attributen:

Ziet er dan zo uit :

Keuzerondjes

Keuzerondjes ('radio buttons') zijn iets ingewikkelder toe te passen dan aankruisvakjes. Het principe van een keuzerondje is dat je er maar één kunt selecteren in een reeks.

Met het verplichte attribuut name="", kun je een aantal keuzerondjes in een groep definiëren. Stel, je wilt iemands leeftijdscategorie weten. De opdrachtregels komen er dan zo uit te zien:

Ook bij de keuzerondjes kunnen de attributen value="" en checked worden gebruikt, die hierbij dezelfde functie hebben als bij de aankruisvakjes.

Ons voorbeeld ziet er dan als volgt uit

Keuzelijsten

Keuzelijsten hebben bijna dezelfde functie als keuzerondjes. In één lijst is namelijk maar één selectie mogelijk, tenzij je anders opgeeft.

Keuzelijsten zijn in tegenstelling tot keuzerondjes goed te gebruiken bij langere lijsten. Je start een keuzelijst ('select list') met de tags <select> en </select>.

De tag <select> kent drie attributen: size="x", multiple en name="".

Met het attribuut size="x" kun je aangeven hoeveel keuzemogelijkheden er tegelijkertijd worden getoond. Laat je dit attribuut weg of stel je dit in op 1, dan wordt er een pop-up menu getoond.

Kies je als waarde 2 of hoger dan worden er meerdere opties zichtbaar. Als de geselecteerde waarde hoger is dan het opgegeven aantal opties krijg je een extra leeg veld.

Het attribuut multiple zorgt ervoor dat er meerdere keuzes tegelijk kunnen worden geselecteerd.

Een keuzemogelijkheid voer je in met de tag <option>, waarbij de tekst die na de tag wordt geplaatst zichtbaar is in de lijst. Wil je een optie voorgeselecteerd hebben dan kun je dit aangeven met het attribuut selected in de tag <option>.

Aan de tag <option> kunnen 2 attributen toegekend worden: value en selected.

Met het attribuut value kan een waarde worden ingevuld die naar het script wordt gestuurd.

Het attribuut selected duidt aan welke optie standaard al is geselecteerd.

Een voorbeeld van een keuzelijst waarbij nummer 3 is voorgeselecteerd:

Geeft dit resultaat :

Het formulier verzenden

Het zou niet de eerste keer zijn dat iemand een fout maakt bij het invullen van een formulier. Het is daarom handig een reset-knop onderaan de pagina te zetten. Je kunt dit doen met de regel:

Om de tekst op de knop te veranderen kun je het attribuut value="" gebruiken. Tussen de aanhalingstekens zet je dan bijvoorbeeld "Wis dit formulier", waarmee alle ingevulde vakken worden gewist en alle voorgeselecteerde waarden worden hersteld.

Aan heel het formulier heb je niets als er geen verzendknop op de pagina staat, waarmee de gegevens naar het script of e-mailadres kunnen worden verzonden. De standaardregel voor de verzendknop is <input type="submit">

Wil je de tekst op de knop veranderen dan gebruik je ook hier het attribuut value="". De complete regel komt er dan bijvoorbeeld zo uit te zien:

Het formulier kan dan verzonden worden en dat is meteen ook de laatste stap in het formulierverhaal.

Het volgende deel van de cursus is Lijsten in HTML
Het leert je hoe je gegevens overzichtelijk in lijsten weergeven.