Placeholder در برابر Label: چرا متن راهنمای داخل فیلد برچسب نیست، و مشخصات فیلدی که باید استفاده کنید
متن خاکستری داخل فیلد همان لحظه‌ای که کسی شروع به تایپ میکند ناپدید میشود. چرا placeholder جای label را نمی‌گیرد، راهنما کجا می‌نشیند، رنگ border که تست را رد میکند، و مشخصات دقیق فیلد برای تحویل به توسعه‌دهنده.
Placeholder برچسب نیست. همان لحظه‌ای که کسی شروع به تایپ میکند محو میشود و تنها سرنخِ کاربرد فیلد هم با آن می‌رود. بالای هر فیلد یک label واقعی بگذارید، راهنما را زیرش بنویسید، دور فیلد یک border مرئی بکشید و placeholder را فقط برای نمونه به کار ببرید. دلیلش و مشخصات دقیقش اینجاست.
وقتی placeholder نقش label را بازی میکند چه اتفاقی می‌افتد
قبل از تایپ: تمیز به نظر می‌رسد
✕ بعد از تایپ: این فیلد برای چه بود؟
فیلد سمت چپ مرتب به نظر می‌رسد و برای همین طراح‌ها دوستش دارند. فیلد سمت راست همان فیلد است، دو ثانیه بعد. کلمه «ایمیل» رفته، پس کاربر برچسبی برای چک کردن ندارد و در فرم بلند نمی‌داند کدام پاسخ مال کدام فیلد است.
این مشکل حافظه است، نه سلیقه. تحقیق Nielsen Norman Group درباره placeholder در فیلدهای فرم نشان داد متنی که ناپدید میشود حافظه کوتاه‌مدت را تحت فشار می‌گذارد و بررسی پاسخ‌ها پیش از ارسال را سخت میکند. راهنمای کلی‌تر ما درباره بهترین شیوه‌های طراحی فرم کل فرم را پوشش میدهد؛ این مقاله عمیقاً سراغ همان یک تصمیمی می‌رود که بیشتر دردسرها را می‌سازد.
مشکل دوم هم هست. متن placeholder بهطور پیشفرض خاکستری است و این خاکستری معمولاً بیش از حد کمرنگ است. خاکستری رایج #8E8E93 روی سفید کنتراستی حدود 3.3 به 1 دارد، کمتر از 4.5 به 1 که WCAG برای متن می‌خواهد. پس تنها راهنمایی که دادید خواندنش هم سخت است.
راه‌حل 1: یک label واقعی، بالای فیلد
ایمیل
✓ label بالای فیلد: بعد از تایپ هم میماند
ایمیل کاری
✓ placeholder فقط به عنوان نمونه
label بیرون از فیلد می‌نشیند، پس تایپ کردن هرگز به آن دست نمی‌زند. آن را بالای فیلد، تراز با لبه شروع، با اندازه 15 px و semibold بگذارید. بالا بهتر از کنار است چون در هر عرضی کار میکند، از جمله موبایل، و چشم در یک خط مستقیم در فرم پایین می‌رود.
برای صرفه‌جویی در فضا label را پنهان نکنید. اگر طرحی جا برای label ندارد، ایراد از طرح است نه از قاعده. floating label ها که هنگام focus در گوشه کوچک می‌شوند یک مصالحه‌اند: label را نگه میدارند، اما کوچک‌اند، زمان‌بندی دقیق می‌خواهند و ساختنشان به شکل قابل دسترس سخت‌تر از یک label ساده بالای فیلد است.
label واقعی همان چیزی است که screen reader ها اعلام می‌کنند. در HTML آن را به فیلد وصل کنید تا لمس label، input را focus کند:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
راه‌حل 2: راهنما زیر فیلد می‌رود
رمز عبور
حداقل 8 کاراکتر.
✓ راهنما زیر فیلد: هنگام تایپ میماند
✕ راهنما به جای placeholder: با اولین کلید می‌رود
مفیدترین چیزی که یک فیلد می‌تواند بگوید، مثل یک قالب یا یک قاعده، همان چیزی است که کاربر هنگام تایپ لازم دارد. پس جایش placeholder نیست، جایی که با اولین ضربه کلید ناپدید میشود. آن را زیر فیلد ببرید، با 13 px و خاکستری آرام‌تر، تا همیشه دیده شود.
خطاها از همین جایگاه استفاده می‌کنند. وقتی مشکلی پیش می‌آید، خط راهنما می‌تواند به پیام خطا تبدیل شود و چیدمان ثابت میماند. مقاله ما درباره رنگ پیام خطا توضیح میدهد آن پیام چه شکلی باید داشته باشد.
راه‌حل 3: یک border که دیده شود
ایمیل
✕ border با `#E5E5E5`: یک شبح
ایمیل
✓ border با `#79747E`: به‌راحتی پیدا میشود
فیلد یک کنترل است و کنترل باید پیدا شود. border خاکستریِ شبح‌مانند سمت چپ محبوب فایل‌های طراحی است چون سبک به نظر می‌رسد. روی صفحه واقعی تقریباً ناپدید میشود و کاربر نمی‌داند کجا را لمس کند.
WCAG 1.4.11 می‌خواهد اطلاعات بصری لازم برای شناسایی یک مؤلفه رابط کاربری دستکم 3 به 1 با رنگ کنارش کنتراست داشته باشد. #E5E5E5 روی سفید حدود 1.3 به 1 است که رد میشود. #79747E، رنگ outline در Material 3، حدود 4.6 به 1 است و با فاصله خوبی قبول میشود. از 1.5 px استفاده کنید تا روی صفحه‌های با تراکم پایین هم دوام بیاورد.
تفاوت با divider را در نظر داشته باشید. خاکستری روشنی مثل #E5E5EA بین ردیف‌های فهرست خوب است، چون divider فقط باید حس شود. border فیلد باید دیده شود. divider و خاکستری‌های surface را در رنگ پس‌زمینه حالت روشن بررسی کرده‌ایم.
راه‌حل 4: کیبورد درست را بخواهید
فیلدی که بداند برای چیست می‌تواند کیبوردی را باز کند که کمک میکند، هم در iPhone و هم در Android. فیلد ایمیلی که با کلید @ آماده باز شود، برای هر کاراکتری که از اشتباهش جلوگیری میکند یک لمس صرفه‌جویی میکند. در HTML فقط یک attribute است:
| فیلد | نوع input | چیزی که گوشی باز میکند |
|---|---|---|
| ایمیل | type="email" | کیبورد با @ و . |
| تلفن | type="tel" | صفحه اعداد |
| وب‌سایت | type="url" | کیبورد با / و .com |
| کارت یا کد | inputmode="numeric" | صفحه اعداد، بدون spinner |
| جستجو | type="search" | کلید جستجو روی کیبورد |
آن را با مقادیر autocomplete مثل email و name جفت کنید تا گوشی خودش فیلد را پر کند.
مشخصات فیلد
| بخش | مقدار |
|---|---|
| Label | بالای فیلد، 15 px، semibold |
| فیلد | ارتفاع 48 px، شعاع گوشه 12 px |
| Border | 1.5 px با رنگ #79747E |
| متن | 16 px، هرگز کوچک‌تر |
| راهنما | زیر فیلد، 13 px |
| Placeholder | یک نمونه، یا هیچ |
متن 16 px روی iPhone مهم است: Safari وقتی کاربر فیلدی با متن کوچک‌تر را لمس میکند صفحه را زوم میکند، که شبیه یک باگ حس میشود.
.field label { font: 600 15px/1.3 system-ui; display: block; margin-bottom: 6px; }
.field input {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid #79747E;
border-radius: 12px;
}
.field input::placeholder { color: #8E8E93; }
.field .hint { font-size: 13px; margin-top: 6px; }
ارتفاع 48 px یک هدف لمسی راحت میدهد و شعاع 12 px یک انتخاب است نه قاعده: با سیستم خودتان هماهنگ باشید و آن را روی همه فیلدها یکسان نگه دارید.
سوالات متداول
آیا میتوانم به جای label از placeholder استفاده کنم؟
نه. placeholder وقتی کسی تایپ میکند ناپدید میشود و فیلد نامش را از دست میدهد. یک label مرئی بالای فیلد بگذارید و placeholder را برای قالب نمونه نگه دارید، یا خالی بگذارید.
آیا متن placeholder قابل دسترس است؟
بهطور پیشفرض بهندرت. متن placeholder معمولاً خاکستری روشن با کنتراست پایین است، با ورود متن ناپدید میشود و بعضی ابزارهای کمکی آن را label حساب نمیکنند. label واقعی متصل به input انتخاب قابل دسترس است.
label کجا برود: بالا یا داخل فیلد؟
بالا، تراز با لبه شروع. در هر عرض صفحه کار میکند، هنگام تایپ دیده میماند و چشم یک خط مستقیم را در فرم دنبال میکند.
در placeholder چه بنویسم؟
یک نمونه از قالب، مثل name@company.com، یا اصلاً هیچ. دستورالعملی را که کاربر هنگام تایپ لازم دارد هرگز آنجا نگذارید. جایش یک راهنما زیر فیلد است.
border فیلد ورودی چه رنگی باشد؟
آنقدر تیره که طبق WCAG 1.4.11 دستکم 3 به 1 با صفحه کنتراست داشته باشد. #79747E، رنگ outline در Material 3، روی سفید حدود 4.6 به 1 است. #E5E5E5 کمرنگ حدود 1.3 به 1 است و رد میشود.
آیا floating label مشکل placeholder را حل میکند؟
تا حدی. با کوچک کردن label بالای متن آن را مرئی نگه میدارند، اما اندازه کوچک، انیمیشن و کار دسترسپذیری باعث میشود label ساده بالای فیلد پیشفرض امنتری باشد.
منابع
- Nielsen Norman Group، Placeholders in Form Fields Are Harmful (Katie Sherwin، 2014): متن placeholder با تایپ ناپدید میشود، حافظه کوتاه‌مدت را تحت فشار می‌گذارد و بررسی پاسخ‌ها را سخت میکند.
- WCAG 2.1، 1.4.11 Non-text Contrast (3 به 1 برای مؤلفه‌های رابط کاربری) و 1.4.3 Contrast (Minimum).
- نسبت‌ها روی سفید، محاسبه‌شده با فرمول luminance نسبی WCAG:
#E5E5E5برابر 1.26 به 1،#79747Eبرابر 4.55 به 1، خاکستری placeholder یعنی#8E8E93برابر 3.26 به 1.#79747Eهمان Outline در Material 3 است (NeutralVariant50)، برگرفته از androidx Compose ColorLightTokens. - MDN، the input element, type attribute:
type="email"روی گوشی کیبورد ایمیل را باز میکند. - اندازه‌های فیلد در جدول مشخصات (label با 15 px، ارتفاع 48 px، شعاع 12 px، راهنما با 13 px) توصیه خود ماست، نه مقدار یک پلتفرم.
- ابتدا به صورت کاروسل در UX Brainy منتشر شد.
Want every form in your product to feel this easy to fill in? Our team designs and builds product UI with the field details decided once.
Get Started
