html5 placeholder attribuut
geef een duidelijke hint bij een invoerveld

home | index | menu | help

Er is geen CSS ondersteuning.


		
Placeholder voorbeeld


		

Het prettige aan progressive enhancement is dat als een browser niet in staat is om de dingen te doen die van hem verwacht worden, de bezoekers nooit door zullen hebben dat er iets op de pagina ontbreekt. Ik geef toe dat als een bezoeker eerst met google's chrome deze pagina opvraagt, en later bij een kennis (of iemand anders) deze pagina weer opent, maar dan in een browser die nog niet helemaal "html5" is, het verschil natuurlijk wél zal opvallen. Maar wat maakt dat uit?

Je moet er rekening mee houden dat de browsers steeds moderner zullen worden, dus er is geen enkele reden om html5 "links te laten liggen". Dit geldt ook voor het placeholder attribuut. Het "placeholder-gebeuren" laat nog eens goed zien hoe prettig het is om met html5 te werken. Zonder een snippertje extra code kan je nu bij een (willekeurige) invoer alvast wat voorbeeld-tekst toevoegen, zonder dat jij je in bochten moet wringen om in de gaten te houden of de bezoeker wel wat invult, of dat de bezoeker op een ander moment het veld weer leegmaakt of iets dergelijks. Als de bezoeker niets in een "placeholder-veld" invult, zal de voorbeeld-tekst genegeerd worden. De browser doet al het werk voor ons. Test deze pagina maar in Chrome, dan is alles duidelijk...

Voor het voorbeeld ga ik geen extra code-pagina aanmaken. De paar regeltjes code zijn zo duidelijk, en zo eenvoudig, dat ik ze gewoon hieronder op de pagina bijvoeg.



<fieldset>
	<legend>Placeholder voorbeeld</legend>
	<p>
		<label>Naam: <input type="text" name="naam" placeholder="bobik"></label>
	</p>
</fieldset>		
		

cache 04-10-2010