Textfeld für Sucheinträge im Macintosh-Stil

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Ein Suchfeld im Safari-Browser soll im Macintosh-eigenen Stil dargestellt werden, wie in der nächsten Abbildung gezeigt.

Lösung

Verwenden Sie die Safari-eigenen HTML-Erweiterungen.

Versehen Sie ein HTML-Formular mit einem Eingabeelement und setzen Sie den Wert für das Attribut type auf search:

<form method="get" action="/search.php">
  <div>
    <label for="q">Suchen</label>
    <input type="search" placeholder="keywords" autosave="com.domain.search" results="7" name="q" />
  </div>
</form>

Das Safari-eigene Suchfeld

Abbildung: Das Safari-eigene Suchfeld.

Diskussion

Apples Safari-Entwickler haben eine Erweiterung für HTML-Formulare entwickelt, die eine robustere Benutzerschnittstelle ermöglichen soll. Alle Browser außer Safari stellen das Eingabefeld als normales Textfeld dar, das aber weiterhin als Suchfeld verwendbar ist.

Attribute für das Suchfeld

Das Attribut placeholder ermöglicht es Webentwicklern, einen Platzhaltertext im Suchfeld anzuzeigen. Dieser entspricht dem Text für das Attribut value in einem normalen Texteingabefeld, wie in folgender Abbildung gezeigt:

<label for="fmwebsite">Website:</label>
<input type="text" name="fmwebsite" value="http://" />

Eingabefeld in Safari

Abbildung: Ein Eingabefeld in Safari.

Der Unterschied zwischen placeholder und value liegt darin, dass Benutzer den durch value im Textfeld platzierten Text manuell entfernen müssen, bevor sie einen eigenen Wert eingeben können.

Warnung:
Es wird davon abgeraten, die Attribute value und placeholder für das gleiche Suchfeld gemeinsam zu verwenden, da der Wert von value den Wert des Platzhalters in Safari überschreibt. Hierdurch müssen auch die Benutzer von Safari den Text manuell entfernen, und die zusätzliche Funktionalität, die placeholder ermöglicht, geht wieder verloren.

Mit dem Attribut autosave kann festgelegt werden, ob bereits eingegebene Suchbegriffe auf dem Rechner des Benutzers gespeichert werden sollen. Klickt der Benutzer auf das Vergrößerungsglas-Icon, wird eine Liste der eingegebenen Suchbegriffe angezeigt (siehe folgende Abbildung).

Gespeicherte Suchbegriffe werden unterhalb des Suchfelds angezeigt

Abbildung: Gespeicherte Suchbegriffe werden unterhalb des Suchfelds angezeigt.

Dem Attribut results kann ein numerischer Wert übergeben werden, der die Anzahl der Suchbegriffe definiert, die auf dem Rechner des Benutzers gespeichert werden sollen.

Die gesicherten Suchbegriffe können so dargestellt werden, dass die Begriffe für eine Site auch für andere Sites verwendet werden können. Benutzen zwei Sites den gleichen Wert für autosave, so erscheinen die Suchbegriffe ebenfalls in den Suchfeldern für beide Sites. Diese Technik kann verwendet werden, um die gleichen Begriffe für unterschiedliche Domains in einem gemeinsamen Netzwerk anzuzeigen. Der Benutzer hat Zugriff auf die gespeicherten Begriffe beider Sites, wodurch autosave die Bedienbarkeit der Website erhöhen kann.

Best Practices

Das Safari-eigene Suchfeld benötigt keinen zusätzlichen Submit-Button. Sie sollten dieses Suchfeld also nur in Formularen verwenden, die mit einem Eingabefeld auskommen. Bei Formularen, die nur ein input-Element enthalten, reicht es aus, die Enter- oder Eingabetaste zu betätigen, um das Formular abzuschicken. Enthält das Formular dagegen mehrere input-Elemente, so benötigt der Browser möglicherweise einen Submit-Button, damit das Formular auch versandt werden kann.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln