Suurin ongelma liittyy HTML:รครคn
<datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
1. Tรคmรค koodi luo HTML-elementin nimeltรค datalist, jota kรคytetรครคn luomaan luettelo syรถttรถkentรคn vaihtoehdoista.
2. Tietoluettelossa on id-attribuutti "selaimet".
3. Tietoluettelon sisรคllรค on viisi vaihtoehtoelementtiรค, joista jokaisella on arvoattribuutti, joka sisรคltรครค verkkoselaimen nimen (Chrome, Firefox, Internet Explorer, Opera ja Safari).
4. Nรคitรค arvoja kรคytetรครคn ehdotuksina, kun kรคyttรคjรค kirjoittaa tรคhรคn tietoluetteloon liittyvรครคn syรถttรถkenttรครคn.
Mikรค on dataluettelotunniste
HTML
Mitรค eroa on Datalistin ja pudotusvalikon vรคlillรค
Tietolista on HTML-elementti, joka tarjoaa luettelon vaihtoehdoista, joista kรคyttรคjรค voi valita. Se on samanlainen kuin pudotusvalikko, mutta suurin ero on, ettรค sen avulla kรคyttรคjรคt voivat syรถttรครค omat arvonsa. Kรคyttรคjรค voi kirjoittaa syรถttรถkenttรครคn ja tietolista tarjoaa ehdotuksia kirjoittamiensa tietojen perusteella. Pudotusvalikosta sen sijaan kรคyttรคjรคt voivat valita vain ennalta mรครคritetyistรค vaihtoehdoista. Lisรคksi tietoluettelon avulla kรคyttรคjรคt voivat kirjoittaa minkรค tahansa arvon, vaikka sitรค ei olisikaan luettelossa.
Kuinka kรคyttรครค datalistaa HTML-muodossa
HTML
Datalist-elementin kรคyttรคmiseksi sinun on ensin luotava HTML-lomake, jossa on elementti ja anna sille id-attribuutti. Tรคmรคn jรคlkeen voit lisรคtรค tietoluetteloelementin lomakkeen sisรครคn ja asettaa sen lista-attribuutin yhtรค suureksi kuin syรถttรถkentรคn id. Voit lisรคtรค tietoluetteloon yhden tai useamman
Esimerkiksi: