وسم HTML Select: كيفية إنشاء قائمة منسدلة أو Combo List باحتراف

ما هو وسم HTML Select ولماذا يُستخدم؟

يُستخدم وسم <select> في HTML لإنشاء قائمة منسدلة تتيح للمستخدم اختيار قيمة واحدة أو عدة قيم من مجموعة خيارات محددة مسبقاً. ويُعد هذا العنصر من أهم عناصر النماذج forms لأنه يساعد على جمع البيانات بشكل منظم قبل إرسالها إلى الخادم.

غالباً ما يأتي وسم <select> داخل عنصر <form>، بينما تُكتب الخيارات داخله باستخدام وسم <option>. ويمكن أيضاً استخدامه بشكل مستقل وربطه بنموذج معين عبر الخاصية form.

في هذا الدليل، سنتعرف على طريقة إنشاء قائمة منسدلة باستخدام select، وأهم الخصائص المرتبطة به، وكيفية تحسين تجربة الاستخدام، بالإضافة إلى بعض الأساليب العملية لتنسيقه باستخدام CSS.

أهم خصائص وسم Select في HTML

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

• name: تُستخدم لتسمية الحقل عند إرسال البيانات إلى الخادم، وهي أساسية في أي عنصر داخل النموذج.
• multiple: تتيح للمستخدم اختيار أكثر من عنصر من القائمة.
• required: تمنع إرسال النموذج ما لم يحدّد المستخدم خياراً مناسباً.
• disabled: تجعل العنصر غير قابل للتفاعل.
• size: تحدد عدد العناصر الظاهرة بشكل افتراضي داخل القائمة.
• autofocus: تضع التركيز على العنصر تلقائياً عند تحميل الصفحة.

كيفية إنشاء قائمة منسدلة باستخدام HTML Select

لإنشاء قائمة منسدلة بسيطة، نستخدم عنصر <form> يحتوي على <select> مع مجموعة من الخيارات، بالإضافة إلى زر إرسال.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

ولإظهار المثال بشكل مرتب في الصفحة، يمكن استخدام تنسيق CSS بسيط لتوسيط النموذج ومنحه خلفية مريحة بصرياً:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}

input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

تحسين الوصولية عبر ربط Select مع Label

من الممارسات المهمة في تطوير الواجهات ربط عنصر select بعنصر label. هذه الخطوة تحسّن الوصولية Accessibility وتُسهّل على المستخدم التفاعل مع الحقل، إذ يمكنه النقر على النص للوصول مباشرة إلى القائمة.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

تم استخدام الرمز # داخل الخاصية action لتجنب ظهور خطأ 404 عند الضغط على زر الإرسال أثناء تجربة المثال.

كما يمكن تعديل CSS قليلاً ليصبح التخطيط أكثر اتزاناً:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}

input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

select {
  margin-bottom: 10px;
  margin-top: 10px;
}

إضافة خيار افتراضي لتحسين تجربة المستخدم

بشكل افتراضي، قد يظهر أول عنصر داخل القائمة على أنه محدد مسبقاً. ورغم أن ذلك طبيعي من ناحية المتصفح، إلا أنه قد يربك المستخدم، خصوصاً إذا ضغط على زر الإرسال دون أن ينتبه إلى وجود اختيار مسبق.

لتحسين تجربة الاستخدام، يمكن إضافة خيار أولي مثل Select a language ليعمل كرسالة توضيحية داخل القائمة:

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

التحكم بعدد العناصر الظاهرة باستخدام الخاصية Size

في بعض الحالات، قد تغطي القائمة المنسدلة زر الإرسال عند فتحها، وهو ما قد يؤثر سلباً في تجربة المستخدم. يمكن حل هذه المشكلة باستخدام الخاصية size لعرض عدد محدد من الخيارات بشكل دائم، مع إظهار شريط تمرير لباقي العناصر.

ميزة هذا الأسلوب أنه يقلل الحاجة إلى خيار تمهيدي افتراضي، لأن المستخدم يرى عدة عناصر مباشرة منذ البداية.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" size="4">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

