HTML/Tutorials/Formulare/Suchformulare
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.
Inhaltsverzeichnis
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.
<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.
#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%;
}
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.
#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%;
}
- css-tricks: building-resizeable-components-relative-css-units
- tutsplus: css-experiments-with-a-search-form-input-and-button
minimalistische Variante
#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%;
}
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.
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.
<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?
- Wie fange ich an?
- HTML
- Einstieg in HTML
- Einstieg in Formulare
- CSS
- Einstieg in CSS
- Einstieg in Grid Layout
- fertige Layouts
- Seitenvorlagen (Templates) zum Herunterladen
- JavaScript
- Einstieg in JavaScript
- Formulare und Javascript (überarbeitet 2020)
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:
- JavaScript/Tutorials/Formulare/Eingaben mit JavaScript validieren
- PHP/Tutorials/Formulardaten serverseitig auswerten
Weblinks
- tutsplus: CSS Experiments With a Search Form Input and Button
- sridharkatakam.com: How to make search form input box text go away on focus in Genesis
- callmenick: Various CSS Input Text Styles
- css-tricks: Building Resizeable Components with Relative CSS Units A Search Input with Icon (Mitte der Seite)