علامة <select> HTML
مثال
أنشئ قائمة منسدلة بأربعة خيارات:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يتم <select>استخدام العنصر لإنشاء قائمة منسدلة.
<select>غالبًا ما يستخدم العنصر في نموذج لتجميع مدخلات المستخدم .
السمة nameمطلوبة للإشارة إلى بيانات النموذج بعد إرسال النموذج (إذا حذفت
nameالسمة ، فلن يتم إرسال أي بيانات من القائمة المنسدلة).
السمة idمطلوبة لربط القائمة المنسدلة بالتسمية.
تحدد علامات <option> داخل العنصر <select>الخيارات المتاحة في القائمة المنسدلة.
نصيحة: أضف دائمًا علامة <label> للتمتع بأفضل ممارسات إمكانية الوصول!
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
صفات
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
السمات العالمية
تدعم <select>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <select>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
استخدم <select> مع علامات <optgroup>:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
الصفحات ذات الصلة
مرجع DOM HTML: حدد الكائن
دروس CSS: نماذج التصميم
إعدادات CSS الافتراضية
لا أحد.