تسمية <select> في HTML

التعريف والاستخدام

<select> يُستخدم العنصر لإنشاء القائمة المنسدلة.

<select> يُستخدم العنصر غالبًا في النماذج، لجمع إدخالات المستخدم.

بعد تقديم النموذج، يجب استخدام خاصية name لاستدعاء بيانات النموذج (إذا تم تمرير خاصية name، لن يتم تقديم بيانات القائمة المنسدلة).

<select> في العنصر علامة <option> تحديد الخيارات المتاحة في القائمة المنسدلة.

يُمكن استخدام خاصية id لربط القائمة المنسدلة بالعلامة (label).

نصيحة:أضف دائمًا <label> العلامة للحصول على أفضل ممارسات التوافقية!

يرجى الرجوع أيضًا إلى:

دليل HTML DOM:موضوع Select

دليل CSS:إعداد نموذج النموذج

مثال

مثال 1

إنشاء قائمة منسدلة تحتوي على أربعة خيارات:

<label for="cars">يرجى اختيار علامة تجارية للسيارة:</label>
<select name="cars" id="cars">
  <option value="audi">奥迪</option>
  <option value="byd">比亚迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">فولفو</option>
</select>

جرب بنفسك

مثال 1

مثال 2 <select> استخدام <optgroup> معًا:

<label for="cars">يرجى اختيار علامة تجارية للسيارة:</label>
<select  name="cars" id="cars">
  <optgroup label="السيارات الصينية">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="السيارات الألمانية">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

جرب بنفسك

الخصائص

الخصائص القيمة الوصف
autofocus autofocus يُمكن أن تكون القائمة المنسدلة مركزة تلقائيًا عند تحميل الصفحة.
disabled disabled يُمكن تعطيل القائمة المنسدلة.
form id نموذج تحديد النموذج الذي ينتمي إليه القائمة المنسدلة.
multiple multiple يُمكن اختيار عدة خيارات في المرة الواحدة.
name الاسم يحدد اسم القائمة المنسدلة.
required required يحدد أنه يجب على المستخدم اختيار قيمة قبل تقديم النموذج.
size رقم يحدد عدد الخيارات المرئية في القائمة المنسدلة.

خصائص العالمية

<select> يدعم العلامة خصائص العالمية في HTML.

خصائص الحدث

<select> يدعم العلامة خصائص الحدث في HTML.

إعداد CSS الافتراضي

لا يوجد

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم