datalist voor bereik-/kleurinvoer biedt enkele standaardkeuzes

Chrome ondersteunt datalist voor input[type=text] in Chrome 20. datalist helpt ontwikkelaars aanbevolen waarden te bieden, terwijl gebruikers tegelijkertijd de vrijheid krijgen om willekeurige waarden te schrijven. Vanaf Chrome 23 kunt u datalist ook gebruiken voor input[type=range] en input[type=color] !

invoer[type=bereik]

datalist voor input[type=range] introduceert de mogelijkheid voor ontwikkelaars om indicatoren naast de schuifregelaar weer te geven, zoals hieronder weergegeven:

Bereikdatalijst.
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>

Door de schuifduim op de invoer te verplaatsen, klikt u op elk van de vinkjes, zodat gebruikers zich gemakkelijk aan die waarden kunnen aanpassen.

invoer[type=kleur]

input[type=color] wordt al ondersteund in Chrome en Opera. Gebruikers kunnen willekeurige kleuren kiezen zonder hulp van JavaScript-plug-ins.

Door datalist toe te voegen aan input[type=color] kunnen gebruikers nu een kleur kiezen uit door de ontwikkelaar geselecteerde kleurstalen, maar ook zelf een willekeurige kleur kiezen uit een kleurenkiezer.

Kleurdatalist.
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
    <option>#ff0000</option>
    <option>#0000ff</option>
    <option>#00ff00</option>
    <option>#ffff00</option>
    <option>#00ffff</option>
</datalist>

Houd er rekening mee dat datalist voor input[type=color] alleen de hexadecimale kleurwaarden accepteert (bijv. #ff0000 ) en waarden zoals #f00 of red zullen niet werken.

Bezoek een demopagina om deze nieuwe functies in actie te zien.