Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Memunculkan Fitur Autocomplete HTML Menggunakan Tag Datalist

Dipublikasikan Oleh: elfanmauludi 6 komentar
Tag <datalist> digunakan untuk menyediakan fitur autocomplete pada file atau dokumen html yang dapat digunakan dengan input tag sehingga pengguna dapat dengan mudah mengisi data form menggunakan pilihan data yang disediakan oleh fitur tersebut.


Sebelum memahami lebih dalam materi tentang Memunculkan Fitur Autocomplete HTML Menggunakan Tag Datalist, terlebih dahulu pelajari materi tentang: Pengaturan Data HTML Menggunakan Tag Data, Pengaturan Grup Kolom HTML Menggunakan Tag Colgroup, dan Mengatur Kolom HTML Menggunakan Tag Col.

Sintak: <datalist> ... </datalist>

Baca Juga: 

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<form action="">

 

<label>

Nama Kendaraan:

</label>

 

<input list="cars">

 

<!-- Tag datalist start -->

<datalist id="cars">

<option value="BMW"/>

<option value="Bentley"/>

<option value="Mercedes"/>

<option value="Audi"/>

<option value="Volkswagen"/>

</datalist>

<!--Tag datalist Tag end -->

 

</form>

 

</body>

 

</html>

Output:
 

Contoh: object dapat dengan mudah diakses oleh tipe atribut input.

<!DOCTYPE html>

<html>

 

<body>

 

<form action="">

 

<label>

Nama Kendaraan:

</label>

 

<input 

list="cars" 

id="carsInput" />

 

<!-- Tag datalist start -->

<datalist id="cars">

<option value="BMW" />

<option value="Bentley" />

<option value="Mercedes" />

<option value="Audi" />

<option value="Volkswagen" />

</datalist>

<!-- Tag datalist end -->

 

<button 

onclick="datalistcall()" 

type="button">

Klik Disini

</button>

 

</form>

 

<p id="output"></p>

<!-- Akan menampilakn opsi select -->

 

<script type="text/javascript">

function datalistcall() 

{

var o1 = document.getElementById("carsInput").value;

document.getElementById("output").innerHTML =

"You select " + o1 + " option";

}

</script>

 

</body>

 

</html>

Output:
  

Artikel ini didedikasikan kepada: Nor Rahmawati Libeti Putri, Nurani Mutiara Hafizhah, Oryza Sativa Noorastry, Puja Putri Cahyani, dan Rendi Satria Wibowo.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Memunculkan Fitur Autocomplete HTML Menggunakan Tag Datalist"

  1. AnonimSelasa, 08 Juni 2021 pukul 11.52.00 WIB

    Apa fungsi dari elemen datalist pada html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 08 Juni 2021 pukul 11.53.00 WIB

      Tag datalist pada HTML digunakan untuk menyediakan fitur kelengkapan otomatis pada elemen formulir. Tag ini memberikan daftar opsional atau pilihan yang telah ditentukan sebelumnya terhadap user untuk dapat dipilih ketika formulir tersebut akan digunakan. Tag datalis harus digunakan dengan elemen input yang berisi atribut daftar. Nilai atribut daftar ditautkan dengan id dari datalist pada dokumen html.

      Hapus
  2. AnonimSelasa, 08 Juni 2021 pukul 11.54.00 WIB

    Apa isi dari elemen datalist pada html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 08 Juni 2021 pukul 11.54.00 WIB

      Elemen datalist HTML berisi sekumpulan elemen < option > yang mewakili pilihan data yang diizinkan atau direkomendasikan untuk dipilih dalam kontrol tertentu.

      Hapus
  3. AnonimSelasa, 08 Juni 2021 pukul 11.56.00 WIB

    Apa perbedaan antara elemen datalis dan elemen select pada html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 08 Juni 2021 pukul 11.56.00 WIB

      Elemen select digunakan untuk menyajikan pilihan untuk user yang WAJIB dipilih salah satu dari beberapa pilihan yang disediakan. SEdangkan datalist menyajikan daftar nilai atau list yang disarankan terhadap bidang formulir input atau teks yang berkaitan dengan user, dan sifatnya adalah bebas (SUNNAH) atau bisa memilih dari pilihan sendiri yang diketikkan ke dalam form input.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -