ما هو عنصر Select في لغة HTML

يمثل العنصر <select> عنصر من عناصر النماذج (Forms) حيث يوفر لك قائمة من الخيارات للإختيار منها ويمكنك إختيار خيارات متعددة أو خيار واحد.

وإليك شرح مفصل له من خلال موسوعة حسوب :

• العنصر <select>

السلام عليكم ورحمة الله وبركاته،

عنصر <select> في HTML يستعمل لإنشاء قائمة منسدلة (dropdown list) يمكن للمستخدم منها اختيار قيمة واحدة أو أكثر عند تفعيل خاصية الاختيار المتعدد وهو يعتبر بمثابة حاوية لعناصر <option> التي تمثل الخيارات الظاهرة داخل القائمة.

وعند تحديد المستخدم لأحد هذه الخيارات، ترسل قيمة الخاصية value المرتبطة به مع بيانات النموذج إلى الخادم في الحقل الذي يحمل اسم الخاصية name للعنصر <select>.

كما يمكن ربطه بمعرف فريد id لتمكين التحكم بتنسيقه عبر CSS أو التفاعل معه برمجيا عبر JavaScript؛ فمثلا يمكن قراءة القيمة المختارة أو تغييرها ديناميكيا من خلال selectEl.value والاستماع لحدث change للاستجابة لاختيارات المستخدم.

والمميز أنه يدعم خصائص مثل multiple للسماح باختيار عدة عناصر دفعة واحدة، وdisabled لتعطيل القائمة بأكملها، ويمكن كذلك تعطيل خيارات محددة عبر إضافة خاصية disabled إلى عنصر <option>.

يمكنك التعمق أكثر من خلال الدرس في موسوعة حسوب. أو من خلال:

خاص بالقائمة المنسدلة، أي القائمة التي تختار منها خيار واحد أو أكثر من خيار حسب ما تحدده أنت، وستجد أنها مستخدمة في النماذج أي في عنصر form.

ولإضافة الخيارات داخله ستحتاج إلى العنصر <option> حيث كل <option> يمثل خيار في القائمة، كالتالي:

<select name="colors" id="colorSelect">
  <option value="red">أحمر</option>
  <option value="blue">أزرق</option>
  <option value="green">أخضر</option>
</select>

حيث name="colors" هو اسم الحقل الذي سيتم إرساله مع النموذج إلى الخادم في الواجهة الخلفية، و id="colorSelect" هو مُعرف للعنصرفي حال أردت تنسيقه أو استهدافه من قبل جافاسكريبت.

وكل <option> يحتوي على value وهي القيمة التي تُرسل إلى الخادم عند اختيار الخيار ، والنص هو الذي يراه المستخدم مثل أحمر.

وللعلم في حال لم يتم تحديد value في <option>، يتم إرسال النص الموجود بين الوسمين كقيمة.

عنصر <select> في HTML يستخدم لإنشاء قائمة منسدلة تتيح للمستخدم اختيار خيار واحد أو أكثر إذا تم تمكين خاصية multiple من بين عدة خيارات محددة مسبقا.

والسمة name تستخدم لتحديد اسم الحقل عند إرسال البيانات إلى الخادم، بينما السمة id تستخدم كمعرّف فريد للعنصر يمكن استخدامه بواسطة JavaScript للتفاعل مع العنصر أو بواسطة CSS لتطبيق أنماط محددة. وفي الشيفرة التي أرسلتها كانت هذه السمات فارغة، مما يجعلها أقل فائدة مثلا هنا لنفترض أن لديك نموذجا (form) يطلب من المستخدم اختيار مدينة الشحن المفضلة لديه:

<form action="/submit-order" method="post">
  <label for="city-selection">اختر مدينة الشحن:</label>
  <select name="shipping_city" id="city-selection">
    <option value="">-- الرجاء اختيار مدينة --</option>
    <option value="makkah">مكة</option>
    <option value="gaza" selected>غزة</option>
    <option value="kudus">القدس</option>
  </select>
  <button type="submit">إرسال الطلب</button>
</form>

هنا قمنا بإنشاء قائمة منسدلة فعالة باستخدام عنصر <select> لتمكين المستخدم من اختيار مدينة الشحن لاحظ هنا السمة name="shipping_city" تعد أساسية، حيث تحدد المفتاح الذي ترسل تحته القيمة المختارة مثل shipping_city=makkah إلى الخادم للمعالجة عند إرسال النموذج.

بالتوازي تستخدم السمة id="city-selection" كمعرف فريد يسمح بربط القائمة بالعنصر <label> لتحسين تجربة المستخدم وتسهيل التفاعل، كما يمكّن JavaScript من استهداف القائمة للتلاعب بها برمجيا.

وداخل هذه القائمة يمثل كل عنصر <option> خيارا فرديا، حيث تشير السمة value مثل value="kudus" إلى القيمة الفعلية التي ترسل للخادم، بينما النص الظاهر مثل "غزة" هو ما يراه المستخدم.

وأخيرا تضمن السمة selected، عند تطبيقها على أحد الخيارات مثل "القدس"، أن هذا الخيار سيكون هو المختار افتراضيا عند تحميل الصفحة.