الفرق بين المراجعتين لصفحة: «HTML/optgroup»
< HTML
ط استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1' |
إضافة قسمين ومثال |
||
| سطر 4: | سطر 4: | ||
مثال بسيط عن استخدام العنصر <code><optgroup></code> لثلاث مرات ضمن عنصر <code>[[HTML/select|<select>]]</code> أحدها مع الخاصية <code>[[#disabled|disabled]]</code>:<syntaxhighlight lang="html"> | مثال بسيط عن استخدام العنصر <code><optgroup></code> لثلاث مرات ضمن عنصر <code>[[HTML/select|<select>]]</code> أحدها مع الخاصية <code>[[#disabled|disabled]]</code>:<syntaxhighlight lang="html"> | ||
<select> | <select> | ||
<optgroup label=" | <optgroup label="المجموعة 1"> | ||
<option> | <option>الخيار 1.1</option> | ||
</optgroup> | </optgroup> | ||
<optgroup label=" | <optgroup label="المجموعة 2"> | ||
<option> | <option>الخيار 2.1</option> | ||
<option> | <option>الخيار 2.2</option> | ||
</optgroup> | </optgroup> | ||
<optgroup label=" | <optgroup label="المجموعة 3" disabled> | ||
<option> | <option>الخيار 3.1</option> | ||
<option> | <option>الخيار 3.2</option> | ||
<option> | <option>الخيار 3.3</option> | ||
</optgroup> | </optgroup> | ||
</select> | </select> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| 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> | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
المراجعة الحالية بتاريخ 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.