क्या एक इनपुट फ़ील्ड में दो लेबल हो सकते हैं?


134

मैरी के पास एक छोटा रूप था, और इसके क्षेत्र जहां सिर्फ इतना लेबल था।
जब भी कोई त्रुटि सामने आती है, तो भ्रम पैदा होता है।

मुझे प्रत्येक इनपुट फ़ील्ड के लिए एक लेबल मिला है ... बहुत मानक चक्कर। फ़ॉर्म को मान्य करने के बाद, मैं फ़ॉर्म के शीर्ष पर एक उपयोगी छोटा पैराग्राफ़ प्रदर्शित कर रहा हूं, जिसमें यह जानकारी दी गई है कि क्या जानकारी गुम या गलत है।

क्या एक ही इनपुट फ़ील्ड के लिए मेरे पास दो लेबल हो सकते हैं? एक उचित रूप में, और एक सत्यापन अनुस्मारक पाठ में? क्या ऐसा कोई कारण है जो मुझे नहीं करना चाहिए?


क्या आपकी कोशिश है कि क्या होता है? अगर यह काम करता है तो मुझे विश्वास नहीं होता कि यह आपके फॉर्म और न ही पेज को कोई नुकसान पहुंचाएगा। और आपको एक प्लस मिलेगा क्योंकि उपयोग सत्यापन त्रुटि पर क्लिक करने और सही क्षेत्र पर ध्यान केंद्रित करने में सक्षम होगा।
फेलिप साइप्रानो

मैंने इसकी कोशिश नहीं की, लेकिन मुझे लगता है कि यह संभव होगा। लेकिन मैं इसका उपयोग करने की अनुशंसा नहीं करता, क्योंकि एक लेबल परिभाषित करता है कि क्षेत्र क्या है, एक त्रुटि संदेश नहीं। इसलिए मुझे सत्यापन चेतावनी के लिए एक लेबल का उपयोग नहीं करना चाहिए।
गुइडो हेंड्रिक्स

1
क्या यह सामान्य UI डिज़ाइन / प्रयोज्य प्रश्न है?
जूल

हाँ। यह "काम करता है" ... लेकिन क्या कोई कारण है कि यह खराब डिजाइन है? मैं अनुमान लगा रहा हूं कि यह एक्सेसिबिलिटी कारणों से हो सकता है, लेकिन एक सामान्य उपयोगकर्ता के लिए मैं त्रुटि संदेश पर क्लिक करने में सक्षम हूं और गड़बड़ किए गए क्षेत्र में ले जाया जा सकता है, इससे चीजें आसान हो जाएंगी ... मुझे नहीं पता कि यह होगा या नहीं "नेत्रहीनों के लिए पाठक" या जैसी गड़बड़ करें।
10:30

1
कुछ मामलों में, अपने नियंत्रण और पाठ को एक के अंदर रखना आसान है label। तुम भी forऔर idविशेषताओं को छोड़ सकते हैं । विनिर्देश इस अंतर्निहित संघ कहता है।
rybo111

जवाबों:


158

मुझे लगता है कि यह प्रश्न HTML रूपों के बारे में है। से विनिर्देश :

नियंत्रण करने के लिए जानकारी संलग्न करने के लिए LABEL तत्व का उपयोग किया जा सकता है। प्रत्येक LABEL तत्व ठीक एक फॉर्म कंट्रोल से जुड़ा है।

इस प्रकार, प्रत्येक प्रपत्र नियंत्रण को कई लेबल द्वारा संदर्भित किया जा सकता है, लेकिन प्रत्येक लेबल केवल एक नियंत्रण को संदर्भित कर सकता है। तो अगर यह एक नियंत्रण के लिए एक दूसरा लेबल है करने के लिए समझ में आता है (और आप का वर्णन स्थिति में, यह करता है) एक दूसरे लेबल जोड़ने के लिए स्वतंत्र महसूस हो रहा है।


2
यह वास्तव में एक प्रयोज्य / पहुंच प्रश्न से अधिक है तो HTML। Html काम करता है।
aslum

2
हम सभी को केवल मान्य कोड का उपयोग करना चाहिए, अन्यथा भविष्य में या किसी और के लिए या कुछ जेएस लाइब्रेरी के साथ या जो भी चीजें हो सकती हैं।
शर्नान्देज़

1
सही जवाब है रॉब का। यह समाधान देखे गए उपयोगकर्ताओं के लिए काम करता है और कुछ स्क्रीन पाठकों में विफल रहता है। असलम ने अनुमान लगाया कि रोब से पहले आपने अपने जवाब प्रस्तुत करने के लिए ऊपर दिए गए jsummers के उत्तर को स्वीकार कर लिया है।
पिंजरा रटलर

3
@AvramLavinsky नहीं, यह "एक फ़ील्ड के दो लेबल हो सकते हैं" का सही उत्तर है। युक्ति बहुत स्पष्ट है। कैसे ग्राहक व्याख्या करना चुनते हैं जो उनके ऊपर है। आपका लिंक "aria -byby", जो "aria-labby" से जोड़ता है, स्क्रीन स्क्रीन पाठकों को "ठीक" करने का तरीका है।
जेम्स समर्स

फनी एमडीएन का कहना है "एक इनपुट को कई लेबल के साथ जोड़ा जा सकता है।" developer.mozilla.org/en-US/docs/Web/HTML/Element/label
2340 को 2540625

40

HTML कानूनी है, और यह काम करता है (किसी भी लेबल पर क्लिक करने से प्रश्न में क्षेत्र पर ध्यान केंद्रित किया जाएगा)।

यह एक्सेसिबिलिटी कारणों से सही करने के लिए थोड़ा पेचीदा है।

यह एक "सामान्य" दृष्टिकोण नहीं है, और इसकी वजह से कम से कम एक सामान्य स्क्रीन रीडर (मैंने एनवीडीए के साथ परीक्षण किया) केवल पहला लेबल पढ़ता है जब आप क्षेत्र में ध्यान केंद्रित करते हैं - यह उसी क्षेत्र के लिए किसी भी अतिरिक्त लेबल की उपेक्षा करता है।

इसलिए यदि आपका त्रुटि संदेश पृष्ठ के शीर्ष पर है, तो खेतों के माध्यम से टैब करने वाला एक नेत्रहीन या कम-दृष्टि वाला उपयोगकर्ता प्रश्न में फ़ील्ड पर उतरते समय केवल त्रुटि संदेश सुनाएगा, न कि उसके बगल में "वास्तविक" लेबल।

इसलिए - यदि आप त्रुटि संदेश को ठीक से उद्धृत करते हैं, तो यह एक अच्छी बात हो सकती है (निश्चित रूप से लाल रंग में गैर-मान्य क्षेत्र को उजागर करने से बेहतर है!)।


1
यह सही है, और यह कोड करने का सही तरीका है aria
-byby

27

हां, आपके पास एक ही फ़ॉर्म नियंत्रण में कई लेबल बिंदु हो सकते हैं। यह पूरी तरह से कानूनी है :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

यह सिर्फ एक उदाहरण है ... आम तौर पर आप इन लाइनों को एक लेबल के साथ लपेटेंगे क्योंकि वे करीब हैं।


13
डॉक के लिंक के लिए +1 जहां यह स्पष्ट रूप से कहा गया है कि " विशेषता के LABELमाध्यम से कई संदर्भ बनाकर एक से अधिक को एक ही नियंत्रण से जोड़ा जा सकता है for।"
एलेक्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.