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 value="JNE">
    <option value="TIKI">
  </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>POS Indonesia
      <option>JNE
      <option>TIKI
    </select>
  </label>
</datalist>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <datalist>
Code Editor