Placeholder in HTML 5 formulieren

Eerder besprak ik de toevoeging van verschillende input-types in HTML5. Een andere nuttige uitbreiding op het <input>-element is het placeholder-attribuut. Hiermee kun je eenvoudig een tijdelijke tekst in een input-veld plaatsen om aan te geven wat je hier verwacht. In browsers die dit ondersteunen wordt de tekst weergegeven (lichter dan echte content) tot het veld de focus krijgt. Als het element leegblijft, of opnieuw leeg is komt de placeholder-tekst terug. In safari ziet dit er zo uit:

<input type="text" placeholder="je naam">
<input type="submit" value="Opslaan">

Het placeholder-attribuut wordt momenteel ondersteunt in Safari, Chrome, Opera en binnenkort ook in Firefox. Internet Explorer heeft helaas nog geen ondersteuning. Browsers die het attribuut niet begrijpen negeren het gewoon, dus het kan zonder risico worden gebruikt. Is de placeholder essentieel, dan kan gebruik worden gemaakt van technieken om het gedrag hiervan te kopiëren. Ik heb vaak gebruik gemaakt van de techniek die wordt besproken in ‘Making compact forms more accessible’ op A List Apart. Ook zijn er vele jQuery-plugins voor placeholders te vinden, die in sommige gevallen de content van het placeholder-attribuut gebruiken om een ‘nep’-placeholder te plaatsen.

Het is met dit attribuut een kleine moeite geworden een extra hint te geven aan de gebruiker van je formulieren. Als je goede voorbeelden van het gebruik van deze techniek ‘in het wild’ kent, hoor ik er graag van.

Geschreven door Joost van der Borg in de categorie: Webdesign