كيفية تفعيل اختيار متعدد باستخدام Multiple

إذا كنت تريد أن يتمكن المستخدم من اختيار أكثر من قيمة، فيمكنك استخدام الخاصية multiple. عندها يتحول عنصر select من قائمة اختيار فردي إلى قائمة اختيار متعدد.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" multiple>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

عند تفعيل هذه الخاصية، تظهر عدة عناصر افتراضياً. وغالباً يحتاج المستخدم إلى الضغط على مفتاح Shift أو Ctrl مع النقر بالفأرة لاختيار أكثر من عنصر، بحسب نظام التشغيل والمتصفح.

تنظيم الخيارات داخل Select باستخدام Optgroup

عندما تحتوي القائمة على عدد كبير من الخيارات، يصبح تنظيمها أمراً ضرورياً. هنا يأتي دور وسم <optgroup> الذي يسمح بتجميع الخيارات تحت عناوين فرعية داخل عنصر select.

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

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <optgroup label="first-choice">
      <option value="select">Select a language</option>
      <option value="javascript">JavaScript</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="golang">Golang</option>
    </optgroup>
    <optgroup label="second-choice">
      <option value="python">Python</option>
      <option value="c#">C#</option>
      <option value="C++">C++</option>
      <option value="erlang">Erlang</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit" />
</form>

كيفية تنسيق عنصر Select باستخدام CSS

يُعرف عنصر select بأنه من أكثر عناصر النماذج صعوبة في التنسيق، وذلك لأن المتصفحات وأنظمة التشغيل تتعامل معه بطرق مختلفة. ومع ذلك، يمكن تطبيق بعض التنسيقات الأساسية لتحسين مظهره.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a Language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

select {
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: cursive, sans-serif;
  outline: 0;
  background: #2ecc71;
  color: #fff;
  border: 1px solid crimson;
  padding: 4px;
  border-radius: 9px;
}

في هذا المثال تم تطبيق عدة خصائص مفيدة، منها:

• تحديد font-family لتحسين شكل النص.
• إزالة outline الافتراضي الذي قد يبدو مزعجاً في بعض المتصفحات.
• استخدام لون خلفية أخضر ونص أبيض لزيادة التباين.
• إضافة border واضح بلون مميز.
• تطبيق border-radius للحصول على زوايا ناعمة.
• إضافة padding لتوفير مسافة داخلية أفضل.

أفضل ممارسات استخدام HTML Select في النماذج

اختر Select عندما تكون الخيارات محددة مسبقاً

إذا كانت البيانات المتاحة للمستخدم معروفة وثابتة، فإن select يكون خياراً عملياً ومنظماً أكثر من حقل الإدخال الحر.

راعِ تجربة المستخدم عند كثرة الخيارات

إذا كانت القائمة طويلة، ففكر في استخدام size أو optgroup لتسهيل الاستعراض وتقليل الارتباك.

احرص على الوصولية

استخدم label دائماً، وفكّر في إضافة required عند الحاجة إلى التحقق من الإدخال قبل الإرسال.

لا تبالغ في تنسيق العنصر

بسبب اختلاف عرض select بين المتصفحات، من الأفضل الاكتفاء بتنسيق متوازن أو الاستعانة بمكتبة CSS موثوقة إذا كان المشروع يتطلب واجهات أكثر تقدماً.

الخلاصة التقنية

يُعد وسم HTML Select من أكثر عناصر النماذج مرونة، لأنه يجمع بين بساطة القوائم المنسدلة وإمكانية الاختيار الفردي أو المتعدد ضمن واجهة واحدة. عملياً، يكون هذا العنصر مناسباً جداً عند التعامل مع بيانات ثابتة أو شبه ثابتة، خاصة إذا تم دعمه بخصائص مثل multiple وsize وoptgroup. أما من ناحية التصميم، فالتحدي الأكبر يكمن في التوافق بين المتصفحات، لذلك يفضَّل التركيز على الوضوح وسهولة الاستخدام قبل الاهتمام بالمظهر البصري المبالغ فيه.