شرح عناصر القوائم التفاعلية في HTML
في الدرس ده هنتعرف على عناصر مهمة جدًا بتستخدم في تصميم القوائم داخل النماذج باستخدام HTML، وهي: select، option، optgroup، datalist.
عنصر select
عنصر select بيستخدم علشان نعرض قائمة منسدلة يقدر المستخدم
يختار منها عنصر واحد. بيكون ليه وسم فتح <select> ووسم غلق
</select>. وبيكون جواه عناصر option علشان
نحدد الاختيارات.
عنصر option
عنصر option هو اللي بيظهر كاختيار داخل select.
بنحدد فيه قيمة باستخدام الخاصية value وبيظهر النص اللي المستخدم
يشوفه بين الوسمين.
عنصر optgroup
عنصر optgroup بيساعدنا ننظم الاختيارات في مجموعات داخل
القائمة المنسدلة. بنستخدم الخاصية label علشان نكتب اسم المجموعة،
وكل option بنكتبها جواه بتنتمي للمجموعة دي.
عنصر datalist
عنصر datalist بنستخدمه علشان نعرض اقتراحات للمستخدم داخل خانة
إدخال input. الميزة هنا إن المستخدم يقدر يختار من القايمة أو يكتب
حاجة من عنده، بعكس select اللي بيكون اختياري فقط من القايمة.
الفرق بين select و datalist
- select: المستخدم لازم يختار من القايمة فقط.
- datalist: المستخدم يقدر يكتب أو يختار من القايمة.
الخلاصة
عناصر HTML زي select وoption وoptgroup وdatalist بتسهل علينا نعرض اختيارات للمستخدم في نماذج الإدخال بطريقة سهلة ومنظمة. وبتساعد كمان على تحسين تجربة المستخدم.
في الدروس الجاية هنكمل شرح باقي عناصر HTML الخاصة بالنماذج. تابع معانا سلسلة تعلم HTML من الصفر علشان تبقى محترف في تصميم الصفحات.