tRikSonic
Tema

HTML datalist Tag

Terakhir diperbarui : 24 Mei 2018 - 22.17
HTML datalist Tag - belajar html <datalist>, element <datalist> mempunyai definisi sebagai daftar pilihan yang telah ditetapkan pada element <input>. dan element <datalist> merupakan element tersembunyi atau tidak terlihat pada sebuah browser, dan akan terlihat ketika user melaukan interaksi kepada element <input> yang sudah dikaitkan dengan element <datalist>.
background html
Element <datalist> tag digunakan untuk memberikan "autocomplete" pada elemen <input>. Dalam penggunaanya element <datalist> akan menampilkan daftar drop-down yang telah ditentukan pada input data.

Contoh html element <datalist> :

<form>
  Harga :
  <input list="harga" type="text"/>
  <datalist id="harga">
    <option value="25.000,-">25.000,-</option>
    <option value="35.000,-">35.000,-</option>
    <option value="25.000,-">Normal 50.000,- diskon 50%</option>
    <option value="55.000,-">55.000,-</option>
    <option value="65.000,-">65.000,-</option>
    <option value="75.000,-">75.000,-</option>
  </datalist>
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<form>
  Harga :
  <input list="harga" type="text"/>
  <datalist id="harga">
    <option value="25.000,-">25.000,-</option>
    <option value="35.000,-">35.000,-</option>
    <option value="25.000,-">Normal 50.000,- diskon 50%</option>
    <option value="55.000,-">55.000,-</option>
    <option value="65.000,-">65.000,-</option>
    <option value="75.000,-">75.000,-</option>
  </datalist>
</form>

</body>
</html>

Global Attributes:

Element <datalist> mencakup Global Attributes HTML.

Event Attributes:

Element <datalist> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome20
Safari-
Firefox4
Opera9.5
IE10
EdgeYa

Mobile

Android Webview33
Chrome Android33
Edge MobileYa
Firefox Android4
Opera Android?
iOs Safari-
Samsung InternetYa

Default CSS :

Browser yang support dengan element <datalist>, biasanya mempunyai nilai default :
datalist { 
    display: none;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.