Tutorial Dasar Pemrograman & Database: Cara Menggunakan DataList Pada HTML 5

10/18/2015

Cara Menggunakan DataList Pada HTML 5

Pada tutorial HTML 5 kali ini, kita akan belajar tentang Cara Menggunakan DataList Pada HTML5. DataList merupakan salah satu tag di HTML 5 yang digunakan untuk menyimpan data dalam bentuk list. Data yang disimpan bisa berupa data statis, dan data dinamis yang berasal dari database.

DataList biasanya digunakan untuk penggunaan fitur autocomplete pada halaman web. Sebagai ilustrasi, perhatikan gambar di bawah ini:

Langkah-Langkah

Di bawah ini adalah langkah-langkah untuk membuat datalist pada halaman HTML seperti gambar diatas:

Buat textbox untuk inputan nama negara (country)

<input type="text" list="countries" name="mycountry" />

Langkah selanjutnya mendefinisikan nama-nama country dalam bentuk datalist.

<datalist id="countries">
    <option value="Albania">Albania</option>
    <option value="Brazil">Brazil</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Ghana">Ghana</option>
    <option value="Honduras">Hounduras</option>
    <option value="Indonesia">Indonesia</option>
</datalist>

Contoh Lengkap

Di bawah ini adalah contoh script lengkap datalist menggunakan HTML 5:

<!DOCTYPE html> 
<html>
<head><title>Contoh Data List HTML 5</title></head>
<label>Enter Country name:</label>
<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
    <option value="Albania">Albania</option>
    <option value="Brazil">Brazil</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Ghana">Ghana</option>
    <option value="Honduras">Hounduras</option>
    <option value="Indonesia">Indonesia</option>
</datalist>
</html>

Demo

Di bawah ini adalah contoh halaman demo datalist pada HTML 5. Masukkan sembarang huruf pada textbox, misalkan huruf 'a'

Enter Country name:

Sekian tutorial singkat tentang Cara Menggunakan DataList Pada HTML 5. Semoga bermanfaat & Happy Learning HTML5.

Salam,

Nursalim