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
HTML
<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.

HTML
<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.

SOURCE
<!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>



Comments