Memunculkan Fitur Autocomplete HTML Menggunakan Tag Datalist
 |
| Ilustrasi Tag Datalist HTML |
<datalist> ... </datalist>
<!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>
<!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>
- 6 Contoh Cara Membuat Teks Menjorok Menggunakan Tag Div HTML [klik]
- Cara Membuat Daftar Deskripsi Teks Menggunakan Tag DL HTML [klik]
- Cara Membuat Daftar Deskripsi Menggunakan Tag DT pada HTML [klik]
- 4 Atribut Utama untuk Menyematkan Aplikasi Eksternal Menggunakan Tag Embed HTML [klik]
- 3 Contoh Atribut Program Penggunaan Tag Font HTML [klik]
- 3 Atribut Utama Penggunaan Tag Form pada HTML [klik]
- 10 Atribuat Utama Penggunaan Tag Frame pada HTML [klik]
Apa fungsi dari elemen datalist pada html?
BalasHapusTag 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.
HapusApa isi dari elemen datalist pada html?
BalasHapusElemen datalist HTML berisi sekumpulan elemen < option > yang mewakili pilihan data yang diizinkan atau direkomendasikan untuk dipilih dalam kontrol tertentu.
HapusApa perbedaan antara elemen datalis dan elemen select pada html?
BalasHapusElemen 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