الفرق بين المراجعتين لصفحة: «HTML/label»
ط تغيير ترتيب التصنيفات |
إضافة قسمين ومثالين |
||
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 4: | سطر 4: | ||
مثال عن عنصر <code><label></code> بسيط يوجد داخله أحد عناصر النموذج: | مثال عن عنصر <code><label></code> بسيط يوجد داخله أحد عناصر النموذج: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<label> | <label>لافتة نصية <input type="text"></label> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== بطاقة العنصر == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 45: | سطر 46: | ||
ملاحظة: يُسمَح باستخدام الخاصية <code>for</code> إضافةً إلى احتواء العنصر <code><label></code> على العنصر الذي ستُضاف إليه اللافتة، طالما كانت الخاصية <code>for</code> تُشير إلى العنصر المحتوى داخله. | ملاحظة: يُسمَح باستخدام الخاصية <code>for</code> إضافةً إلى احتواء العنصر <code><label></code> على العنصر الذي ستُضاف إليه اللافتة، طالما كانت الخاصية <code>for</code> تُشير إلى العنصر المحتوى داخله. | ||
مثال عن عنصر <code><label></code> مع استعمال الخاصية <code>for</code> للإشارة إلى أحد عناصر النموذج الذي يقع بعده:<syntaxhighlight lang="html"> | مثال عن عنصر <code><label></code> مع استعمال الخاصية <code>for</code> للإشارة إلى أحد عناصر النموذج الذي يقع بعده:<syntaxhighlight lang="html"> | ||
<label for="username"> | <label for="username">لافتة نصية</label> | ||
<input type="text" id="username"> | <input type="text" id="username"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== <code>form</code> === | === <code>form</code> === | ||
سطر 60: | سطر 59: | ||
لا ترتبط اللافتات نفسها بالنماذج مباشرةً، وإنما ترتبط معها بشكلٍ غير مباشر عبر عناصر النماذج. | لا ترتبط اللافتات نفسها بالنماذج مباشرةً، وإنما ترتبط معها بشكلٍ غير مباشر عبر عناصر النماذج. | ||
== التنسيق الافتراضي == | |||
تعرض أغلبية المتصفحات العنصر <code><label></code> مع ضبط شكل المؤشر <code>[[CSS/cursor|cursor]]</code> إلى <code>default</code>:<syntaxhighlight lang="css"> | |||
label { | |||
cursor: default; | |||
} | |||
</syntaxhighlight> | |||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
سطر 66: | سطر 72: | ||
*مواصفة [http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1 HTML 4.01]. | *مواصفة [http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1 HTML 4.01]. | ||
[[تصنيف:HTML]] | [[تصنيف:HTML|{{SUBPAGENAME}}]] | ||
[[تصنيف:HTML Elements]] | [[تصنيف:HTML Elements|{{SUBPAGENAME}}]] | ||
[[تصنيف:Forms]] | [[تصنيف:HTML Forms|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 03:07، 25 فبراير 2018
يُمثِّل العنصر <label>
لافتةً (caption) لأحد عناصر النماذج.
مثال عن عنصر <label>
بسيط يوجد داخله أحد عناصر النموذج:
<label>لافتة نصية <input type="text"></label>
بطاقة العنصر
تصنيفات المحتوى | عنصر تنظيمي وعنصر عادي وعنصر تفاعلي وعنصر مرتبط بالنماذج. |
---|---|
المحتوى المسموح | العناصر التي يمكن إضافة لافتة لها، ولا يسمح باستخدام العنصر <label> داخله.
|
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى العادي. |
واجهة DOM | HTMLLabelElement
|
دعم المتصفحات
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
for
قيمة هذه الخاصية هي مُعرِّف ID لعنصر نماذج يمكن إضافة لافتة له موجودٌ في نفس المستند. سترتبط اللافتة بأوّل عنصر في المستند له مُعرِّف ID يُطابِق قيمة هذه الخاصية.
ملاحظة: يُسمَح باستخدام الخاصية for
إضافةً إلى احتواء العنصر <label>
على العنصر الذي ستُضاف إليه اللافتة، طالما كانت الخاصية for
تُشير إلى العنصر المحتوى داخله.
مثال عن عنصر <label>
مع استعمال الخاصية for
للإشارة إلى أحد عناصر النموذج الذي يقع بعده:
<label for="username">لافتة نصية</label>
<input type="text" id="username">
form
هذه الخاصية هي قيمة الخاصية id
للعنصر <form>
الذي يتعلق هذا العنصر به، يمكن تحديد قيمة لهذه الخاصية للإشارة إلى عنصر <form>
في نفس المستند، مما يسمح بوضع اللافتات في أيّ مكان في المستند دون التقيّد أن تكون داخل العنصر <form>
.
يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت من مواصفة HTML في نيسان/أبريل 2016، لكن ما يزال بالإمكان الوصول إلى هذه الخاصية عبر السكربتات (HTMLLabelElement.form
)، وتُعيد النموذج الذي ترتبط به اللافتة، أو null
إن كانت اللافتة غير مرتبطة بأحد عناصر النماذج أو لم يكن ذلك العنصر جزءًا من أحد النماذج.
ملاحظات الاستخدام
يمكن أن ترتبط الافتة المُعرَّفة عبر العنصر <label>
إما عبر وضع عنصر النموذج ضمن العنصر <label>
أو باستخدام الخاصية for
؛ لاحظ أنَّ من المسموح أن يرتبط عنصر إدخال وحيد بعدة لافتات.
لا ترتبط اللافتات نفسها بالنماذج مباشرةً، وإنما ترتبط معها بشكلٍ غير مباشر عبر عناصر النماذج.
التنسيق الافتراضي
تعرض أغلبية المتصفحات العنصر <label>
مع ضبط شكل المؤشر cursor
إلى default
:
label {
cursor: default;
}
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مواصفة HTML 4.01.