क्या हम <input> को <label> के अंदर रखना चाहिए?

मैंने एक ही फॉर्म पर 2 अलग-अलग विधि देखी हैं उदाहरण: http://www.alistapart.com/articles/prettyaccessibleforms/ क्या हम <input> को <label> के अंदर रखना चाहिए?

http://www.alistapart.com/articles/prettyaccessibleforms/ पर क्यों वे पहले fieldset में 2 विधि का उपयोग कर रहे हैं, वे label के बाद input रखते हैं और दूसरे fieldset में वे label के बाद input रखते हैं। क्यूं कर?

<fieldset> 
    <legend>Delivery Details</legend> 
    <ol> 
    <li> 
     <label for="name">Name<em>*</em></label> 
     <input id="name" /> 
    </li> 
    <li> 
     <label for="address1">Address<em>*</em></label> 
     <input id="address1" /> 
    </li> 
    <li> 
     <label for="address2">Address 2</label> 
     <input id="address2" /> 
    </li> 
    <li> 
     <label for="town-city">Town/City</label> 
     <input id="town-city" /> 
    </li> 
    <li> 
     <label for="county">County<em>*</em></label> 
     <input id="county" /> 
    </li> 
    <li> 
     <label for="postcode">Postcode<em>*</em></label> 
     <input id="postcode" /> 
    </li> 
    <li> 
     <fieldset> 
     <legend>Is this address also your invoice » 
address?<em>*</em></legend> 
     <label><input type="radio" » 
name="invoice-address" /> Yes</label> 
     <label><input type="radio" » 
name="invoice-address" /> No</label> 
     </fieldset> 
    </li> 
    </ol> 
</fieldset>

क्यों वे label के बाद input को कभी-कभी रखते हैं और कभी-कभी अंदर क्यों रहते हैं?

अद्यतन:

यहां http://www.usability.com.au/resources/forms.cfm वे input को label के बाद

के अंदर नहीं रखते हैं

स्रोत

2010-05-24 Jitendra Vyas

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

@Gert जी -। हाँ तुम सही –

@ Jørn SCHOU-रोडे कर रहे हैं - अरे हाँ एक ही प्रश्न –

यह according to the specs है, और (सभी आधुनिक ब्राउज़रों में काम करता है, लेकिन नहीं IE6 में नहीं - लेबल पर क्लिक करने के लिए ध्यान केंद्रित करने के लिए सेट नहीं होगा इनपुट नियंत्रण, जब तक आप एक id और for) में शामिल हैं:

<label> 
     Name: <input type="textbox" name="firstName" /> 
    </label>

का सवाल है "क्यों" -में, रेडियो बटन लेबल में रखे गए थे इसलिए लेबल और उसके रेडियो बटन के बीच एक अचूक अंतर नहीं होगा।

स्रोत

2010-05-24 07:14:42 Kobi

"(नहीं, आईई 6 में नहीं):" आपका क्या मतलब है? –

मैंने इसे लंबे समय तक उपयोग करने की कोशिश नहीं की है, लेकिन मुझे याद है कि यह सुविधा आईई 6 – sparebytes

विशिष्ट आईई 6 में काम कर रही है, यह दूसरी तरफ है। अगर आप लेबल में 'for'' जोड़ें, यह बच्चे चेक फीचर –

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

स्रोत

2010-05-24 07:22:56 Greg

आम तौर पर यह इनपुट नियंत्रण सतह के विस्तार के उद्देश्य से किया जाता है। जब कोई रेडियो बटन या चेकबॉक्स होता है, तो <label for="given_control"></label> के अंदर जो कुछ भी है, वह नियंत्रण संलग्न करता है।

ठीक है, एक बार और अब नियंत्रण सतहों ग्रे में देखा जाता है (यदि आपका CSS अक्षम नहीं है) है.अगर आप दोनों नियंत्रण के किनारों पर क्लिक करता है के प्रति संवेदनशील होना नियंत्रित करते हैं, लेबल टैग <label...> के बीच <input> संलग्न चाहते हैं, यदि नियंत्रण के एक तरफ क्लिक करने के लिए संवेदनशील होने के लिए पर्याप्त है, तो <label> टैग <input> से पहले या उसके बाद रखें। निम्नलिखित उदाहरण पर: पहले 2 नियंत्रण नियंत्रण के दोनों तरफ (बाईं ओर सफेद जगह सहित) के क्लिक के प्रति संवेदनशील होते हैं, तीसरा - बस बाईं ओर।

चेक इस उदाहरण:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<title>Visual Label example</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<style> 
.control 
{ 
    background-color:#ddd 
} 
</style> 
</head> 
<body> 
<form action="" method="post" name="f1"> 
<label class="control" for="id_1">1. 
<input checked="checked" name="check" id="id_1" value="1" type="checkbox">One 
</label> 
<br /> 
<label class="control" for="id_2">2. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="check" id="id_2" value="2" type="checkbox">Two 
</label> 
<br /> 
<label class="control" for="id_3">3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
<input name="check" id="id_3" value="3" type="checkbox">Three 
</form> 
</body> 
</html>

स्रोत

2010-05-24 08:07:32

@arunas_t को तोड़ देगा - आपका दिया गया कोड W3C मान्य नहीं है। –

मेरा विश्वास करो या नहीं, मैंने सादगी के puprose के लिए सबकुछ छीन लिया है, फिर भी यह आईई, फ़ायरफ़ॉक्स और ओपेरा में काम करता है और यह दृश्य उदाहरण के लिए है। अगर आप उत्तर देखना चाहते हैं तो बस इसे आज़माएं आर आपका सवाल, चीयर्स। अनुलेख अगर आपको पूरे संगत कोड की ज़रूरत है, तो मैं इसे प्रदान कर सकता हूं। –

कोड अद्यतन किया गया है। अब यह कैसा है? कम से कम फ़ायरफ़ॉक्स मुझे तीन हिरण दिखाता है? :) –

आज मैं यहाँ जवाब मिल गया। http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

HTML और XHTML विनिर्देशों दोनों अंतर्निहित और स्पष्ट लेबल अनुमति देते हैं। हालांकि, कुछ सहायक प्रौद्योगिकियां निहित लेबल सही ढंग से संभाल नहीं पाती हैं (उदाहरण के लिए, पहला नाम)। उदाहरण के लिए <label>First name <input type="text" name="firstname"></label>)।

तो जाने का तरीका स्पष्ट है और यह हमें और अधिक शैली विकल्प भी प्रदान करता है।

स्रोत

2010-05-30 02:39:41

क्या हम <input> को <label> के अंदर रखना चाहिए?

उत्तर

संबंधित मुद्दे