Placeholder مقابل Label: لماذا النص التلميحي ليس تسمية للحقل، ومواصفات الحقل التي يجب اعتمادها
النص الرمادي داخل الحقل يختفي لحظة بدء الكتابة. لماذا لا يمكن للـ placeholder أن يحل محل التسمية، وأين تذهب التلميحات، ولون الحد الذي ينجح، والمواصفات الدقيقة التي تسلّمها للمطور.
الـ placeholder ليس تسمية (label). يختفي لحظة بدء الكتابة، ومعه يختفي الدليل الوحيد على غرض الحقل. ضع تسمية حقيقية فوق كل حقل، والتلميحات تحته، وحدًا مرئيًا حوله، واستخدم الـ placeholder لمثال فقط. إليك السبب والمواصفات الدقيقة.
ما الذي يسوء عندما يكون الـ placeholder هو التسمية
قبل الكتابة: يبدو نظيفًا
✕ بعد الكتابة: لماذا كان هذا الحقل؟
الحقل الأيسر يبدو مرتبًا، ولهذا يحبه المصممون. الحقل الأيمن هو نفسه بعد ثانيتين. كلمة "البريد الإلكتروني" اختفت، فلا تسمية يراجعها المستخدم، وفي النموذج الطويل لا يستطيع أن يعرف أي إجابة تخص أي حقل.
هذه مشكلة ذاكرة وليست مشكلة ذوق. وجدت أبحاث Nielsen Norman Group حول الـ placeholder في حقول النماذج أن النص المختفي يجهد الذاكرة قصيرة المدى، ويصعّب مراجعة الإجابات قبل الإرسال. دليلنا الأوسع عن أفضل ممارسات تصميم النماذج يغطي النموذج كاملًا، أما هذه الورقة فتتعمق في القرار الواحد الذي يسبب معظم المشاكل.
وهناك مشكلة ثانية. نص الـ placeholder رمادي افتراضيًا، وهذا الرمادي غالبًا باهت جدًا. الرمادي الشائع #8E8E93 تباينه نحو 3.3 إلى 1 على الأبيض، أي أقل من 4.5 إلى 1 الذي تطلبه WCAG للنص. فالتلميح الوحيد الذي قدمته صعب القراءة أيضًا.
الحل 1: تسمية حقيقية فوق الحقل
البريد الإلكتروني
✓ التسمية فوق الحقل: باقية بعد الكتابة
بريد العمل
✓ الـ placeholder كمثال فقط
التسمية تقع خارج الحقل، فلا تمسها الكتابة أبدًا. ضعها فوق الحقل، محاذاة لبداية السطر، بحجم 15 px وبخط semibold. وجودها فوق أفضل من جانب الحقل لأنها تعمل في كل العروض، بما فيها الهاتف، وتتحرك العين أسفل النموذج في خط مستقيم واحد.
لا تخفِ التسمية لتوفير المساحة. إن لم يتسع التصميم للتسميات فالتصميم هو الخطأ، لا القاعدة. التسميات العائمة التي تتقلص إلى الزاوية عند التركيز حل وسط: تحتفظ بالتسمية لكنها صغيرة وتحتاج توقيتًا دقيقًا وبناؤها بشكل متاح أصعب من تسمية بسيطة فوق الحقل.
التسمية الحقيقية هي أيضًا ما يقرؤه قارئ الشاشة. في HTML اربطها بالحقل ليركّز النقر عليها على الإدخال:
<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: حد يراه الناس
البريد الإلكتروني
✕ حد #E5E5E5: شبح
البريد الإلكتروني
✓ حد #79747E: سهل العثور عليه
الحقل عنصر تحكم، وعنصر التحكم يجب أن يكون سهل العثور عليه. الحد الرمادي الشبحي على اليسار مفضل في ملفات التصميم لأنه يبدو خفيفًا. على شاشة حقيقية يكاد يختفي، ولا يعرف الناس أين يضغطون.
تطلب WCAG 1.4.11 أن تكون المعلومات البصرية اللازمة لتمييز مكوّن الواجهة بتباين لا يقل عن 3 إلى 1 مع اللون المجاور. #E5E5E5 على الأبيض نحو 1.3 إلى 1، فيفشل. أما #79747E، وهو لون الـ outline في Material 3، فنحو 4.6 إلى 1، وينجح بارتياح. استخدم 1.5 px ليثبت على الشاشات منخفضة الكثافة أيضًا.
لاحظ الفرق مع الفواصل. رمادي فاتح مثل #E5E5EA مناسب بين صفوف القائمة، لأن الفاصل يكفي أن يُلاحَظ. أما حد الحقل فيجب أن يُرى. تناولنا رماديات الفواصل والأسطح في لون خلفية الوضع الفاتح.
الحل 4: اطلب لوحة المفاتيح الصحيحة
الحقل الذي يعرف غرضه يستطيع فتح لوحة المفاتيح المفيدة، على iPhone وAndroid سواء. حقل بريد يفتح ومفتاح @ جاهز يوفر نقرة ويمنع أخطاء الكتابة. في HTML هي سمة واحدة:
| الحقل | نوع الإدخال | ما يفتحه الهاتف |
|---|---|---|
| البريد الإلكتروني | type="email" | لوحة فيها @ و . |
| الهاتف | type="tel" | لوحة أرقام |
| الموقع | type="url" | لوحة فيها / و .com |
| البطاقة أو الرمز | inputmode="numeric" | لوحة أرقام بلا spinner |
| البحث | type="search" | مفتاح بحث على لوحة المفاتيح |
أضف إلى ذلك قيم autocomplete مثل email وname، ليملأ الهاتف الحقل بنفسه.
مواصفات الحقل
| الجزء | القيمة |
|---|---|
| التسمية | فوق الحقل، 15 px، semibold |
| الحقل | ارتفاع 48 px، نصف قطر 12 px |
| الحد | 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 اختيار لا قاعدة: طابِق نظامك وأبقه نفسه في كل حقل.
الأسئلة الشائعة
هل أستخدم placeholder بدل التسمية؟
لا. الـ placeholder يختفي عند الكتابة فيفقد الحقل اسمه. ضع تسمية مرئية فوق الحقل واحتفظ بالـ placeholder لصيغة مثال، أو اتركه فارغًا.
هل نص الـ placeholder متاح (accessible)؟
نادرًا افتراضيًا. نص الـ placeholder عادة رمادي فاتح بتباين منخفض، ويختفي عند الإدخال، وبعض أدوات المساعدة لا تعامله كتسمية. التسمية الحقيقية المرتبطة بالإدخال هي الخيار المتاح.
أين توضع التسمية: فوق الحقل أم داخله؟
فوقه، محاذاة لبداية السطر. تعمل في كل عرض شاشة، وتبقى ظاهرة أثناء الكتابة، وتتبع العين خطًا مستقيمًا واحدًا أسفل النموذج.
ماذا أضع في الـ placeholder؟
مثالًا على الصيغة، مثل name@company.com، أو لا شيء. لا تضع فيه أبدًا التعليمات التي يحتاجها الناس أثناء الكتابة. مكانها تلميح تحت الحقل.
ما لون حد حقل الإدخال؟
داكن بما يكفي ليبلغ 3 إلى 1 على الأقل مقابل الصفحة، كما تشترط WCAG 1.4.11. اللون #79747E، لون outline في Material 3، نحو 4.6 إلى 1 على الأبيض. أما #E5E5E5 الباهت فنحو 1.3 إلى 1 ويفشل.
هل تحل التسميات العائمة مشكلة الـ placeholder؟
جزئيًا. تُبقي التسمية ظاهرة بتصغيرها فوق النص، لكن الحجم الصغير والحركة وعمل إمكانية الوصول تجعل التسمية البسيطة فوق الحقل الخيار الافتراضي الأكثر أمانًا.
المصادر
- 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).
- النسب على الأبيض، محسوبة بصيغة السطوع النسبي في WCAG:
#E5E5E51.26 إلى 1، و#79747E4.55 إلى 1، ورمادي الـ placeholder#8E8E933.26 إلى 1. اللون#79747Eهو Outline في Material 3 (NeutralVariant50)، مقروءًا من androidx Compose ColorLightTokens. - MDN, the input element, type attribute:
type="email"يظهر لوحة مفاتيح البريد على الهواتف. - أحجام الحقل في جدول المواصفات (تسمية 15 px، ارتفاع 48 px، نصف قطر 12 px، تلميح 13 px) توصية منا، وليست قيمة منصة.
- نُشر أولًا كـ carousel على 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
