5. Juli 2010

HTML5-Suche

HTML5 bietet ein paar nette neue Attribute, die zum Beispiel dem Suchfeld zugute kommen können:
<input type="search" … />
Der Wert search anstelle von text im type-Attribut des input-Elements bewirkt, dass der Browser erkennt, dass es sich um ein Suchfeld handelt, und nicht nur um ein x-beliebiges Eingabefeld.

Mit dieser Information wissen die Browser momentan noch unterschiedlich umzugehen: Microsoft-Browser wie üblich gar nicht, Chrome und Safari unter OS X aber machen das Suchfeld rund, wie in OS X gewohnt, und bieten eine Liste mit vorherigen Suchanfragen an.
Achja: alte Browser behandeln das Suchfeld wie ein normales Text-Eingabefeld, also keine Probleme von dieser Seite.

Eine andere nette Sache ist das Attribut pattern. Hier kann ein regulärer Ausdruck angegeben werden, nach dem der Eintrag matchen muss. Für das Suchfeld bietet sich hier etwas wie pattern=".+" an, wodurch mindestens ein Zeichen eingegeben muss. Dazu empfiehlt sich noch ein required="required", was im Prinzip das gleiche macht. Aber jeder Browser interpretiert natürlich mal wieder ein paar andere Attribute, man kennt das ja. Mit beidem ist man auf der sicheren Seite.

Und noch etwas sinnvolles bietet HTML5: placeholder
Wollte man bisher einen Platzhalter in einem Eingabefeld haben, musste man zu Javascript greifen, damit der Text auch verschwindet, wenn man in das Feld klickt. Das placeholder-Attribut übergibt diese Aufgabe an den Browser.