HTML Tutorial

عنصر <datalist>

استخدام <datalist>:

تُستخدم علامة <datalist> لإنشاء قائمة خيارات مُقترحة تظهر أثناء إدخال المستخدم لقيمة في عنصر إدخال <input>.

خصائص <datalist>:

  • id: مُعرّف فريد للعنصر.
  • list: قائمة الخيارات المُقترحة.

أمثلة مع <datalist>:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">Chrome</option>
  <option value="Firefox">Firefox</option>
  <option value="Safari">Safari</option>
</datalist>

لتوضيح هذه العلامة، إليك مثال HTML بسيط:

استكشاف علامة <datalist>:

<!DOCTYPE html>
<html>
<head>
  <title>استخدام علامة <datalist></title>
</head>
<body>
  <h1>اختر متصفحك المفضل</h1>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Chrome">Chrome</option>
    <option value="Firefox">Firefox</option>
    <option value="Safari">Safari</option>
  </datalist>
</body>
</html>

في هذا المثال، عندما يبدأ المستخدم في الكتابة في عنصر <input>، ستظهر قائمة من الخيارات المُقترحة استنادًا إلى الخيارات المحددة في علامة <datalist>.