HTML - Tekst invoerveld (Input)


Je ziet het vast wel eens, een zoekveld waar al het woord 'Zoeken' in is geplaatst en op het moment dat je in het veld klikt om je zoekopdracht te typen dan verdwijnt het woord. Al geplaatste woorden in velden zijn verder bijvoorbeeld ook vaak te zien in formulieren.

Het instellen van een dergelijke vaste tekst kan op twee manieren gedaan worden.

Als eerste is er een HTML5 attribuut waar dit mee gedaan kan worden maar dit werkt niet in oudere browsers zoals Internet Explorer 7 en 8 die geen ondersteuning bevatten voor HTML5. Zodoende hieronder voor oudere browsers nog een alternatief al is het tegenwoordig niet echt meer nodig om voor deze oude browsers dit alternatief in te stellen.

Het gaat om het toevoegen van placeholder zoals hieronder in de code. De tekst die je hier invult zal standaard worden getoond in het veld waarvan hieronder een voorbeeld.

<input type="text" value="" placeholder="Zoeken";" />


Oudere browsers

Wil je graag alle browsers ondersteunen dan kan de bovenstaande manier komen te vervallen en in plaats daarvan kan de onderstaande code worden gebruikt.

value="Zoeken op WebSonic.nl" onblur="if(this.value=='') this.value='Zoeken op WebSonic.nl';" onfocus="if(this.value=='Zoeken op WebSonic.nl') this.value='';"


In zijn geheel komt de code van het invoerbeld er als volgt uit te zien.

<input type="text" value="Zoeken op WebSonic.nl" onblur="if(this.value=='') this.value='Zoeken op WebSonic.nl';" onfocus="if(this.value=='Zoeken op WebSonic.nl') this.value='';" />