Datalist HTML5 ile gelen yeni özelliklerden birisidir. Select etiketi gibi kendi içinde option etiketini tutar.
Bir input etiketine bağlı olarak input etiketinın list özelliğini kullanır. Önemli olan nokta input etiketinin list özelliğine yazdığımız değerin aynısını datalistin idsine vermemiz gerektiğidir.
Datalist özelliği önceden belirlenmiş girişleri bir liste halinde oluşturmaya yarar. Kullanıcı alana tıkladığında menü görümünde bir liste görünür.
Örnek :
<input name="color" type="color" list="color"/>
<datalist id="color">
<option value="#000000" label="Siyah"></option>
<option value="#FF0000" label="Kırmızı"></option>
<option value="#FF99CC" label="Turuncu"></option>
<option value="#0000FF" label="Mavi"></option>
<option value="#00FF00" label="Yeşil"></option>
</datalist>
Yukarda yazdığımız kodun opera tarayıcısındaki görünüşü:
Başka bir örnek yapalım:
<!DOCTYPE html>
<html>
<head>
<title>Datalist Özelliği</title>
</head>
<body>
<h1>Datalist Özelliği</h1>
<p> <em> Müzik Türleri </em> </p>
<form>
<label for="muzikler"><em>Müzik<em> : </label>
<input name="muzik" type="text" list="muzik" >
<datalist id="muzik">
<option value="Pop">
<option value="Rock">
<option value="Jazz">
<option value="Blues">
<option value="Klasik">
</datalist>
<input type="submit" value="Gönder">
</form>
</body>
</html>
Kodu çalıştırdığımızda eğer input alanına tıklarsak ortaya çıkan sonuç aşağıdaki gibidir.
Düzenle Kullanıcı Tarafından 11 Eylül 2015 Cuma 18:43:04(UTC)
| Sebep: Sebep Bildirilmesi
