Cara Membuat List Input Menggunakan HTML5
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Di panduan kali ini saya akan mencoba membagi Cara Merancang List Input Menggunakan HTML5.
Tag <datalist> yaitu seperangkat faktor <option> yang mewakili alternatif standar bagi kontrol lainnya. Hal ini memungkinkan <datalist> faktor yang akan digunakan bagi memberikan fitur “autocomplete” di faktor form. Sahabat dapat menggunakan <datalist> tag bagi memberikan daftar alternatif yang telah ditetapkan kepada pengguna dikala mereka input data.
Misalnya, ketika pengguna mulai memasukkan teks ke pada teks <input> buah favorit, di form <input> akan muncul beberapa pilahan buah dengan nilai-nilai prefilled yang terdapat di faktor <option>.
Tag mendasar ditulis seperti ini <datalist id = “”> </ datalist>, dengan jumlah <option> tag bersarang antara pembukaan dan penutupan tag. Nilai atribut id dapat disebut dengan <input> faktor yang ingin menggunakan data pada <datalist> (dengan atribut daftar).
Sekarang ini saya akan memberikan Cara Merancang List Input Menggunakan HTML5. Di panduan kali ini saya akan merancang contoh inputan buah favorit, berikut langkah-langkahnya:
– Pertama-tama teman-teman bikin struktur mendasar HTML5 dulu seperti kode HTML5 di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Jangan lupa save dengan nama index.html
– Kedua teman-teman ketikan tag <label> dan <input>:
<label>Buah Favorit Kamu:
<input type=text name=fruit list=fruits>
</label>
– Ketiga teman-teman ketikan tag <datalist>:
<label>Buah Favorit Kamu:
<input type=text name=fruit list=fruits>
<!--Atribut List di input Mengacu di faktor <datalist> yang berisi opsi yang telah ditetapkan bagi <input> elemen-->
<datalist id=fruits><!--id di data list berfungsi bagi mengikat opsi datalist ke <input> elemen-->
</datalist>
</label>
Nah, Tag <datalist> ini lah yang akan memberi beberapa pilahan buah dengan nilai-nilai prefilled yang terdapat di faktor <option>
– Keempat ketikan tag <option> bagi faktor yang akan kita masukan:
<datalist id=fruits><!--id di data list berfungsi bagi mengikat opsi datalist ke <input> elemen-->
<option value=Apel>Apel</option>
<option value=Anggur>Anggur</option>
<option value=Jeruk>Jeruk</option>
<option value=Semangka>Semangka</option>
<option value=Jambu>Jambu</option>
<option value=Nanas>Nanas</option>
<option value=Salak>Salak</option>
<!-- … -->
</datalist>
– Hasilnya akan menjadi seperti ini.
– Dan di dikala kita memasukan diantara huruf misalkan saya ketikan huruf “A” karenanya akan tampil faktor “autocomplete” seperti gambar di bawah:
Bagaimana teman-teman mudahkan Cara Merancang List Input Menggunakan HTML5.
Sekianlah panduan dari saya bagi kali ini. Sehat selalu ya teman-teman, selamat mencoba.
Sumber https://kursuswebsite.org
