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>.
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
| Chrome | 20 |
|---|---|
| Safari | - |
| Firefox | 4 |
| Opera | 9.5 |
| IE | 10 |
| Edge | Ya |
Mobile
| Android Webview | 33 |
|---|---|
| Chrome Android | 33 |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | ? |
| iOs Safari | - |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<datalist>, biasanya mempunyai nilai default :
datalist {
display: none;
}