Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/datalist below:

<datalist>: Das HTML Datenlisten-Element - HTML

Limited availability

Das <datalist> HTML-Element enthält eine Reihe von <option>-Elementen, die die zulässigen oder empfohlenen Optionen darstellen, die innerhalb anderer Steuerungselemente ausgewählt werden können.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

label {
  display: block;
  margin-bottom: 10px;
}

Um das <datalist>-Element an die Steuerung zu binden, geben wir ihm eine eindeutige Kennung im id-Attribut und fügen dann das list-Attribut zum <input>-Element mit der gleichen Kennung als Wert hinzu. Nur bestimmte Typen von <input> unterstützen dieses Verhalten, und es kann auch von Browser zu Browser variieren.

Jedes <option>-Element sollte ein value-Attribut haben, das einen Vorschlag repräsentiert, der in die Eingabe eingegeben werden soll. Es kann auch ein label-Attribut haben oder, wenn es fehlt, etwas Textinhalt, der vom Browser anstelle von value (Firefox) oder zusätzlich zu value (Chrome und Safari, als ergänzender Text) angezeigt werden kann. Der genaue Inhalt des Drop-down-Menüs hängt vom Browser ab, aber beim Klicken wird der Inhalt, der in das Steuerungsfeld eingegeben wurde, immer aus dem value-Attribut stammen.

Hinweis: <datalist> ist kein Ersatz für <select>. Ein <datalist> stellt keine eigene Eingabe dar; es ist eine Liste empfohlener Werte für eine zugehörige Steuerung. Die Steuerung kann immer noch jeden Wert akzeptieren, der die Validierung besteht, auch wenn er nicht in dieser Vorschlagsliste enthalten ist.

Dieses Element hat keine anderen Attribute als die globalen Attribute, die allen Elementen gemeinsam sind.

Wenn Sie sich entscheiden, das <datalist>-Element zu verwenden, sind hier einige Barrierefreiheitsthemen, die Sie beachten sollten:

• Die Schriftgröße der Optionen der Datenliste zoomt nicht, bleibt immer gleich groß. Die Inhalte des Autosuggests wachsen oder schrumpfen nicht, wenn der Rest der Inhalte vergrößert oder verkleinert wird.
• Da das Anvisieren der Optionsliste mit CSS sehr begrenzt bis nicht vorhanden ist, kann das Rendering nicht für den Hochkontrastmodus gestylt werden.
• Einige Kombinationen aus Bildschirmleser/Browser, einschließlich NVDA und Firefox, geben die Inhalte des Autosuggest-Popups nicht bekannt.

Empfohlene Werte in Typen text, search, url, tel, email und number werden in einem Drop-down-Menü angezeigt, wenn der Benutzer auf die Steuerung klickt oder doppelklickt. Typischerweise hat die rechte Seite einer Steuerung auch einen Pfeil, der auf das Vorhandensein vordefinierter Werte hinweist.

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

Die Typen month, week, date, time und datetime-local können eine Schnittstelle anzeigen, die eine bequeme Auswahl eines Datums und einer Uhrzeit ermöglicht. Vordefinierte Werte können dort angezeigt werden, sodass der Benutzer schnell den Steuerungswert ausfüllen kann.

Hinweis: Wenn diese Typen nicht unterstützt werden, wird stattdessen ein grundlegender text-Typ gerendert, der ein Textfeld erstellt. Dieses Feld wird empfohlene Werte korrekt erkennen und sie dem Benutzer in einem Drop-down-Menü anzeigen.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Wenn value-Attribute auf <option>-Elementen enthalten sind, die für eine Datalist bereitgestellt werden, die mit einem range-Eingabetyp verknüpft ist, werden sie als eine Reihe von Tickmarks angezeigt, die der Benutzer leicht auswählen kann.

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10" label="Minimum Tip"></option>
  <option value="20" label="Standard"></option>
  <option value="30" label="Generous"></option>
  <option value="50" label="Very Generous"></option>
</datalist>

Hinweis: Das label-Attribut soll Tickmarks beschriften, wie im HTML-Standard definiert. Die aktuelle Unterstützung durch Browser variiert jedoch; Labels werden möglicherweise nicht visuell oder als Tooltips angezeigt.

Der color-Typ kann vordefinierte Farben in einer vom Browser bereitgestellten Schnittstelle anzeigen.

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

• Das <input>-Element und insbesondere dessen list-Attribut;
• Das <option>-Element.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4