وسم القائمة المنسدلة <select>

وسم select ينشئ قائمة منسدلة يختار منها المستخدم خيارًا من عناصر option جاهزة.

الحل الأنسب عندما تكون الخيارات محددة مسبقًا ومحدودة: الدولة، اللغة، التصنيف. كل خيار داخل وسم option، وقيمة الإرسال الفعلية في خاصية value الخاصة به (وإن غابت أُرسل نص الخيار نفسه).

لتجميع الخيارات الطويلة استخدم optgroup بعناوين، ولخيار افتراضي إرشادي «اختر…» اجعله disabled selected حتى لا يُرسل بالخطأ.

الصياغة

<select name="city">
  <option value="amm">عمّان</option>
  <option value="irb">إربد</option>
</select>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<label>اختر المسار:
  <select name="track" style="padding:8px; border-radius:8px">
    <option value="" disabled selected>— اختر —</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
</label>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
name	اسم الحقل عند الإرسال
multiple	السماح باختيار عدة خيارات معًا
value (على option)	القيمة المرسلة فعليًّا — قد تختلف عن النص الظاهر
selected (على option)	الخيار المحدد افتراضيًّا

💡 نصائح عملية

خيار إرشادي «اختر…»؟ اجعله disabled selected مع value فارغ + required على select
أكثر من ~7 خيارات متوقعة الكتابة؟ فكر بـ input مع datalist للبحث الحر

⚠️ أخطاء شائعة

نسيان value على option والاعتماد على النص الظاهر المعرّب — يعقّد المعالجة
قوائم عملاقة (200 دولة) بلا تجميع optgroup ولا بحث

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs