HTML - القوائم المنسدلة
مفهوم القائمة المنسدلة
القائمة المنسدلة (Dropdown) هي عنصر واجهة مستخدم يتخذ شكل قائمة تشبه الزر. عند النقر عليها، تظهر مجموعة من العناصر الموجودة بداخلها، مما يتيح للمستخدم اختيار خيار واحد منها.
هذه الأداة مفيدة بشكل خاص عندما نحتاج لتقليل المساحة المستخدمة في واجهة المستخدم، بينما نمنح المستخدم القدرة على اختيار من بين خيارات متعددة.
عند فتح الصفحة، يظهر عادةً العنصر الأول في القائمة فقط، مما يتيح للمستخدم التركيز على الاختيار الذي يريده. في هذا الدرس، سنتناول كيفية إضافة قوائم منسدلة إلى صفحات HTML، بالإضافة إلى الخصائص المختلفة التي يمكن تطبيقها لتحسين تجربتها.
إضافة قائمة منسدلة
لإظهار قائمة منسدلة تحتوي على مجموعة من الخيارات، يمكنك استخدام الوسم <select>، حيث يدل هذا الوسم المتصفح على أنك ترغب في عرض قائمة منسدلة. كل خيار تود إضافته داخل هذه القائمة يتم وضعه داخل وسم <option>.
إليك بعض الخصائص المهمة التي يمكن إضافتها إلى الوسم <select>:
id: تستخدم لربط القائمة المنسدلة بوسم<label>، مما يسهل على المستخدم النقر على النص المرتبط بالقائمة.name: يستخدم لتحديد اسم القائمة، مما يضمن إرسال القيمة المختارة عند النقر على زر الإرسال.size: تحدد عدد العناصر التي ستظهر في القائمة في وقت واحد. بشكل افتراضي، يتم عرض عنصر واحد فقط.multiple: تتيح للمستخدم اختيار أكثر من قيمة في نفس الوقت. عند استخدام هذه الخاصية، يجب أن يحتفظ المستخدم بضغط زر Ctrl أثناء اختيار العناصر.disabled: تجعل القائمة غير فعالة، حيث تظهر بلون باهت ولا يمكن للمستخدم النقر عليها.
خصائص الوسم <option>
تستخدم هذه الخصائص لتحديد الخيارات الموجودة داخل القائمة المنسدلة:
value: تحدد القيمة التي سيتم إرسالها عند اختيار هذا الخيار، ويجب أن تكون كل قيمة فريدة.selected: تجعل العنصر مختاراً بشكل افتراضي عند فتح الصفحة.disabled: تجعل الخيار يظهر بلون باهت، مما يمنع المستخدم من اختياره.
من المهم أن نحافظ على ربط النص الذي يظهر بجانب القائمة المنسدلة باستخدام الوسم <label>. هذا الربط يعزز من تجربة المستخدم، حيث يمكنه النقر على النص المرتبط بدلاً من النقر على الأسهم الخاصة بالقائمة.
في المثال التالي، قمنا بإضافة قائمة منسدلة تحتوي على أربعة عناصر:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="languages">Choose your language:</label>
<!-- لإعلام المتصفح أننا سنعرض قائمة منسدلة <select> قمنا باستخدام الوسم
لتعريف الخيارات التي نريدها أن تظهر بداخلها <option> و قمنا باستخدام وسوم -->
<select id="languages" name="languages">
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
قائمة منسدلة مع عنصر مختار بشكل افتراضي
في المثال التالي، قمنا بإضافة قائمة منسدلة مع تحديد أن العنصر الثالث سيكون مختاراً بشكل افتراضي عند فتح الصفحة. هذا يعني أن المستخدم سيجد الخيار الثالث مُفعلاً تلقائيًا:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="languages">Choose your language:</label>
<!-- لجعله مختاراً بشكل إفتراضي عند selected موضوع في القائمة أضفنا له الخاصية <option> ثالث -->
<select id="languages" name="languages">
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french" selected>French</option>
<option value="spanish">Spanish</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
قائمة مع خيارات متعددة
في المثال التالي، قمنا بإضافة قائمة منسدلة مع جعلها تظهر أربع عناصر (أي كل العناصر الموضوعة فيها) ويتيح للمستخدم اختيار أكثر من عنصر في نفس الوقت. يجب أن يحتفظ المستخدم بضغط زر Ctrl أثناء اختيار العناصر:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="languages">Choose your languages:</label>
<!-- هنا قمنا بوضع 4 عناصر في القائمة و تحديد أنها تظهر 4 عناصر في كل مرة حتى تظهرهم جميعاً
لجعل المستخدم قادر على اختيار أكثر من قيمة في نفس الوقت multiple كما أننا أضفنا الخاصية -->
<select id="languages" name="languages[]" size="4" multiple>
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
قائمة مع عناصر غير قابلة للاختيار
في المثال التالي، قمنا بإضافة قائمة منسدلة مع جعل آخر عنصرين في القائمة غير قابلين للاختيار. هذا يعني أن الخيارين الأخيرين سيظهران بلون باهت، مما يمنع المستخدم من اختيارهما:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="languages">Choose your language:</label>
<!-- في القائمة يظهران أمام المستخدم و لكنه لا يمكنه إختيارهما <option> ثالث و رابعي -->
<select id="languages" name="languages">
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french" disabled>French</option>
<option value="spanish" disabled>Spanish</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
قائمة غير مفعلة
في المثال الأخير، قمنا بإضافة قائمة منسدلة مع جعلها غير مفعّلة، مما يعني أن المستخدم لن يكون قادراً على تغيير قيمة العنصر المختار فيها، وكل العناصر ستكون غير قابلة للاختيار:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="languages">Choose your language:</label>
<!-- في القائمة يظهران أمام المستخدم و لكنه لا يمكنه إختيارهما <option> ثالث و رابعي -->
<select id="languages" name="languages">
<option value="arabic">Arabic</option>
<option value="english">English</option>
<option value="french" disabled>French</option>
<option value="spanish" disabled>Spanish</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>