Webtip: HTML5 Form Placeholders

Webtip: HTML5 Form Placeholders

In de webtip van een aantal weken geleden lieten we al zien hoe je op een kinderlijk eenvoudige manier video kunt embedden in HTML5. Vandaag nemen we wederom een nieuwe functie van HTML5 onder de loep, en wel de placeholders die gebruikt kunnen worden in webformulieren. Een placeholder is een tijdelijke tekst die bijvoorbeeld wordt weergegeven in een input-veld, zodra je hier op klikt verdwijnt deze, zodat je je eigen tekst kunt invoeren. Met de vorige versies van HTML moest je dit altijd doen met javascript, in HTML5 kunnen we nu gebruik maken van de 'placeholder'-functie.

Hoe werkt het?

Heel simpel, door in je input element 'placeholder="hier de gewenste tekst"' te plaatsen! Kijk maar eens naar onderstaand voorbeeldje, waar we ook gelijk zien dat je buttons op een nieuwe manier kunt gebruiken:

<form action="" method="get">
		<label for="email">E-mail:</label>
		<input id="email" name="email" placeholder="email@adres.nl" type="email" />

		<button type="submit"> Verzend </button>
	</form>

Demo

Bekijk de demo hier.

Reacties