this → Artikel Baru – ( Atrikel Lama ↓ )

2 Contoh Penggunakan Fitur Autocomplete Menggunakan Tag Datalist HTML

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.

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

Pahami pula, tentang semua konsep desain Web untuk tingkat pemula melalui materi lengkap HTML [klik].


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:
 


Baca juga, tentang materi bahasa pemrograman lainnya melalui Materi Lengkap 

Bahasa Pemrograman [klik].


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:
  

Komentar

  1. Apa fungsi dari elemen datalist pada html?

    BalasHapus
    Balasan
    1. 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. Apa isi dari elemen datalist pada html?

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

      Hapus
  3. Apa perbedaan antara elemen datalis dan elemen select pada html?

    BalasHapus
    Balasan
    1. 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

Posting Komentar

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

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java

3 Jenis Utama Looping pada Java