RSS

Datalist Pengganti TextField di HTML 5

18 Mar

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form action=”demo_form.asp” method=”get”>
  5.   <input list=”namabinatang” name=”binatang”>
  6.   <datalist id=”namabinatang”>
  7.     <option value=”Gajah”>
  8.     <option value=”Monyet”>
  9.     <option value=”Jerapah”>
  10.     <option value=”Kuda”>
  11.     <option value=”Harimau”>
  12.   </datalist>
  13.   <input type=”submit”>
  14. </form>
  15. <p><strong>Note:</strong>masukkan teks Gajah, Monyet, Jerapah, Kuda, Harimau atau yang lainnya</p>
  16. </body>
  17. </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,..

 
Leave a comment

Posted by on March 18, 2015 in Tutorials

 

Tags: , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: