HTML datalist tag | belajar <datalist> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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
Previous Article Next Article