Placeholder बनाम Label: Placeholder टेक्स्ट लेबल क्यों नहीं है, और इस्तेमाल करने लायक फ़ील्ड स्पेक
फ़ील्ड के अंदर का ग्रे टेक्स्ट टाइप करते ही गायब हो जाता है। placeholder लेबल की जगह क्यों नहीं ले सकता, हिंट कहाँ जाते हैं, कौन सा बॉर्डर रंग पास होता है, और डेवलपर को देने लायक सटीक फ़ील्ड स्पेक।
Placeholder लेबल नहीं है। कोई टाइप करना शुरू करता है और वह गायब हो जाता है, और उसके साथ गायब हो जाता है यह इकलौता सुराग कि फ़ील्ड किस लिए था। हर फ़ील्ड के ऊपर असली लेबल रखिए, उसके नीचे हिंट, उसके चारों ओर दिखने वाला बॉर्डर, और placeholder सिर्फ़ उदाहरण के लिए इस्तेमाल कीजिए। वजह और सटीक स्पेक नीचे हैं।
जब placeholder ही लेबल हो, तो क्या बिगड़ता है
टाइप करने से पहले: साफ़ दिखता है
✕ टाइप करने के बाद: यह फ़ील्ड किसलिए था?
बायाँ फ़ील्ड सुथरा दिखता है, इसीलिए डिज़ाइनरों को पसंद है। दायाँ फ़ील्ड दो सेकंड बाद वही फ़ील्ड है। "Email" शब्द जा चुका है, इसलिए व्यक्ति के पास जाँचने के लिए कोई लेबल नहीं बचा, और लंबे फ़ॉर्म में वह समझ नहीं पाता कि कौन सा जवाब किस फ़ील्ड का है।
यह याददाश्त की समस्या है, पसंद की नहीं। Nielsen Norman Group की फ़ॉर्म फ़ील्ड में placeholder पर रिसर्च ने पाया कि गायब होने वाला टेक्स्ट अल्पकालिक याददाश्त पर बोझ डालता है, और सबमिट से पहले जवाब जाँचना मुश्किल बना देता है। हमारी बड़ी गाइड फ़ॉर्म डिज़ाइन की सर्वश्रेष्ठ प्रथाएँ पूरे फ़ॉर्म को कवर करती है; यह पेपर उस एक फ़ैसले पर गहराई से जाता है जो ज़्यादातर परेशानी की जड़ है।
एक दूसरी समस्या भी है। Placeholder टेक्स्ट डिफ़ॉल्ट रूप से ग्रे होता है, और वह ग्रे अक्सर बहुत हल्का होता है। आम #8E8E93 placeholder ग्रे का सफ़ेद पर कंट्रास्ट लगभग 3.3 से 1 है, जो टेक्स्ट के लिए WCAG की माँग 4.5 से 1 से कम है। यानी आपका दिया इकलौता हिंट पढ़ने में भी मुश्किल है।
फ़िक्स 1: असली लेबल, फ़ील्ड के ऊपर
✓ लेबल ऊपर: टाइप करने के बाद भी मौजूद
Work email
✓ Placeholder सिर्फ़ उदाहरण के रूप में
लेबल फ़ील्ड के बाहर रहता है, इसलिए टाइपिंग उसे कभी नहीं छूती। इसे फ़ील्ड के ऊपर, बाएँ संरेखित, 15 px semibold में रखिए। बगल की जगह ऊपर बेहतर है क्योंकि यह हर चौड़ाई पर काम करता है, फ़ोन पर भी, और नज़र फ़ॉर्म में एक सीधी रेखा में नीचे जाती है।
जगह बचाने के लिए लेबल मत छिपाइए। अगर डिज़ाइन में लेबल के लिए जगह नहीं है, तो डिज़ाइन ग़लत है, नियम नहीं। Floating लेबल, जो फ़ोकस पर कोने में छोटे हो जाते हैं, एक समझौता हैं: वे लेबल बचाते हैं, पर छोटे होते हैं, उन्हें सावधानी से टाइमिंग चाहिए, और उन्हें एक्सेसिबल बनाना सादे ऊपर वाले लेबल से कठिन है।
असली लेबल वही है जिसे स्क्रीन रीडर बोलते हैं। HTML में उसे फ़ील्ड से जोड़िए ताकि लेबल पर टैप करने से input फ़ोकस हो:
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email"
placeholder="name@company.com" />
फ़िक्स 2: हिंट फ़ील्ड के नीचे
Password
कम से कम 8 अक्षर।
✓ हिंट फ़ील्ड के नीचे: टाइप करते समय बना रहता है
✕ Placeholder में हिंट: पहली कुंजी पर गायब
फ़ील्ड जो सबसे काम की बात कह सकता है, जैसे फ़ॉर्मैट या नियम, वही चीज़ लोगों को टाइप करते समय चाहिए। इसलिए वह placeholder में नहीं रह सकती, जहाँ पहली keystroke पर गायब हो जाती है। उसे फ़ील्ड के नीचे, 13 px में हल्के ग्रे में रखिए, जहाँ वह हर समय दिखती रहे।
एरर भी इसी जगह का इस्तेमाल करते हैं। कुछ गड़बड़ होने पर हिंट वाली पंक्ति एरर संदेश बन सकती है, जिससे लेआउट स्थिर रहता है। हमारा पेपर एरर संदेश का रंग बताता है कि वह संदेश कैसा दिखना चाहिए।
फ़िक्स 3: ऐसा बॉर्डर जो लोगों को दिखे
✕ #E5E5E5 बॉर्डर: एक भूत
✓ #79747E बॉर्डर: आसानी से मिल जाता है
फ़ील्ड एक कंट्रोल है, और कंट्रोल ढूँढने लायक होना चाहिए। बाईं ओर का भूतिया ग्रे बॉर्डर डिज़ाइन फ़ाइलों का चहेता है, क्योंकि वह हल्का दिखता है। असली स्क्रीन पर वह लगभग ग़ायब हो जाता है, और लोगों को पता नहीं चलता कि कहाँ टैप करें।
WCAG 1.4.11 माँगता है कि यूज़र इंटरफ़ेस कॉम्पोनेंट को पहचानने के लिए ज़रूरी दृश्य जानकारी का पास के रंग के मुक़ाबले कम से कम 3 से 1 कंट्रास्ट हो। सफ़ेद पर #E5E5E5 लगभग 1.3 से 1 है, जो फ़ेल है। #79747E, जो Material 3 का outline रंग है, लगभग 4.6 से 1 है, जो आराम से पास होता है। 1.5 px रखिए ताकि कम घनत्व वाली स्क्रीन पर भी टिके।
डिवाइडर से फ़र्क़ समझ लीजिए। #E5E5EA जैसा हल्का ग्रे लिस्ट की पंक्तियों के बीच ठीक है, क्योंकि डिवाइडर को बस नोटिस होना होता है। फ़ील्ड के बॉर्डर को दिखना होता है। डिवाइडर और सतह के ग्रे हमने लाइट मोड बैकग्राउंड रंग में कवर किए थे।
फ़िक्स 4: सही कीबोर्ड माँगिए
जो फ़ील्ड जानता है कि वह किसलिए है, वह iPhone और Android दोनों पर काम का कीबोर्ड खोल सकता है। जो ईमेल फ़ील्ड @ कुंजी तैयार रखकर खुलता है, वह हर उस अक्षर पर एक टैप बचाता है जिसमें टाइपो रुकता है। HTML में यह एक attribute है:
| फ़ील्ड | Input type | फ़ोन क्या खोलता है |
|---|---|---|
type="email" | @ और . वाला कीबोर्ड | |
| फ़ोन | type="tel" | नंबर पैड |
| वेबसाइट | type="url" | / और .com वाला कीबोर्ड |
| कार्ड या कोड | inputmode="numeric" | नंबर पैड, बिना spinner |
| सर्च | type="search" | कीबोर्ड पर सर्च कुंजी |
इसके साथ email और name जैसे autocomplete मान जोड़िए, ताकि फ़ोन फ़ील्ड ख़ुद भर सके।
फ़ील्ड स्पेक
| हिस्सा | मान |
|---|---|
| लेबल | फ़ील्ड के ऊपर, 15 px, semibold |
| फ़ील्ड | 48 px ऊँचा, 12 px radius |
| बॉर्डर | #79747E में 1.5 px |
| टेक्स्ट | 16 px, इससे छोटा कभी नहीं |
| हिंट | फ़ील्ड के नीचे, 13 px |
| Placeholder | एक उदाहरण, या कुछ नहीं |
iPhone पर 16 px का टेक्स्ट मायने रखता है: छोटे टेक्स्ट वाले फ़ील्ड पर टैप करने पर 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 radius एक चुनाव है, नियम नहीं: अपने सिस्टम से मिलाइए और हर फ़ील्ड पर एक जैसा रखिए।
FAQ
क्या लेबल की जगह placeholder इस्तेमाल करना चाहिए?
नहीं। Placeholder टाइप करते ही गायब हो जाता है, इसलिए फ़ील्ड अपना नाम खो देता है। फ़ील्ड के ऊपर दिखने वाला लेबल रखिए और placeholder को उदाहरण फ़ॉर्मैट के लिए रखिए, या खाली छोड़िए।
क्या placeholder टेक्स्ट एक्सेसिबल है?
डिफ़ॉल्ट रूप से शायद ही। Placeholder टेक्स्ट आम तौर पर कम कंट्रास्ट वाला हल्का ग्रे होता है, input पर गायब हो जाता है, और कुछ सहायक टूल उसे लेबल नहीं मानते। Input से जुड़ा असली लेबल ही एक्सेसिबल विकल्प है।
लेबल कहाँ जाए: फ़ील्ड के ऊपर या अंदर?
ऊपर, बाएँ संरेखित। यह हर स्क्रीन चौड़ाई पर काम करता है, टाइप करते समय दिखता रहता है, और नज़र फ़ॉर्म में एक सीधी रेखा में नीचे जाती है।
Placeholder में क्या रखना चाहिए?
फ़ॉर्मैट का उदाहरण, जैसे name@company.com, या कुछ भी नहीं। टाइप करते समय लोगों को जो निर्देश चाहिए, उसे वहाँ कभी मत रखिए। वह फ़ील्ड के नीचे हिंट में जाता है।
Input बॉर्डर का रंग क्या होना चाहिए?
इतना गहरा कि पेज के मुक़ाबले कम से कम 3 से 1 तक पहुँचे, जैसा WCAG 1.4.11 माँगता है। #79747E, Material 3 का outline रंग, सफ़ेद पर लगभग 4.6 से 1 है। हल्का #E5E5E5 लगभग 1.3 से 1 है और फ़ेल होता है।
क्या floating लेबल 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 relative luminance फ़ॉर्मूले से निकाले गए: #E5E5E5 1.26 से 1, #79747E 4.55 से 1, placeholder ग्रे #8E8E93 3.26 से 1। #79747E Material 3 का Outline (NeutralVariant50) है, androidx Compose ColorLightTokens से पढ़ा गया।
- MDN, the input element, type attribute:
type="email"फ़ोन पर ईमेल कीबोर्ड लाता है। - स्पेक टेबल के फ़ील्ड आकार (15 px लेबल, 48 px ऊँचाई, 12 px radius, 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
