شرح العنصر (select) في لغة HTML

شرح شامل لعنصر <select> في HTML

HTML

مقدمة

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

البنية الأساسية

<select name="القائمة">
  <option value="قيمة1">النص المعروض 1</option>
  <option value="قيمة2">النص المعروض 2</option>
  <option value="قيمة3">النص المعروض 3</option>
</select>

السمات الرئيسية

سمات عنصر <select>:

• name: يحدد اسم القائمة الذي سيتم إرساله مع النموذج
• id: معرّف فريد للقائمة
• multiple: يسمح بتحديد أكثر من خيار عند الضغط على زر Ctrl (في أجهزة الكمبيوتر)
• size: يحدد عدد الخيارات المرئية دون الحاجة للنقر
• disabled: يعطل القائمة ويجعلها غير قابلة للاختيار
• required: يجعل اختيار قيمة من القائمة إلزاميًا قبل إرسال النموذج
• autofocus: يركز على القائمة تلقائيًا عند تحميل الصفحة
• form: يربط القائمة بنموذج معين (حتى لو لم تكن داخل <form>)

سمات عنصر <option>:

• value: القيمة التي سيتم إرسالها عند اختيار هذا الخيار
• selected: يحدد الخيار المحدد مسبقًا
• disabled: يعطل هذا الخيار ويجعله غير قابل للاختيار
• label: يقدم وصفًا مختصرًا للخيار (بديل عن النص الداخلي)

أمثلة تطبيقية

مثال أساسي:

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

مثال مع خيار افتراضي:

<select name="country">
  <option value="">-- اختر دولة --</option>
  <option value="sa">السعودية</option>
  <option value="eg">مصر</option>
  <option value="ae">الإمارات</option>
</select>

مثال متعدد الاختيارات:

<select name="languages" multiple size="4">
  <option value="ar">العربية</option>
  <option value="en">الإنجليزية</option>
  <option value="fr">الفرنسية</option>
  <option value="es">الإسبانية</option>
</select>

مثال مع مجموعات خيارات (<optgroup>):

<select name="car">
  <optgroup label="السيارات الألمانية">
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes</option>
  </optgroup>
  <optgroup label="السيارات اليابانية">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

التخصيص باستخدام CSS

يمكن تخصيص مظهر القائمة المنسدلة باستخدام CSS:

select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 16px;
  width: 200px;
}

select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

الأحداث والتفاعل مع JavaScript

يمكن التحكم في القائمة المنسدلة باستخدام JavaScript:

// الحصول على القيمة المحددة
const selectedValue = document.querySelector('select[name="colors"]').value;

// تغيير القيمة المحددة
document.querySelector('select[name="colors"]').value = 'green';

// إضافة حدث تغيير
document.querySelector('select[name="colors"]').addEventListener('change', function() {
  console.log('تم اختيار: ' + this.value);
});

أفضل الممارسات

• استخدم سمة name لتحديد اسم الحقل عند إرسال النموذج
• استخدم سمة label في <optgroup> لوصف مجموعات الخيارات
• ضع خيارًا افتراضيًا مثل "-- اختر --" لتحسين تجربة المستخدم
• استخدم سمة required لجعل الحقل إلزاميًا
• اجعل النص المعروض في <option> واضحًا ووصفيًا
• استخدم القيم (value) المختصرة للخيارات
• فكر في استخدام مكتبات مثل Select2 لتحسين الواجهة عند الحاجة

التوافق مع المتصفحات

عنصر <select> مدعوم في جميع المتصفحات الحديثة بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

القيود والحلول البديلة

• تخصيص المظهر المحدود: يمكن استخدام مكتبات مثل Select2 أو كتابة مكون مخصص
• إمكانية الوصول: تأكد من أن القائمة قابلة للاستخدام بلوحة المفاتيح
• التصميم عبر الأجهزة: قد تختلف تجربة المستخدم بين أجهزة الكمبيوتر والهواتف

مثال شامل

<form id="user-form">
  <label for="country">الدولة:</label>
  <select id="country" name="country" required>
    <option value="">-- اختر دولة --</option>
    <option value="sa">السعودية</option>
    <option value="eg">مصر</option>
    <option value="ae">الإمارات</option>
    <option value="kw">الكويت</option>
  </select>

  <label for="interests">الاهتمامات (متعدد):</label>
  <select id="interests" name="interests" multiple size="3">
    <option value="sports">الرياضة</option>
    <option value="reading">القراءة</option>
    <option value="travel">السفر</option>
    <option value="tech">التقنية</option>
  </select>

  <button type="submit">إرسال</button>
</form>

<script>
  document.getElementById('user-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const country = document.getElementById('country').value;
    const interests = [...document.getElementById('interests').selectedOptions]
                     .map(option => option.value);
    console.log({country, interests});
  });
</script>

<style>
  select {
    display: block;
    margin: 10px 0;
    padding: 8px;
    width: 100%;
    max-width: 300px;
  }
</style>

الخلاصة

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

كيف كان المقال؟