Wechseln zu: Navigation, Inhalt, Suche

Permalink

0

Suchformular à la HTML5

HTML5 ist im Kommen und mit ihm ein modifiziertes Formularelement, das Suchfelder durch Aussehen und Funktion von einem normalen Textfeld abgrenzen soll. Dafür bedient man sich des Attributs type im Element input, in das man search anstatt von text einfügt, sodass der Browser erkennen kann, dass es sich um ein Suchfeld handelt. Das Attribut placeholder bietet dabei einen Platzhalter im Eingabefeld, den man vorher nur mit JavaScript realisieren konnte.

Vorher

Safari: type="text"

Nachher

Chrome: type="search"

CSS

Eventuell vorhandenes CSS muss natürlich angepasst werden, wofür man folgende Selektoren benutzen kann.

Type: Text

Type: Search

Weitere Möglichkeiten

Opera: type="search"

Ergänzend bietet sich die Möglichkeit das Suchfeld mit dem Attribut pattern vor dem Absenden auf einen regulären Ausdruck zu prüfen. Da das Suchfeld mindestens irgendein Zeichen enthalten soll, kann man z.B. pattern=".+" angeben. Zusätzlich sollte man noch required="required" setzen, was quasi das gleiche bewerkstelligt. Opera erlaubt dann das Absenden einer leeren Suchanfrage nicht mehr.

Fazit

Ich denke, dass die neuen Attribute sicher in Zukunft das Webdesign vereinfachen werden. Zwar behandeln alte Browser das Suchfeld wie ein Textfeld zuvor, solange die Browser mit den Informationen aber noch unterschiedlich umzugehen, sollte man wohl noch abwarten. Ich habe den Code deshalb nach einer kurzen Testphase erst einmal wieder deaktiviert. Er ware zudem nicht XHTML 1.1 Valid.

Links

  • Kurz-URL

Kategorien Berichte, Browser, HowTo, WebDesign Schlagwörter , , , , , , ,

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.