Datalist adalah objek form yang sangat membantu kita dikala kita ingin memasukkan nama atau kode yang sering kita lupa. Datalist ini dapat menggantikan Textfield yang selama ini kita pakai sebagai input Form. Datalist layaknya Combo Box atau List/Menu. Bedanya pada Datalist kita dapat inputkan text layaknya Textfield.
untuk membuat Data List, berikut contohnya
- <!DOCTYPE html>
- <html>
- <body>
- <form action=”demo_form.asp” method=”get”>
- <input list=”namabinatang” name=”binatang”>
- <datalist id=”namabinatang”>
- <option value=”Gajah”>
- <option value=”Monyet”>
- <option value=”Jerapah”>
- <option value=”Kuda”>
- <option value=”Harimau”>
- </datalist>
- <input type=”submit”>
- </form>
- <p><strong>Note:</strong>masukkan teks Gajah, Monyet, Jerapah, Kuda, Harimau atau yang lainnya</p>
- </body>
- </html>
pada baris ke 5 kita membuat objek <input> dengan atribut “list=namabinatang”. kemudian pada baris ke-6 kita membuat objek <datalist> dengan atribut id yang harus sama dengan atribut list pada objek <input> yakni “id=namabinatang”. baris 7 sampai 11 kita mencoba masukkan daftar nama binatang sebagai pilihan.
dengan menggunakan datalist ini kita memudahkan user dengan memberikan pilihan dari apa yang ia cari. kalaupun opsi yang dicari oleh user tidak ditemukan dalam memori, objek masih bisa mengirimkan nilai. jika Textfield hanya memberikan inputan text dan List/Menu hanya memberikan pilihan, maka Datalist memiliki kedua kemampuan itu.
sayangnya datalist tidak bisa digunakan di IE9 dan versi sebelumnya dan pada safari.
semoga bermanfaat, Wasslam,..