HTML5-Combox im Browser
Manchmal sind Hybrid-Elemente zwischen Eingabefeldern und Auswahllisten die beste Lösung. Nämlich immer dann, wenn zwar die Möglichkeit einer freien Feldeingabe bestehen soll, aber häufige oder typische Werte zur Auswahl angeboten werden sollen. Sogenannte Comboboxen (auch als Kombinationsfelder bezeichnet). Obwohl diese Art von Hybrid-Element in grafischen Benutzeroberflächen seit langem zum Standardrepertoire gehört, existierte bis einschließlich HTML 4.01 in HTML kein entsprechendes Element. HTML5 führt eine Lösung ein, um diese Lücke zu schließen.
<form action="/cgi-bin/check-in.cgi" method="post"> <p>Staatsangehörigkeit:<br> <input type="text" name="staat" list="staatlist"> <datalist id="staatlist"> <option value="Deutsch"> <option value="Österreich"> <option value="Schweiz"> </datalist> </form>
Notieren Sie wie im Beispiel gezeigt zunächst ein einzeiliges Eingabefeld (<input type="text" …>). Wichtig ist, dass das <input>-Tag ein list-Attribut erhält. Diesem Attribut weisen Sie als Wert den ID-Namen eines Elements zu, in dem die zugehörige Angebotsauswahlliste notiert ist. Das entsprechende Element wird durch <datalist>…</datalist> markiert. Das einleitende <datalist>-Tag muss ein id-Attribut erhalten, damit die Verknüpfung zum Eingabefeld hergestellt werden kann. Der Wert des id-Attributs muss mit dem Wert des list-Attributs im <input>-Tag übereinstimmen.
Die Auswahlmöglichkeiten notieren Sie ähnlich wie bei Auswahllisten in Form von <option>-Tags — jedoch so wie im Beispiel gezeigt als Standalone-Tags mit value-Attribut. Die sichtbaren Listeneinträge bestehen aus den Werten, die Sie den value-Attributen zuweisen.
Die Auswahlliste wird angezeigt, wenn der Anwender den Cursor in das Eingabefeld bewegt. Die Anzeigebreite der Auswahlliste passt sich dem Eingabefeld an, solange alle Auswahllisteneinträge kürzer sind als die Breite des Eingabefeldes. Wenn Auswahllisteneinträge länger sind, nimmt die Auswahlliste entsprechend mehr Platz in Anspruch.
Der Browser sorgt automatisch dafür, dass nachfolgende Elemente von der dynamisch eingeblendeten Liste automatisch überdeckt werden. Die Auswahlliste bewirkt also auch keine automatische Verschiebung nachfolgender oder benachbarter Inhalte.
Die Elemente input, datalist und option sind mit CSS beeinflussbar, jedoch je nach verwendeter Benutzeroberfläche nicht beliebig manipulierbar.
Die Standalone-Notation der <option>-Tags müssen Sie, wenn Sie XHTML-konform arbeiten, in der Form <option /> notieren.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.