2012-01-25 15 views
20

अंदर इनपुट फ़ील्ड पर विचार निम्नलिखित: के बाद से W3C सिफारिशों के राज्य है कि एक लेबल बिल्कुल एक रूप पर नियंत्रण के साथ जुड़ा हुआ हैदो एक लेबल

<label>Range from 
    <input name='min_value'/> to 
    <input name='max_value' /> 
</label> 

इस अर्थ की दृष्टि से सही है?

पहला इनपुट के लिए दूसरी इनपुट बदलाव में क्लिक करने से तुरंत ध्यान केंद्रित? इस रोका जा सकता है?

एक इनपुट/अधिकतम इनपुट संयोजन को कैसे चिह्नित करेगा यह दिखाने के लिए कि दो इनपुट एक साथ हैं?

+0

आपको लेबल के अंदर इनपुट डालने की आवश्यकता क्यों है ?? <इनपुट नाम = 'min_value' /> से <इनपुट नाम = 'max_value' /> –

+1

अर्थात्, आपको अपने लेबल पर एक विशेषता की आवश्यकता है जो एक इनपुट की आईडी से लिंक हो (जो कि अद्वितीय होना चाहिए पृष्ठ का दायरा)। – MetalFrog

+1

@ मेटलफ्रोग: लेबल में नियंत्रण को नस्टिंग आवश्यक अर्थशास्त्र प्रदान करेगा - उस स्थिति में लेबल के लिए विशेषता जोड़ने के लिए अनावश्यक है। विशेषता के लिए केवल तभी जरूरी है जब नियंत्रण कहीं और दिखाई देता है। उस ने कहा, यह * यह सुनिश्चित करने के लिए कि आप सही नियंत्रण के साथ लेबल को जोड़ रहे हैं, वैसे भी विशेषता के लिए निर्दिष्ट करने के लिए उपयोगी हो सकता है, क्योंकि एक विवाद मिलने पर सत्यापन त्रुटि उठाई जाएगी: "लेबल तत्व के किसी भी इनपुट वंशज एक विशेषता के साथ एक आईडी मान होना चाहिए जो विशेषता के लिए मेल खाता हो। " – BoltClock

उत्तर

35

नहीं, यह (के बाद से, आप ध्यान दें के रूप में, एक label बिल्कुल एक प्रपत्र इनपुट के साथ जुड़ा हुआ है) सही नहीं है।

आदानों है कि एक साथ हैं के एक समूह लेबल करने के लिए, एक <fieldset> और एक <legend> का उपयोग करें:

<fieldset> 
 
    <legend>Range</legend> 
 
    <label for="min">Min</label> 
 
    <input id="min" name="min" /> 
 

 
    <label for="max">Max</label> 
 
    <input id="max" name="max" /> 
 
</fieldset>

संदर्भ:

+1

ऐसा लगता है कि आप [labelledby] (https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html#ARIA9-ex2) का उपयोग भी कर सकते हैं (हालांकि मैं अभी भी आपके समाधान का चयन करूंगा)। –

-3

मुझे नहीं लगता कि आपको लेबल नियंत्रण के अंदर इनपुट फ़ील्ड डालना चाहिए।

<label for="myfield">test</label><input type="text" id="myfield" name="myfield /> 

लेबल केवल कुछ है, कुछ के लिए एक लेबल है।

+2

कोई लेबल के अंदर इनपुट डालने के लिए बिल्कुल ठीक नहीं है। एक परिपूर्ण दुनिया में, इन तथाकथित रूप से जुड़े लेबलों के लिए/आईडी एसोसिएशन आवश्यक नहीं होना चाहिए क्योंकि यह इतना स्पष्ट होगा कि संबंधित लेबल इस इनपुट का अभिभावक है। वास्तविक दुनिया में, स्क्रीन पाठकों ने इतनी देर तक इसे प्रबंधित करने का प्रबंधन नहीं किया था कि आईडी/आईडी विशेषताओं के लिए मिलान करना अनिवार्य है। – FelipeAls

+1

'<लेबल के लिए =" आयु "> आपकी आयु <इनपुट आईडी =" आयु "प्रकार =" पाठ "> (1, 2 या 3 अंक) 'सहायता पाठ के लिए लेबल तत्व का उपयोग करने का एक उदाहरण है इनपुट का अधिकार लेकिन सही पाठ पर स्क्रीन पाठकों द्वारा पढ़ा गया: ((आंशिक रूप से) अंधे से पहले) उपयोगकर्ता को इनपुट में sth टाइप करने का मौका है। इनपुट में sth टाइप करने के बाद उसे मदद करने में बहुत मददगार नहीं है;) – FelipeAls

