Formulieren zijn elementen die je op een webpagina kan plaatsen wanneer je de gebruiker om informatie verzoekt.
Formulierelementen kunnen gewone tekstinhoud, opmaak en speciale formuliercontrols bevatten.
Gebruikers vullen dan de formuliergegevens in versturen de gegevens.
Deze gegevens worden dan verwerkt op een server en gemanipuleerd: een opzoeking in een database, wegschrijven in een database, uploaden van bestanden, verstuurd via email,...
In dit deel van de cursus focussen we ons op het client-side gebruik van forulieren: we zorgen ervoor dat een gebruiker een formulier op het scherm ziet en de nodige gegevens kan invullen.
Het verwerken van de gegevens kan gebeuren met een server-side techniek zoals ASP, ASP.net, PHP, JSP, Coldfusion,...
Het client-side manipuleren van de gegevens zoals uitvoeren van controles kan gebeuren in Javascript of VBScript.
Je vindt hieronder een voorbeeld van een formulier in HTML 4.01:
Zoals je merkt in het voorbeeld zal het qua layout beter zijn tabellen te gebruiken voor het schikken van de formulierelementen.
Het bestand op de server dat instaat voor de formulierafhandeling is aangeduid in het action-attribuut van de FORM-tag. Hier werk ik met een relatieve verwijzing t.o.v. dit document, wil je in je eigen formulieren dit script gebruiken (voor testdoeleinden) verwijs dan naar de absolute locatie van dit bestand: http://www.ivobrugge.be/cursusweb/formscript.asp
Het aanmaken van dergelijke server-side scriptbestanden maakt geen deel uit van de cursus HTML 4.01 maar zal je leren in de cursussen ASP en ASP.net.
Het FORM-element
De gegvens die tot één formulier behoren plaats je tussen de tags <FORM> en </FORM>.
De FORM-tag kent heel wat specifieke attributen:
action: URI van het afhandelingsscript
method: specifiëert welke HTTP-methode er gebruit zal worden voor het versturen van de formuliergegevens. Mogelijke waarden zijn GET (standaard) en POST.
GET: formuliergegevens worden verstuurd door een ? aan de URI te plakken samen met de naam-waarde paren van de formulierelementen. We noemen dit deel van de URI de querystring. POST: de gegevens worden verstuurd in de BODY van de request-aanvraag naar de server.
enctype: specifiëert het type van de inhoud van de verstuurde gegevens bij formulieren met de methodPOST. De standaardwaarde is application/x-www-form-urlencoded, multipart/form-data gebruik je voor het versturen van bestanden - in combinatie met het INPUT-element van het typefile.
accept-charset: geeft de karakterset aan waartoe de verstuurde tekens behoren, aangegeven in een lijst gescheiden door komma's - standaard : UNKNOWN.
accept: een door komma's gescheiden lijst van inhoudtypes
name: hiermee geef je het formulier een naam voor opmaak met Style Sheets of voor scripting. Het W3C raadt aan het attribuut id te gebruiken voor naamgeving.
Het FORM-element fungeert als container voor formulierelementen : tekstvakken, keuzelijsten, keuzerondjes, keuzevakjes,...
Het FORM-element kan ook andere elementen voor opmaak van de pagina bevatten.
Het INPUT-element
Het BUTTON-element
Het BUTTON-element functioneert net als een INPUT-element maar ondersteund meer opmaakmogelijkheden.
De eigenschappen van een BUTTON kan je instellen met volgende attributen:
name: de naam van de knop
value: standaardwaarde van de knop
type: het type knop
submit: verstuur de formuliergegevens
button: een drukknop waarvoor je zelf de actie kan definiëren.
reset: plaatst alle controls op hun standaardwaarde
In het volgende voorbeeld zie je een kleine toepassing met knoppen. Maak je voorlopig geen zorgen over de Javascript-code in het het onclick-attribuut van de eerste BUTTON.
Met TEXTAREA-element kan je een tekstvak met meerdere lijnen op het scherm brengen.
Attributen van het TEXTAREA-element:
name: naam van het element
rows: het aantal zichtbare lijnen
cols: aantal karakters zichtbaar naast elkaar
<form name="f4" action="../formscript.asp" method="post">
<textarea name="opmerkingen" rows="5" cols="30" >
Tik hier je opmerkingen
of je commentaar
</textarea><br>
<input type="submit" value="Verstuur !">
</form>
FIELDSET en LEGEND
Het FIELDSET-element staat je toe formulierelementen per onderwerp te groeperen.
Met het LEGEND element en het afgekeurde attribuut align kan je tekst op een FIELDSET-element plaatsen.
Er zijn voor een webpagina een aantal manieren om een element de focus te geven (ervoor zorgen dat het element actief is):
Het element aanklikken met bijvoorbeeld de muis
Het element aanduiden met het toestenbord (tab-toets)
Gebruik maken van een access key (sneltoets)
Tabvolgorde
Voor het vastleggen van de volgorde van controls bij bijvoorbeeld het drukken op de tab-toets kan je gebruik maken van het attribuut tabindex voor de controls die dit ondersteunen.
Je kent voor dit attribuut een positief getal tussen 0 en 32767 toe, de elementen worden geactiveerd van kleine naar grote waarde voor deze tabindex.
Elementen die disabled zijn worden niet opgenomen.
<form name="f5" action="../formscript.asp" method="post">
tweede veld: <input name="twee" type="text" value="" tabindex="2"><br>
eerste veld: <input name="een" type="text" value="" tabindex="1"><br>
derde veld: <input name="drie" type="text" value="" tabindex="3"><br>
<p><input type="submit" value="Verstuur !">
</form>
Access key (sneltoets)
Je kan met het attribuut accesskey ook een sneltoets voor een element vastleggen:
In een Windows-omgeving druk je ALT + sneltoets om het element te activeren.
Sommige elementen zoals hyperlinks vereisen wel nog een druk op de enter-toets.
