الفرق بين المراجعتين ل"HTML/datalist"

المراجعة الحالية بتاريخ 09:39، 24 فبراير 2018

يحتوي العنصر <datalist> على عناصر <option> التي تُمثِّل القيم المتوافرة لعناصر النماذج الأخرى.

مثال عن تعريف العنصر <datalist> مع خاصية id، مع تعريف أكثر من خيار باستخدام العنصر <option>، وإسناد هذه القائمة إلى عنصر <input> عبر الخاصية list:

<label>اختر متصفحك من القائمة:
<input type="text" list="browsers" name="myBrowser"></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي وعنصر عادي.
المحتوى المسموح	المحتوى العادي أو العنصر `<option>` صفر مرة أو أكثر.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	`HTMLDataListElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
20	4.0	مدعوم	غير مدعوم	9.5

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

التنسيق الافتراضي

أغلبية المتصفحات تخفي العنصر <datalist> بضبط الخاصية display إلى none:

datalist {
  display: none;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.

@@ سطر 4: / سطر 4: @@
 مثال عن تعريف العنصر <code><datalist></code> مع خاصية <code>id</code>، مع تعريف أكثر من خيار باستخدام العنصر <code>[[HTML/option|<option>]]</code>، وإسناد هذه القائمة إلى عنصر <code>[[HTML/input|<input>]]</code> عبر الخاصية <code>list</code>:
 <syntaxhighlight lang="html">
-<label>Choose a browser from this list:
+<label>اختر متصفحك من القائمة:
-<input list="browsers" name="myBrowser" /></label>
+<input type="text" list="browsers" name="myBrowser"></label>
 <datalist id="browsers">
    <option value="Chrome">
@@ سطر 16: / سطر 16: @@
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 50: / سطر 51: @@
 == الخاصيات ==
 يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.
+== التنسيق الافتراضي ==
+أغلبية المتصفحات تخفي العنصر <code><datalist></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>none</code>:<syntaxhighlight lang="css">
+datalist {
+  display: none;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==