+0

आईआरएल, एक लेबल में यह नहीं है कि यह क्या है। लेबल के अंदर अचार का एक जार निहित नहीं है जो दर्शाता है कि यह अचार का जार है।लेबल बस बताता है कि यह अचार के उस जार के लिए है। मैं उस लेबल को कहीं भी ले जा सकता हूं लेकिन यह अभी भी अचार के उस जार के लिए है। एचटीएमएल रूपों के लिए भी यही है। आईएमओ, एक लेबल में नियंत्रण नहीं होना चाहिए जो लेबल है। यह बस उस विशेष नियंत्रण को इंगित करना चाहिए। क्या होगा यदि मैं जावास्क्रिप्ट के माध्यम से लेबल को हटाना चाहता था (किसी कारण से मैं अभी तक नहीं सोच सकता)? मैं भी नियंत्रण को हटा रहा हूँ! मैं उस लेबल को फेंक सकता हूं और अचार के जार अभी भी वहां है। –

3

कैसे इस बारे में:

<label> Range from <input name='min_value'> </label> 
<label> to <input name='max_value'> </label> 
3

this के अनुसार - लेबल का केवल एक इनपुट शामिल कर सकते हैं के रूप में यह केवल एक नियंत्रण के साथ संबद्ध किया जाना चाहिए। लेबल के भीतर इनपुट लाना for विशेषता (स्वत: जोड़ने) के उन्मूलन का मतलब है।

तो आप या तो लेबल में डाल दिया जाना चाहिए एकल इनपुट या for विशेषता है जो इनपुट id के लिए अंक और लेबल में नहीं डाल इनपुट करना निर्दिष्ट करें।

11

स्वीकार किए जाते हैं जवाब राज्यों के रूप में, यह सही नहीं है, लेकिन मुझे लगता है कि बेहतर तरीके यह करने के लिए कर रहे हैं।

सुलभ विकल्प:

विकल्प 1 (aria-label विशेषता का उपयोग):

Range: 
<input ... aria-label='Range start' /> 
<input ... aria-label='Range end' /> 

विकल्प 2 (का उपयोग कर छिपा label टैग):

<label for='start'>Range start</label> 
<input type='text' id='start' /> 

<label for='end' class='hidden'>Range end</label> 
<input type='text' id='end' /> 

कहाँ .hidden कक्षाहै।

विकल्प 3 (aria-labelledby विशेषताओं का उपयोग):

<label id='lblRange'>Range</label> 
<input type='text' id='start' aria-labelledby='lblRange' /> 
<input type='text' id='end' aria-labelledby='lblRange' /> 

# 1 विकल्प के लाभ: प्रत्येक input अच्छा वर्णन है कि अन्य सुझाव (जैसे कि एक "के लिए" लेबल जोड़ना) है नहीं। विकल्प # 2 और # 3 इस विशिष्ट मामले के लिए सबसे अच्छा नहीं हो सकता है, लेकिन समान मामलों के लिए उल्लेखनीय है।

स्रोत: http://webaim.org/techniques/forms/advanced

0

1 लेबल = 1 इनपुट !!!

यदि आप एक लेबल के अंदर 2 इनपुट डालते हैं, तो यह सफारी (और आईपैड और आईफोन) में काम नहीं करेगा ... क्योंकि जब आप लैबेल के अंदर क्लिक करते हैं तो यह स्वचालित रूप से पहले इनपुट को केंद्रित करता है ... इसलिए दूसरा इनपुट असंभव है टाइप करें।