Zo kleed je de invulvelden van je formulier aan!
Als je een mailformulier op je website hebt staan met een aantal zoekvelden, kun je die 'aankleden' door er een standaard tekst in te plaatsen.
Stel, we hebben een zoekveld op een website staan en we willen daarin het woordje "Zoeken" laten zien. Laten we eens een simpel formulier maken met één tekstveld en een 'OK'-knop. De code ziet er zo uit.
<form action="script" method="post">
<input type="text" name="zoek">
<input type="submit" value="OK" class="button">
</form>
Hieronder zie je een screenshot van het resultaat:

Zoals je kunt zien heeft het tekstveld standaard geen waarde. Met het attribuut 'value' kun je het tekstveld een waarde geven. Zie het voorbeeld hieronder:
<form action="script" method="post">
<input type="text" name="zoek" value="Zoeken">
<input type="submit" value="OK" class="button">
</form>
Op een website zou het er dan zo uitzien:

Als je nu in het tekstveld klikt om er iets te typen, dan zul je merken dat je eerst het woordje 'Zoeken' moet weghalen voordat je je eigen tekst kunt typen. Mooier zou zijn dat als je in het tekstveld klikt, het woordje 'Zoeken' automatisch zou verdwijnen. Ook dit is mogelijk en wel met behulp van attributen die 'events' ofwel gebeurtenissen afhandelen. We beginnen met het tonen van de extra code die we moeten toevoegen om de bovenstaande gebeurtenis te kunnen verwerken:
onfocus="if(this.value=='Zoeken') this.value='';"
Deze regel code wil zeggen dat zodra het tekstveld de focus krijgt door er op te klikken (onfocus), de waarde 'Zoeken' verandert in ' ', dat zoiets betekent als een lege waarde. De waarde die het tekstveld toegewezen heeft gekregen is dus leeg. Het woordje 'Zoeken' verdwijnt nu automatisch uit het tekstveld en je kunt gelijk beginnen met typen. De volledige code ziet er zo uit:
<form action="script" method="post">
<input type="text" name="zoek" value="Zoeken" onfocus="if
(this.value=='Zoeken')
this.value='';">
<input type="submit" value="OK" class="button">
</form>
We kunnen nog een stapje verder gaan. Stel nu dat je geklikt hebt in het tekstveld. De waarde 'Zoeken' verdwijnt nu uit het tekstveld. We kunnen er nu ook voor zorgen dat deze waarde weer verschijnt als er buiten het tekstveld wordt geklikt. De code die dit doet, ziet er als volgt uit:
onblur="if(this.value=='') this.value='Zoeken';"
Deze regel code wil zeggen dat zodra het tekstveld de focus kwijtraakt door bijvoorbeeld buiten het tekstveld te klikken (onblur), de waarde ' ' verandert in 'Zoeken'. Het tekstveld krijgt dus een waarde toegewezen, namelijk 'Zoeken'. Het woordje 'Zoeken' verschijnt nu automatisch in het tekstveld. De volledige code ziet er zo uit:'
<form action="script" method="post">
<input type="text" name="zoek" value="Zoeken" onfocus="if
(this.value=='Zoeken')
this.value='';" onblur="if(this.value=='')
this.value='Zoeken';">
<input type="submit" value="OK" class="button">
</form>
De attributen onfocus en onblur zorgen in dit voorbeeld voor de afhandeling van een bepaalde gebeurtenis. Ze worden ook wel event-handlers genoemd.
Meer informatie over attributen en de gebeurtenissen waar ze betrekking op hebben, kun je vinden op http://www.handleidinghtml.nl/html/elementen/attributen/events.html .


