HTML/Tutorials/Formulare/Suchformulare

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Auch eine noch so ausgeklügelte Navigation und ein übersichtlicher Seitenaufbau können verhindern, dass Benutzer Ihrer Webseite gewünschte Inhalte nicht auf Anhieb finden. Hier ist ein schnell auffindbares Suchformular nötig, damit vorhandene Inhalte auch genutzt werden können.

In HTML/Tutorials/Formulare/Was_ist_ein_Webformular? erfahren Sie, was beim Absenden eines Suchformular passiert. In diesem Kapitel lernen Sie, wie Sie Suchformulare bedienungsfreundlicher gestalten, damit Nutzer Ihrer Webseite gewünschte Inhalte besser finden.

Anwendungsbeispiele

In allen Beispielen werden input-Eingabefelder vom type="search" verwendet. Veraltete Browser ignorieren das ihnen unbekannte Attribut.

animierte Suchfelder

Häufig soll ein Suchfeld in ein bestehendes Layout eingepasst werden und die Breite etwa eines Navigationslinks oder einer Sidebar einnehmen. Andererseits sollen bei einer Suche auch lange Eingaben vollständig zu sehen sein. Dies können Sie erreichen, indem Sie das Suchfeld mit CSS anders gestalten, wenn es durch eine Eingabe den focus erhält.

Beispiel ansehen …
<label for="suche">Suchbegriff eingeben</label> 
<input type="search" id="suche" placeholder="Suche...">

Das Eingabefeld vom type="search" erhält mit dem placeholder-Attribut einen sichtbaren Hinweis. Daneben wird mit dem label-Element eine Beschriftung hinzugefügt, die mit einem for-Attribut mit dem Eingabefeld verbunden wird.

Sie könnten auf das for-Attribut verzichten, wenn Sie das Eingabefeld innerhalb des label notieren. Allerdings ist die hier verwendete Reihenfolge für das spätere Gestalten des label wichtig.


Beispiel ansehen …
#suche {
  border: 2px solid #999;
  border-radius: 0.5em;;
  font-size: 1.2em;
  width: 10em;
  transition: width 0.5s ease-in-out;
}
 
#suche:focus {
  font-size: 1.5em;
  width: 50%;
}
Das Eingabefeld erhält einen dickeren grauen, abgerundeten Rand. Die Schriftgröße wird erhöht. Die Breite ist abhängig der Schriftgröße 10em breit. Sobald das Eingabefeld durch die Maus oder Tastatur angesteuert wird, erhält es den Fokus. Dies kann in CSS als Pseudoklasse mit anderen Formatfestlegungen definiert werden. So erhält das Suchfeld eine größere Schriftgröße und eine Breite von 50%. Durch die transition-Eigenschaft wird ein weicher Übergang von einer halben Sekunde erreicht.

Suchsymbol

Eine Lupe gilt als allgemein verständliches Symbol für ein Suchformular. Eine Einbindung einer externen Rastergrafik mit background-image würde aber einen zusätzlichen HTTP-Request benötigen.

Eleganter wäre die Darstellung eines Unicode-Zeichens, das stets passend skaliert. Es gibt die Unicode-Symbole U+1F50D LEFT-POINTING MAGNIFYING GLASS (🔍) und U+1F50E RIGHT-POINTING MAGNIFYING GLASS (🔎), die aber nicht in allen Schriftarten umgesetzt sind. Darüber hinaus darf input als replaced element keinen, auch keinen generierten Inhalt erhalten. Dies ist wichtig, da ein Unicode-Zeichen nicht als Hintergrundbild, sondern als (Text)Inhalt eines Pseudoelements eingebunden würde.

Aus diesem Grund wird im vorliegenden Beispiel eine base64-codierte SVG-Grafik in das CSS eingebunden.

Beispiel ansehen …
#suche {
  width: 10em;
  height: 60px;
  border: 2px solid #999;
  border-radius: 0.5em;
  font-size: 1.2em;
  transition: width 0.5s ease-in-out;
background:url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAASAAD
...
/pcwn9yppSVGRajT8fky+QWgk0+qdcu77uD5lZAAAAAAAA6Ux3AAEV6zGTp3RS5tlfaufCgBQf/9k=') no-repeat right;
}

#suche:focus {
  font-size: 1.5em;
  width: 50%;
}
Die SVG-Grafik sorgt für einen 3D-Look. Sie wird aber nicht referenziert, sondern als base64-codierte Grafik eingebunden, sodass kein weiterer HTTP-Request nötig ist.

minimalistische Variante

Beispiel ansehen …
#suche {
  width: 10em;
  border: none;
  border-bottom: 2px solid #999;
  font-size: 1.2em;
  transition: width 0.5s ease-in-out;
}
 
#suche:focus {
  font-size: 1.5em;
  width: 50%;
}
Das Suchformular ist unsichtbar und wird nur durch die untere Linie gekennzeichnet. Erst ein Klick auf das Schlagwort "Suche" zeigt den Textcursor.

Suchvorschläge mit datalist

Dieses Beispiel beschreibt, wie Sie in einem Eingabefeld die Eingabe durch Vorschläge aus einer Liste unterstützen können. Der Anwender kann diese Vorschläge annehmen, aber auch einen beliebigen anderen Text eingeben.

Browserunterstützung
caniuse.com

Im Idealfall werden Sucheingaben durch AjaX automatisch ergänzt. HTML5 kennt als Ergänzung das autocomplete-Attribut, das dann aus bisherigen Eingaben des Benutzers einen Wert errät und vorschlägt.

Darüberhinaus können Sie dem Benutzer mit dem datalist-Element von Ihnen gewählte, häufig verwendete Suchbegriffe vorschlagen.

Beispiel ansehen …
<form action="#">
  <p>
    <label>
      Vogelart
      <input type="search" list="Vögel">
      <datalist id="Vögel">
        <option value="Amsel"> 
        <option value="Buntspecht"> 
        <option value="Drossel"> 
        <option value="Eisvogel"> 
        <option value="Fink"> 
        <option value="Graugans"> 
        <option value="Meise">
        <option value="Spatz"> 
        <option value="Specht"> 
      </datalist> 
    </label>
    <button>finden!</button>
  </p>
</form>

|Hier ist ein Eingabefeld vom Typ search zu sehen, welches als Eingabemöglichkeiten verschiedene Vogelnamen vorschlägt. Der Zusammenhang zwischen dem Eingabefeld und der Liste an Vorschlägen wird dadurch hergestellt, dass der Bezeichner Vögel sowohl im list-Attribut des input-Elements, als auch im id-Attribut des datalist-Elements steht.

Wie geht es weiter?

Mit CSS können Sie Formulare beliebig gestalten, so z. B. hier mit dem neuen und flexiblen Grid layout:

Eingegebene Formulardaten müssen weiterverarbeitet werden. Hier führen folgende Tutorials weiter:

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Formulare/Suchformulare&oldid=88619“