Cara Membuat List Input Menggunakan HTML5

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat List Input Menggunakan HTML5.

Tag <datalist> adalah seperangkat elemen <option> yang mewakili pilihan standar untuk kontrol lainnya. Hal ini memungkinkan <datalist> elemen yang akan digunakan untuk memberikan fitur “autocomplete” pada elemen form. Anda dapat menggunakan <datalist> tag untuk memberikan daftar pilihan yang telah ditetapkan kepada pengguna saat mereka input data.

Misalnya, ketika pengguna mulai memasukkan teks ke dalam teks <input> buah favorit, pada form <input> akan muncul beberapa pilahan buah dengan nilai-nilai prefilled yang ada pada elemen <option>.

Tag dasar ditulis seperti ini <datalist id = “”> </ datalist>, dengan jumlah <option> tag bersarang antara pembukaan dan penutupan tag. Nilai atribut id bisa disebut dengan <input> elemen yang ingin menggunakan data dalam <datalist> (dengan atribut daftar).

Sekarang saya akan memberikan Cara Membuat List Input Menggunakan HTML5. Pada tutorial kali ini saya akan membuat contoh inputan buah favorit, berikut langkah-langkahnya:

– Pertama teman-teman buat struktur dasar 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 pada input Mengacu pada elemen <datalist> yang berisi opsi yang telah ditetapkan untuk <input> elemen-->
  <datalist id="fruits"><!--id pada data list berfungsi untuk mengikat opsi datalist ke <input> elemen-->
	
  </datalist>
</label>

Nah, Tag <datalist> ini lah yang akan memberi beberapa pilahan buah dengan nilai-nilai prefilled yang ada pada elemen <option>

– Keempat ketikan tag <option> untuk elemen yang akan kita masukan:

<datalist id="fruits"><!--id pada data list berfungsi untuk 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 pada saat kita memasukan salah satu huruf misalkan saya ketikan huruf “A” maka akan tampil elemen “autocomplete” seperti gambar di bawah:

Bagaimana teman-teman mudahkan Cara Membuat List Input Menggunakan HTML5.

Sekian tutorial dari saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat List Input Menggunakan HTML5

Kategori