عنصر label و ارتباط آن با ورودی‌ها

label: بدون این تگ، فرمت واقعاً ناقصه

تو درس قبل چندبار تگ label رو کنار input دیدیم، اما فقط سطحی ازش رد شدیم. این تگ آنقدر برای فرم‌های قابل‌استفاده مهمه که یه درس مستقل می‌طلبه. تو این درس می‌بینیم label دقیقاً چیکار می‌کنه و چرا نادیده‌گرفتنش یکی از رایج‌ترین اشتباهات تو ساخت فرمه.

label چیه؟

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

تگ label یه برچسب متنی برای یه ورودی فرمه؛ یعنی توضیح می‌ده این فیلد قراره چه اطلاعاتی رو از کاربر بگیره. اما کد بالا، با اینکه از نظر ظاهری درست به نظر می‌رسه، یه مشکل مهم داره: هیچ ارتباط رسمی و ساختاری بین این label و اون input وجود نداره؛ اونا فقط از نظر بصری کنار هم قرار گرفتن.

روش درست: اتصال با for و id

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

برای اینکه یه ارتباط رسمی بین label و input برقرار بشه، باید ویژگی for رو روی label بذاری و مقدارش رو دقیقاً برابر با ویژگی id همون input قرار بدی. حالا مرورگر می‌فهمه این دو تگ رسماً به هم مرتبطن، نه فقط از نظر بصری نزدیک به هم.

چرا این ارتباط رسمی این‌قدر مهمه؟ (فایده‌ی اول: کلیک روی متن)

وقتی این ارتباط برقرار باشه، کاربر می‌تونه روی خود متن label کلیک کنه تا فوکوس بره روی input مرتبطش؛ برای چک‌باکس و رادیو، این یعنی می‌شه با کلیک روی متن کنارشون، تیکشون زد، نه فقط با کلیک دقیق روی خود دایره یا مربع کوچیک.

<input type="checkbox" id="agree" name="agree">
<label for="agree">با قوانین موافقم</label>

تو این مثال، کاربر می‌تونه هم روی خود چک‌باکس کلیک کنه، هم روی متن «با قوانین موافقم»؛ هر دوتا همون نتیجه رو می‌دن. این یه بهبود واقعی تو تجربه‌ی کاربریه، مخصوصاً تو موبایل که دایره‌ی چک‌باکس ممکنه خیلی کوچیک باشه و لمس دقیقش سخت باشه.

فایده‌ی دوم: دسترسی‌پذیری برای صفحه‌خوان

این مهم‌ترین دلیل وجود label هست. وقتی یه کاربر نابینا با صفحه‌خوان وارد یه فیلد ورودی می‌شه، صفحه‌خوان باید بگه این فیلد برای چیه. اگه label به‌درستی با for و id به input وصل شده باشه، صفحه‌خوان دقیقاً متن label رو اعلام می‌کنه («نام کاربری، فیلد متنی»)؛ اما اگه label فقط از نظر بصری کنار input باشه (بدون for/id)، صفحه‌خوان هیچ اطلاعاتی از این فیلد نداره جز اینکه یه ورودی خالیه.

روش دیگر اتصال: قراردادن input داخل خود label

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

یه روش جایگزین اینه که input رو مستقیم داخل خود تگ label بذاری. تو این حالت، نیازی به ویژگی‌های for و id نیست، چون ارتباط از طریق تودرتویی (Nesting) خودش به‌طور ضمنی برقرار می‌شه. هر دو روش (for/id یا تودرتویی) از نظر فنی درستن، اما روش اول (for/id) رایج‌تر و معمولاً خواناتره، مخصوصاً تو فرم‌های پیچیده که چیدمان بصری label و input ممکنه با ترتیب کد یکی نباشه.

یه اشتباه رایج: استفاده از placeholder به‌جای label

<!-- اشتباه -->
<input type="text" name="username" placeholder="نام کاربری">

خیلی از طراح‌ها فقط از placeholder استفاده می‌کنن و فکر می‌کنن دیگه نیازی به label نیست، چون به نظر می‌رسه همون کار رو انجام می‌ده. اما این کار چند مشکل داره:

