علامة <label> HTML
مثال
ثلاثة أزرار اختيار مع تسميات:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio"
id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
التعريف والاستخدام
<label>
تحدد العلامة تسمية لعدة عناصر :
- <نوع الإدخال = "مربع الاختيار">
- <نوع الإدخال = "اللون">
- <نوع الإدخال = "التاريخ">
- <نوع الإدخال = "datetime-local">
- <نوع الإدخال = "البريد الإلكتروني">
- <نوع الإدخال = "ملف">
- <نوع الإدخال = "الشهر">
- <نوع الإدخال = "رقم">
- <نوع الإدخال = "كلمة المرور">
- <نوع الإدخال = "راديو">
- <نوع الإدخال = "النطاق">
- <نوع الإدخال = "بحث">
- <input type = "tel">
- <نوع الإدخال = "نص">
- <نوع الإدخال = "الوقت">
- <نوع الإدخال = "url">
- <نوع الإدخال = "الأسبوع">
- <متر>
- <التقدم>
- <اختر>
- <textarea>
الاستخدام الصحيح للملصقات مع العناصر المذكورة أعلاه سيفيد:
- مستخدمو قارئ الشاشة (سيقرأون التسمية بصوت عالٍ ، عندما يركز المستخدم على العنصر)
- المستخدمون الذين يجدون صعوبة في النقر فوق مناطق صغيرة جدًا (مثل مربعات الاختيار) - لأنه عندما ينقر المستخدم على النص داخل
<label>
العنصر ، فإنه يقوم بتبديل الإدخال (يؤدي هذا إلى زيادة منطقة الدخول).
نصائح وملاحظات
نصيحة: يجب أن تكون السمة لـ <label>
مساوية لسمة id للعنصر المرتبط لربطهما معًا. يمكن أيضًا ربط التسمية بالعنصر عن طريق وضع العنصر داخل <label>
العنصر.
دعم المتصفح
Element | |||||
---|---|---|---|---|---|
<label> | Yes | Yes | Yes | Yes | Yes |
صفات
Attribute | Value | Description |
---|---|---|
for | element_id | Specifies the id of the form element the label should be bound to |
form | form_id | Specifies which form the label belongs to |
السمات العالمية
تدعم <label>
العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <label>
العلامة أيضًا سمات الحدث في HTML .
الصفحات ذات الصلة
مرجع DOM HTML: تسمية الكائن
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <label>
العنصر بالقيم الافتراضية التالية:
مثال
label {
cursor: default;
}