contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

HTML5 datalist

Posted in HTML & CSS Life at 03 Maret 2016 With 0 Comments

satu lagi fitur baru yang terdapat pada HTML 5 , yaitu datalist  <datalist> , Para developer web dapat dengan mudah membuat native autocomplete dropdowns  , jika dulu harus bersusah payah bergelut dengan Ajax Jquery, Sekarang HTML5 sudah menyediakan fitur datalist yang fungsinya seperti autocomplete :

Amazing Kalkulator dengan HTML5 dan CSS3

HTML5 Datalist

▼ Download Source Code Dibawah Ini ▼


auto complate dengan HTML5

auto complate dengan HTML5

 

Element <datalist> , digunakan untuk memberikan pilihan terhadap user , bahasa kerennya autocomplete list , sehingga memudahkan user untuk mendapatkan apa yang ingin dicarinya , untuk mendefenisikannya <datalist> diisi dengan value pada elemen <option>  berikut contoh datalist

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>

<datalist> dipanggil dengan attribut  id  pada tag <datalist>  untuk menghubungkannya pada tag <input> dibutuhkan attribut list,

<input type="text" list="languages"/>

Jika semua sudah benar, maka fitur autocomplete akan muncul pada tag <input>

 Untuk Complete Script :

<input type="text" list="languages"/>
<datalist id="languages"> <option value="HTML"> <option value="CSS"> <option value="JavaScript"> <option value="Java"> <option value="Ruby"> <option value="PHP"> <option value="Go"> <option value="Erlang"> <option value="Python"> <option value="C"> <option value="C#"> <option value="C++"> </datalist>

Demo Download

Artikel Terkait

Diskusi