<datalist> tegi oldindan belgilangan ma'lumotlarni chiqarish uchun ishlatiladi. Ko'pincha <input> tegi bilan birga qo'llaniladi. Hozir qaysi holatda ishlatilinishini tushunishga harakat qilib ko'ramiz. Demak, <datalist> tegini input ichida qo'llash orqali biz ba'zida tez yozishni ham ta'minlashimiz mumkin. Yani sizning saytingizda qidiruv ( search ) qismi mavjud. O'sha search inputining ustiga bosilganda <datalist> tegi ichiga yozilgan variantlar foydalanuvchiga taqdim qilinadi.
Amaliyotda sinab ko'ramiz.
<html>
<body>
<h1>Datalist elementi</h1>
<form action="/action_page.php" method="get">
<label for="browser">Ro'yxatdan brauzeringizni tanlang:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Ed ge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Eslatma:</strong>Datalist yorlig'i Safari 12.0 (yoki oldingi versiyalarida) qo'llab-quvvatlanmaydi.</p>
</body>
</html>