Membuat Daftar Data HTML Menggunakan Atribut List
 |
| Ilustrasi Atribut List HTML |
Kegunaan: digunakan bersamaan dengan elemen <input>.
Sintak:
<input list="name">
name merupakan string yang akan bekerja sebagai id dan akan digunakan untuk link ke elemen <input> dengan elemen <datalist>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
HTML Atribut List
</title>
</head>
<body>
<h1 style = "color:green">
HTML Atribut list
</h1>
<form
action="">
<label>
Nama Kendaraan:
</label>
<input list="cars">
<datalist id="kendaraan">
<option value="BMW"/>
<option value="Bentley"/>
<option value="Mercedes"/>
<option value="Audi"/>
<option value="Volkswagen"/>
</datalist>
</form>
</body>
</html>
Output:HTML Atribut list
<!DOCTYPE html>
<html>
<head>
<title>
Tag Datalist
</title>
</head>
<body style = "text-align:center">
<h1 style = "color:green">
HTML Atribut list
</h1>
<form action="">
<label>
Nama Kendaraan:
</label>
<input
list="cars"
id="KInput">
<datalist id="cars">
<option value="BMW"/>
<option value="Bentley"/>
<option value="Mercedes"/>
<option value="Audi"/>
<option value="Volkswagen"/>
</datalist>
<button onclick="klik()" type="button">
Click Here
</button>
</form>
<p id="output"></p>
<script type="text/javascript">
function klilk()
{
var o1
= document.getElementById("KInput").value;
document.getElementById("output").innerHTML
= "You select "
+ o1
+ " option";
}
</script>
</body>
</html>
Output:HTML Atribut list
- 2 Contoh Program Penggunaan Atribut Multiple pada HTML [klik]
- Penjelasan Singkat, Penggunaan Atribut Novalidate pada HTML [klik]
- 11 Atribut yang Tidak Dapat Menggunakan Atribut Onblur pada HTML [klik]
- 2 Contoh Penggunaan Atribut Oncopy pada File HTML [klik]
- 2 Contoh Program Penerapan Atribut Oncut pada File HTML [klik]
- 11 Elemen yang Tidak Bisa Menerapkan Penggunaan Atribut Onkeypress HTML [klik]
- 3 Event yang Digunakan pada Atribut Atribut Onmousedown HTML [klik]
5 komentar untuk "Membuat Daftar Data HTML Menggunakan Atribut List"
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 -
Apa fungsi list pada html?
BalasHapuslist HTML memungkinkan pengembang website untuk mengelompokkan satu set item terkait dalam daftar yang sama.
HapusAtribut list bersama dengan option membantu menyediakan pilihan untuk elemen input pada halaman website.
HapusApa yang dimaksud dengan atribut list pada html?
BalasHapusAtribut list mengacu pada elemen < datalist > yang berisi opsi yang telah ditentukan sebelumnya untuk elemen < input >.
Hapus