Menu

Developers

HTML5-element voor zoekopdracht-veld

11 mei 2011

De HTML5-specs bieden allerlei nieuwe formulier-elementtypen. En het mooie ervan is dat je ze allemaal al kan gebruiken, want als een browser een type niet herkent valt hij automatisch terug op type 'text'. De meeste nieuwe elementtypen zijn bedoeld om een bepaald soort input te vereenvoudigen en te kunnen valideren.

Zo is er een type 'search' wat door de browser kan worden gepresenteerd als een voor het platform herkenbaar zoekveld. Dit is wat de HTML5-draft er over zegt:

The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.

Op dit moment biedt alleen Safari deze functionaliteit. Als je onze demo-site in deze browser opent zie je in de hoofdnavigatie een 'quicksearch' formuliertje met daarin de mogelijkheid om (als je een zoekopdracht hebt ingetypt) het veld leeg te maken met een kruisje:


Hier de html voor het element:

<input type="search" name="q" placeholder="Zoekopdracht..." value="">
<input type="submit" value="Ok">

Je ziet hierin ook het 'placeholder' attribuut. Dat wordt gebruikt om te tonen als het veld leeg is:

Het placeholder-attribuut werkt niet alleen voor type="search" element, maar ook voor andere elementtypen. Zonder javascript. Mits je browser het ondersteunt natuurlijk, maar anders kun je eenvoudig terugvallen op een methodiek met javascript, waarbij je gebruik maakt van het placeholder-attribuut.

blog comments powered by Disqus

Nieuwsbrief ontvangen?

Velden met een * zijn verplicht

Like ons op Facebook

Klik hieronder om ons te liken op Facebook.