HTML Tutorial

HTML-tagg: <datalist>

Vad är <datalist>?

<datalist> är en HTML-tagg som tillhandahåller en lista med alternativ som användaren kan välja från när de fyller i ett formulärfält. Detta hjälper användare att ange data snabbt och korrekt, särskilt när de anger information som kan ha flera möjliga värden.

Attribut för <datalist>

  • id: Ett unikt ID för datalistan.
  • list: ID:t för den lista som ska associeras med datalistan.

Användning av <datalist>

  1. Skapa en <datalist>-tagg med ett unikt ID.
  2. Skapa ett <select>-fält och ange <datalist>-ID:t i dess datalist-attribut.
  3. Skapa <option>-element inom <datalist>-taggen för att representera de tillgängliga alternativen.

Exempel med <datalist>

<datalist id="states">
  <option value="CA">Kalifornien</option>
  <option value="NY">New York</option>
  <option value="FL">Florida</option>
</datalist>

<label for="state">Välj en delstat:</label>
<input list="states" name="state" id="state">

Utfforska <datalist>-taggen

  1. Öppna ett formulär.
  2. Lägg till en <datalist> med ett ID, t.ex. "my-datalist".
  3. Lägg till ett <select>-fält och ange "my-datalist" i dess datalist-attribut.
  4. Lägg till <option>-element inom <datalist> med värden och visningsnamn för alternativen.
  5. Fyll i <select>-fältet och använd piltangenterna för att navigera bland alternativen.

Tillgänglighetstips

  • Använd aria-labelledby-attributet för att associera datalistan med en beskrivande etikett.
  • Använd aria-required="true" för obligatoriska datalistor.
  • Tillhandahåll ett fallback-alternativ för icke-stödda webbläsare med hjälp av