• به‌محض اینکه کاربر شروع به تایپ می‌کنه، متن placeholder کاملاً ناپدید می‌شه؛ اگه کاربر وسط پرکردن فرم حواسش پرت بشه، دیگه یادش نمیاد این فیلد برای چی بود.
• خیلی از صفحه‌خوان‌ها، placeholder رو به‌درستی یا اصلاً نمی‌خونن، برخلاف label که همیشه به‌وضوح اعلام می‌شه.
• رنگ پیش‌فرض placeholder معمولاً کم‌رنگ‌تر و کم‌کنتراست‌تر از متن معمولیه، که برای کاربران کم‌بینا (حتی بدون صفحه‌خوان) سخت‌تر خونده می‌شه.

بهترین روش، استفاده‌ی هم‌زمان از label (برای توضیح دائمی و قابل‌دسترس) و placeholder (برای یه راهنمای اضافه‌ی کوتاه، مثل فرمت موردانتظار) هست:

<label for="phone">شماره تلفن</label>
<input type="tel" id="phone" name="phone" placeholder="۰۹۱۲۳۴۵۶۷۸۹">

یه فرم کامل با label های درست

<form action="/contact" method="post">
  <label for="name">نام کامل</label>
  <input type="text" id="name" name="name">

  <label for="email">ایمیل</label>
  <input type="email" id="email" name="email">

  <label for="message">پیام شما</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">ارسال</button>
</form>

تگ textarea رو تو درس بعدی همین فصل کامل می‌بینیم؛ همین‌جا فقط توجه کن که همون قانون label برای textarea هم دقیقاً مثل input صدق می‌کنه.

نکته‌ی مهم: هر id باید تو کل صفحه یکتا باشه

همون‌طور که تو درس ۴-۳ درباره‌ی id گفتیم، این ویژگی باید تو کل صفحه یکتا باشه. اگه تو یه فرم بزرگ، اشتباهی دو تا input با id یکسان داشته باشی، label فقط به اولین موردی که پیدا کنه وصل می‌شه، که می‌تونه باعث گیج‌شدن کاربر یا صفحه‌خوان بشه.

چند اشتباه رایج

• نوشتن label بدون ویژگی for، که باعث می‌شه ارتباط رسمی با input برقرار نشه.
• استفاده از placeholder به‌جای label، به‌جای استفاده‌ی هم‌زمان و مکمل این دو.
• عدم تطابق مقدار for روی label با id روی input.
• تکرار یه id یکسان برای چند input مختلف تو یک فرم.

بهترین روش‌ها

• همیشه هر ورودی فرم رو با یه label مرتبط (از طریق for و id) همراه کن.
• هیچ‌وقت placeholder رو جایگزین label نکن؛ این دو مکمل هم هستن، نه جایگزین.
• مقدار id هر ورودی رو کوتاه، منحصربه‌فرد و معنادار بنویس.

نکته‌ی سئو

label تأثیر مستقیمی روی سئو ندارد، اما فرم‌های قابل‌استفاده‌تر (که کاربر راحت‌تر پرشون می‌کنه) نرخ تکمیل فرم و رضایت کاربر را افزایش می‌دهند، که به‌طور غیرمستقیم روی معیارهای تعامل کاربر با سایت تأثیر مثبت دارد.

نکته‌ی دسترسی‌پذیری

label یکی از حیاتی‌ترین عناصر برای دسترسی‌پذیری فرم‌هاست؛ بدون اتصال صحیح label به input، کاربران صفحه‌خوان عملاً نمی‌توانند بفهمند هر فیلد فرم برای چه اطلاعاتی طراحی شده است، حتی اگر از نظر بصری همه‌چیز واضح به نظر برسد.

جمع‌بندی

تگ label با استفاده از ویژگی for (که باید با id ورودی مطابقت داشته باشد) یا با قراردادن ورودی داخل خود label، یک ارتباط رسمی و ساختاری با فیلد مرتبطش برقرار می‌کند. این ارتباط هم امکان کلیک روی متن برای فوکوس‌کردن فیلد را فراهم می‌کند و هم برای دسترسی‌پذیری صفحه‌خوان‌ها حیاتی است؛ placeholder هرگز نباید جایگزین label شود.