Attributen
Dit element heeft geen andere attributen dan de globale attributen, die alle elementen gemeen hebben.
Toegankelijkheid
Bij de beslissing om het <datalist>-element te gebruiken, zijn hier enkele toegankelijkheidskwesties waar u rekening mee moet houden:
- De lettergrootte van de opties van de datalist zoomt niet mee en blijft altijd even groot. De inhoud van de automatische suggestie groeit of krimpt niet wanneer de rest van de inhoud wordt in- of uitgezoomd.
- Aangezien het targeten van de lijst met opties met CSS zeer beperkt tot niet-bestaand is, kan de weergave niet worden gestyled voor de hoogcontrastmodus.
- Sommige combinaties van schermlezer/browser, waaronder NVDA en Firefox, kondigen de inhoud van de automatische suggestiepop-up niet aan.
Voorbeelden
Tekstuele typen
Aanbevolen waarden bij de typen text, search, url, tel, email en number worden weergegeven in een vervolgkeuzemenu wanneer de gebruiker op het besturingselement klikt of dubbelklikt.
Doorgaans heeft de rechterkant van een besturingselement ook een pijl die wijst op de aanwezigheid van vooraf gedefinieerde waarden.
<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>Datum- en tijdtypen
De typen month, week, date, time en datetime-local kunnen een interface tonen waarmee handig een datum en tijd kunnen worden geselecteerd.
Vooraf gedefinieerde waarden kunnen daar worden getoond, zodat de gebruiker de waarde van het besturingselement snel kan invullen.
Wanneer deze typen niet worden ondersteund, wordt in plaats daarvan een basaal text-type weergegeven, waarmee een tekstveld wordt gemaakt. Dat veld herkent aanbevolen waarden correct en toont ze aan de gebruiker in een vervolgkeuzemenu.
<input type="time" list="popularHours" />
<datalist id="popularHours">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>Range-type
Wanneer value-attributen zijn opgenomen in <option>-elementen die zijn opgegeven voor een datalist die is gekoppeld aan een invoertype range, worden deze weergegeven als een reeks tikmarkeringen die de gebruiker gemakkelijk kan selecteren.
<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>
Het label-attribuut is bedoeld om labels voor tikmarkeringen te bieden, zoals gedefinieerd in de HTML Standard. De huidige browserondersteuning varieert echter; labels worden mogelijk niet visueel of als tooltips weergegeven.
Color-type
Het type color kan vooraf gedefinieerde kleuren tonen in een door de browser aangeboden interface.
<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>Technische samenvatting
| Contentcategorieën | Flow content, phrasing content. |
|---|---|
| Toegestane inhoud |
Ofwel
phrasing content
of nul of meer <option>-elementen.
|
| Weglaten van tags | Geen, zowel de begin- als eindtag zijn verplicht. |
| Toegestane bovenliggende elementen | Elk element dat phrasing content accepteert. |
| Impliciete ARIA-rol | listbox |
| Toegestane ARIA-rollen | Geen role toegestaan |
| DOM-interface | HTMLDataListElement |