Welkom op de vernieuwde website van AlphamegaHosting.com!

Zo kleed je de invulvelden van je formulier aan!

Jeroen Hoekstra | 2006-09-20 | Webdesign

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 .

Zoek

Doe mee! Word ook WebsiteSupporter!

Ontvang gratis elke week een verbetersuggestie voor je website, inclusief speciaal stappenplan om je site succesvol te maken.

Klik hier om je in te schrijven!

Domeinnaam-check

Domeinnamen v.a. € 1,- p/m. Check of jouw ideale domeinnaam nog vrij is:

www.

Even onthouden

Moet er iets aan je site gebeuren?

En heb je zelf geen tijd, geen zin of geen idee hoe je het moet aanpakken? Laat ons website-klusteam het voor je oplossen!

Klik hier voor meer info. 

Thema van de week:

Hallo Google! Welkom op mijn website!

De scripts van Google die regelmatig langskomen om je site te indexeren zijn natuurlijk ook 'bezoekers' die je het naar de zin moet maken. In het artikel van deze week leer je hoe je die 'crawlers' de juiste info kunt meegeven.

Klik hier voor het artikel.

Informatie

Hopelijk vind je alle informatie die je nodig hebt op deze website. Heb je nog vragen? Klik hier om een bericht te sturen of bel tijdens kantoor-uren met 040-2085353 (NL) of 011/547498 (B).

Ben jij een startende ondernemer?

Dan hebben wij een handig gratis ebook om je op weg te helpen met je online presentatie.

Klik hier om het gratis te downloaden.

Alphamega Hosting heeft een unieke garantie!
Privacy Contact Sitemap Copyright 2012 Alphamega Hosting B.V.