تگ label در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ label در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

در مطالب قبلی با فرم ها و نحوه ساخت فیلدهای درون فرم آشنا شدید. بهتر است برای راهنمایی بهتر کاربران با فیلد های درون فرم، برچسبی به آن ها اضافه کنید. برچسب ها با فیلد ها ارتباط برقرار می کنند. به عنوان مثال اگر input از نوع checkbox باشد و اگر بر روی متن برچسب کلیک شود تیک آن فعال یا غیر فعال خواهد شد. در این مطلب با تگ label در HTML آشنا خواهید شد.

تگ label چیست؟

با استفاده از تگ label می توان برای تگ input برچسب ایجاد کرد. برچسب، فیلدهای فرم را به کاربر معرفی می کند.

این تگ با <label> شروع شده و با </label> پایان می یابد.

<label>Text</label>

صفات تگ label

در این بخش با صفات تگ label آشنا خواهید شد.

صفت for

این صفت برای وصل کردن برچسب به input مورد نظر به کار می رود.

<label for="id">Text</label>

مقدار این صفت باید با مقدار صفت id تگ input برابر باشد در غیر این صورت فیلد توسط برچسب شناسایی نمی شود.

مثال:

<form method="post">
  <input type="text" id="username">
  <label for="username">نام کاربری:</label>
</form>

صفت form

این صفت فرم مربوط به برچسب را مشخص می کند.

<label form="id">Text</label>

مقدار این صفت باید با مقدار صفت id فرم مورد نظر برابر باشد. در مثال زیر id فرم مورد نظر data است.

مثال:

<form method="post" id="data">
  <input type="text" id="username">
</form>

<label form="data" for="username">نام کاربری:</label>

اجرا

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ label در اکثر مرورگرها به صورت زیر است:

label {
  cursor: default;
}

سازگاری با مرورگرها

تگ label با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS