HTML datalist tag | belajar <datalist> element
Referensi Belajar HTML datalist tag. Tutorial dan panduan mengenai element <datalist>...</datalist>
yang digunakan untuk menulis data sebuah daftar pilihan input. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <datalist>.
Deskripsi
Penjelasan HTML datalist
HTML <datalist>
tag digunakan untuk merepresentasikan daftar opsi (pilihan) yang diberikan pada sebuah input control dengan daftar pilihan (masukkan) yang sebelumnya sudah terdefinisikan (predefined options).
HTML element <datalist>
merupakan element tersembunyi yang tidak ditampilkan secara langsung pada jendela browser.
<datalist>
element ditulis bersamaan dengan element <input>
sebagai pilihan masukkan yang diberikan dari daftar option
di dalam <datalist> tersebut. Sehingga, pada <input>
control tersebut tersedia daftar pilihan otomatis yang dapat dipilih tanpa mengetik ulang.
Dalam penggunaannya, <datalist>
element harus ditulis dengan nama id
tertentu yang nantinya nama id
tersebut digunakan sebagai value dari attribute list
di dalam <input>
element.
Global Attributes
Atribut Secara Global (Keseluruhan)
<datalist> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<datalist> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <datalist>
element
Contoh 1
<label>
Jasa Pengiriman / Kurir:
<input list="kurir" />
<datalist id="kurir">
<option value="POS Indonesia"></option>
<option value="JNE"></option>
<option value="TIKI"></option>
</datalist>
</label>
Contoh 2
Contoh HTML <datalist>
element cross-browser support. Digunakan untuk dukungan browser lama yang tidak support.
<label>
Jasa Pengiriman / Kurir:
<input name="ekspedisi2" list="kurir2" />
</label>
<datalist id="kurir2">
<label>
Atau Pilih dari daftar:
<select name="ekspedisi2">
<option value=""></option>
<option>POS Indonesia</option>
<option>JNE</option>
<option>TIKI</option>
</select>
</label>
</datalist>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo HTML datalist tag</title>
<style>
</style>
</head>
<body>
<h2>Contoh 1 </h2>
<label>
Jasa Pengiriman / Kurir:
<input list="kurir" />
<datalist id="kurir">
<option value="POS Indonesia"></option>
<option value="JNE"></option>
<option value="TIKI"></option>
</datalist>
</label>
<hr />
<h2>Contoh 2 </h2>
<label>
Jasa Pengiriman / Kurir:
<input name="ekspedisi2" list="kurir2" />
</label>
<datalist id="kurir2">
<label>
Atau Pilih dari daftar:
<select name="ekspedisi2">
<option value=""></option>
<option>POS Indonesia</option>
<option>JNE</option>
<option>TIKI</option>
</select>
</label>
</datalist>
</body>
</html>
SHARE