Brug af Datalist-Elementet til Foruddefinerede Inputforslag

Elementet <datalist> i HTML bruges til at oprette en foruddefineret liste af muligheder for et <input> element. Det giver brugeren mulighed for at vælge en mulighed fra listen, samtidig med at de har mulighed for at indtaste deres egen værdi, hvis de ønsker det. Listen over foruddefinerede værdier forbliver skjult, indtil brugeren begynder at skrive i det tilknyttede tekstfelt. <datalist> er parret med en id attribut, og <input> er forbundet til det ved hjælp af list attributten.

Samlet set kan <datalist> elementet være en nyttig måde at give en foruddefineret liste af muligheder for brugerne at vælge imellem, samtidig med at de stadig har fleksibiliteten til at indtaste deres egen værdi, hvis det er nødvendigt.

Eksempel

Når brugeren begynder at skrive i kategorifeltet, vil browseren vise de foruddefinerede kategorier fra datalist. Hvis ingen af mulighederne matcher brugerens input, kan de stadig skrive deres egen kategori. Dette giver brugeren mulighed for at vælge fra en liste og manuelt indtaste en værdi, hvis det er nødvendigt.

• <label for="category">: mærker inputfeltet, hvilket indikerer for brugeren, at de skal vælge eller indtaste en produktkategori;
• <input type="text" name="category" id="category" list="categories"/>: inputfeltet, hvor brugeren enten kan skrive en kategori eller vælge fra de tilgængelige muligheder. Attributten list="categories" forbinder dette input med datalist med ID'en categories;
• <datalist id="categories">: dette indeholder en liste over foruddefinerede produktkategorier. Disse muligheder vil dukke op som forslag, når brugeren begynder at skrive i inputfeltet;
• <option value="...">: hver option repræsenterer en produktkategori i listen. Brugeren kan vælge en af disse kategorier eller skrive deres egen værdi, hvis den ikke matcher nogen af mulighederne.