الفرق بين المراجعتين لصفحة: «HTML/optgroup»

المراجعة الحالية بتاريخ 03:35، 25 فبراير 2018

يُنشِئ العنصر <optgroup> مجموعةً من الخيارات ضمن العنصر <select>.

مثال بسيط عن استخدام العنصر <optgroup> لثلاث مرات ضمن عنصر <select> أحدها مع الخاصية disabled:

<select>
  <optgroup label="المجموعة 1">
    <option>الخيار 1.1</option>
  </optgroup> 
  <optgroup label="المجموعة 2">
    <option>الخيار 2.1</option>
    <option>الخيار 2.2</option>
  </optgroup>
  <optgroup label="المجموعة 3" disabled>
    <option>الخيار 3.1</option>
    <option>الخيار 3.2</option>
    <option>الخيار 3.3</option>
  </optgroup>
</select>

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	العنصر `<option>` صفر مرة أو أكثر؛ لكن لا يجوز أن يحتوي على عنصر `<optgroup>` آخر.
الوسم المختصر	وسم البداية إجباري، أما وسم النهاية اختياري إن كان العنصر متبوعًا مباشرةً بعنصر `<optgroup>` آخر، أو لم يكن يحتوي العنصر الأب على أيّ محتوى آخر.
العناصر الأب	العنصر `<select>`.
واجهة DOM	`HTMLOptGroupElement`

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`disabled`

إذا ضُبِطَت هذه القيمة المنطقية (Boolean) فلن يستطيع المستخدم اختيار أيّ خيار في المجموعة، وتعرض المتصفحات هذه الخيارات عادةً بلونٍ فضي ولن تستقبل الأحداث مثل النقرات أو التركيز.

`label`

اسم مجموعة الخيارات، والتي يمكن أن يستخدمها المتصفح لإظهار اسم لمجموعة الخيارات في واجهة المستخدم.

يجدر بالذكر أنَّ هذه الخاصية إجبارية.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <optgroup> مع ضبط الخاصية display إلى block، وجعل وزن الخط (font-weight) أثخن من الطبيعي:

optgroup {
  font-weight: bolder;
  display: block;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.

@@ سطر 4: / سطر 4: @@
 مثال بسيط عن استخدام العنصر <code><optgroup></code> لثلاث مرات ضمن عنصر <code>[[HTML/select|<select>]]</code> أحدها مع الخاصية <code>[[#disabled|disabled]]</code>:<syntaxhighlight lang="html">
 <select>
-   <optgroup label="Group 1">
+   <optgroup label="المجموعة 1">
-     <option>Option 1.1</option>
+     <option>الخيار 1.1</option>
    </optgroup>
-   <optgroup label="Group 2">
+   <optgroup label="المجموعة 2">
-     <option>Option 2.1</option>
+     <option>الخيار 2.1</option>
-     <option>Option 2.2</option>
+     <option>الخيار 2.2</option>
    </optgroup>
-   <optgroup label="Group 3" disabled>
+   <optgroup label="المجموعة 3" disabled>
-     <option>Option 3.1</option>
+     <option>الخيار 3.1</option>
-     <option>Option 3.2</option>
+     <option>الخيار 3.2</option>
-     <option>Option 3.3</option>
+     <option>الخيار 3.3</option>
    </optgroup>
 </select>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 60: / سطر 61: @@
 يجدر بالذكر أنَّ هذه الخاصية إجبارية.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><optgroup></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، وجعل وزن الخط (<code>[[CSS/font-weight|font-weight]]</code>) أثخن من الطبيعي:<syntaxhighlight lang="css">
+optgroup {
+  font-weight: bolder;
+  display: block;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
@@ سطر 67: / سطر 76: @@
 [[تصنيف:HTML|{{SUBPAGENAME}}]]
 [[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:Forms|{{SUBPAGENAME}}]]
+[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]