آموزش تگ label در HTML

آموزش تگ label در HTML

تگ <label> در HTML برای توصیف و مشخص کردن بخش‌های مختلف فرم‌ها و ورودی‌های کاربر استفاده می‌شود. این تگ به عنوان یک برچسب برای عناصر ورودی مانند فیلدهای متنی، کلیدهای انتخاب، و دکمه‌های ارسال استفاده می‌شود تا برای کاربران معنی‌دارتر و قابل درک‌تر شود که هر ورودی به چه معنا و اهدافی مربوط است. در این مقاله، به طور جامع به توضیحات، حالت‌ها، و ویژگی‌های تگ <label> می‌پردازیم.

ساختار تگ label

تگ <label> دارای ساختار زیر است:

<label for="نام_ویژگی">متن برچسب</label>

حالت‌های تگ label

تگ <label> دو حالت دارد:

  1. باز: متن برچسب به طور مستقیم نمایش داده می‌شود.
  2. بسته: متن برچسب به طور ضمنی برای یک ورودی مشخص استفاده می‌شود.

ویژگی‌های تگ label

تگ <label> از ویژگی‌های زیر پشتیبانی می‌کند:

  1. for: این ویژگی به تعیین ارتباط تگ <label> با عنصری دیگر در سند کمک می‌کند.
  2. accesskey: این ویژگی به تعیین یک کلید میانبر برای متن برچسب کمک می‌کند.
  3. form: این ویژگی به تعیین فرمی که ورودی مرتبط با آن است، کمک می‌کند.
  4. name: این ویژگی به تعیین نام برچسب کمک می‌کند.
  5. tabindex: این ویژگی به تعیین ترتیب فوکوس بر روی عنصر کمک می‌کند.

مثال

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

نکات مهم

  1. استفاده از تگ <label> برای هر ورودی کاربر بسیار مهم است تا رابط کاربری قابل درک و ساده‌تری ارائه شود.
  2. استفاده از ویژگی for تگ <label> برای ارتباط درست با ورودی‌های مرتبط بسیار حیاتی است.
  3. از ویژگی‌های دیگر تگ <label> مانند accesskey و tabindex برای بهبود دسترسی و مدیریت ورودی‌ها استفاده کنید.

نتیجه‌گیری

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.