हमें फ़ील्डसेट टैग की आवश्यकता क्यों है?

Question

हमें एक <fieldset>टैग की आवश्यकता क्यों है ? यह जिस भी उद्देश्य से कार्य करता है वह संभवतः प्रपत्र टैग का सबसेट है।

मैंने W3Schools पर कुछ जानकारी देखी, जो कहती है:

• <fieldset>टैग एक रूप में समूह संबंधित तत्वों किया जाता है।
• <fieldset>टैग संबंधित तत्वों चारों ओर एक बॉक्स खींचता है।

जो लोग गलती कर रहे हैं उनके लिए अधिक स्पष्टीकरण "यह क्या करता है" के लिए "विनिर्देश में मौजूद है"। मुझे लगता है कि ड्राइंग भाग अप्रासंगिक है, और मुझे नहीं लगता कि हमें एक विशेष टैग को केवल कुछ संबंधित तत्वों को एक रूप में समूह में रखने की आवश्यकता क्यों है।

Comments

हमें किसी टैग की आवश्यकता क्यों है? जब हम पृष्ठभूमि रंग के साथ 1px div से एक छवि बना सकते हैं तो हमें img टैग की आवश्यकता क्यों है?

— ओडेड

कृपया ध्यान दें: W3C का w3schools से कोई लेना- देना नहीं है।

— वेस्ले मर्च

W3schools का संदर्भ न लें। बस एमडीएन का उपयोग करें: फ़ील्डसेट @ एमडीएन ।

— सिरको

@Madmartigan मुझे पता है। लेकिन W3C केवल विनिर्देशन देता है जिसका मुझे मेरे प्रश्न का उत्तर पाने के लिए अधिक उपयोग नहीं मिला।

— पूर्वी भिक्षु

के बारे में (नहीं) W3Schools का उपयोग करना और तकनीकी जानकारी के लिए अधिक भरोसेमंद साइटों का उपयोग करना: w3fools.com

— मिया

Answer 1

सबसे स्पष्ट, व्यावहारिक उदाहरण है:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

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

Comments

मेरे पास एक लिंक काम नहीं है, लेकिन जाहिरा तौर पर कई स्क्रीन रीडर फ़ील्ड में प्रत्येक लेबल से पहले किंवदंती पाठ पढ़ते हैं ।

— वेस्ले मर्च

@Madmartigan - यह एक अच्छी बात है, इसका मतलब है कि आप जानते हैं कि आप अभी भी रेडियो बटन के एक ही सेट के साथ काम कर रहे हैं। (यह किंवदंती संक्षिप्त है यह सुनिश्चित करने का एक कारण भी है )।

— क्वेंटिन

"सहायक तकनीक" जो बहुत मायने रखती है।

— पूर्वी भिक्षु

इसके अलावा, <फ़ील्डसेट> का उपयोग समूहित तत्वों को 'अक्षम' करने के लिए किया जा सकता है। मुझे उम्मीद है कि <फ़ील्ड> यह भी निर्दिष्ट करने के लिए उपयोग किया जाना चाहिए कि क्या टैग के लिए 'आवश्यक' विशेषता जोड़कर एक समूह आवश्यक है, दुर्भाग्य से यह काम नहीं करता है!

— साइमन सवाई

Answer 2

फ़ील्डसेट की एक अन्य विशेषता यह है कि इसे अक्षम करने से इसके भीतर मौजूद सभी फ़ील्ड अक्षम हो जाती हैं।

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

Comments

बेशक, कोई यह तर्क दे सकता है कि disabledविशेषता fieldsetएस और प्रपत्र नियंत्रण के लिए कार्य करती है, formतत्व के लिए भी इसे सही तरीके से लागू किया जाना चाहिए । यह समझ में आता है, यह नहीं होगा?

— amn

Answer 3

यह पहुंच के लिए आवश्यक है।

देखें: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

HTML 4 तत्व fieldsetऔर legendआपको तालिकाओं का उपयोग किए बिना तार्किक तरीके से ब्याज के कई अलग-अलग क्षेत्रों के साथ एक बड़े रूप को लेआउट और व्यवस्थित करने की अनुमति देता है। fieldsetटैग चयनित तत्वों के आसपास बक्से बनाने के लिए इस्तेमाल किया जा सकता है और legendटैग उन तत्वों को एक शीर्षक दे देंगे। इस तरह से फार्म तत्वों को एक साथ पहचान की गई श्रेणियों में बांटा जा सकता है।

अलग-अलग ब्राउज़र fieldsetअलग-अलग तरीकों से डिफ़ॉल्ट सीमा प्रदर्शित कर सकते हैं। कैस्केडिंग स्टाइल शीट्स का उपयोग सीमा को हटाने या इसकी उपस्थिति को बदलने के लिए किया जा सकता है।

Comments

HTML4 में फ़ील्डसेट मौजूद नहीं है। यह एक HTML5 विशेषता

— radio_head

यह HTML 4.0.1 में आया - w3.org/TR/html401/interact/forms.html#h-17.10

— एरिक साइट्स

Answer 4

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

Answer 5

फील्डसेट तार्किक रूप से आइटम का आयोजन करता है, लेकिन यह उन लोगों के लिए पहुंच में सुधार भी करता है, जो कर्ण ब्राउज़रों का उपयोग करते हैं। फील्डसेट आसान है और इस प्रकार यह कई अनुप्रयोगों में अतीत में बेहद लोकप्रिय था इसलिए उन्होंने इसे html में भी लागू किया।

Answer 6

मुझे यह पसंद है कि जब आप अपने रेडियो को फ़ील्डसेट के साथ घेरते हैं, और आप अपने रेडियो बटन इनपुट टैग पर आईडी नहीं डालते हैं, तो फ़ील्ड द्वारा दर्शाए गए समूह को टैबचैन में जोड़ा जाता है जैसे कि यह एक एकल आइटम था।

यह आपको एक फ़ॉर्म के माध्यम से टैब करने देता है, और जब आप किसी फ़ील्ड पर जाते हैं, तो आप चयनित रेडियो को बदलने के लिए तीर कुंजियों का उपयोग कर सकते हैं, और फिर आपके द्वारा किए जाने पर टैब को हटा सकते हैं।

इसके अलावा, पहुँच को मत भूलना। स्क्रीन पाठकों को आपके फ़ॉर्म को समझने के लिए फ़ील्डसेट और किंवदंती की आवश्यकता होती है और इसे किसी प्रकार से प्राकृतिक तरीके से उपयोगकर्ता को पढ़ने में सक्षम होना चाहिए। यदि आप उपयोगकर्ताओं को इसे देखना नहीं चाहते हैं तो किंवदंती को गायब करने के लिए स्वतंत्र महसूस करें। सीएसएस के साथ सिर्फ लेट आउट और स्टाइलिंग किंवदंती है, कभी-कभी विशेष रूप से विरासत ब्राउज़रों के साथ डाइस क्रॉस-ब्राउज़र हैं, इसलिए मुझे स्क्रीन रीडर उपयोगकर्ताओं के लिए लीजेंड टैग को अदृश्य बनाने और एक अलग, aria-hidden = "true" लेबल की तरह स्टाइल करने वाला मिला। देखे गए उपयोगकर्ता स्टाइल को सरल बनाते हैं और चीजों को सुलभ रखते हैं।

Comments

This lets you tab through a form, and when you get to a fieldset, you can use arrow keys to change the selected radio, and then tab away when you're done.- यह रेडियो इनपुट का डिफ़ॉल्ट व्यवहार है और फील्डसेट से इसका कोई लेना-देना नहीं है। चेकबॉक्स डिफ़ॉल्ट रूप से भिन्न व्यवहार करता है।

— व्लादिमीर कोर्ना

Answer 7

मुझे यह सीएसएस स्टाइल और नियंत्रण के लिए लेबल जोड़ने के लिए आसान लगता है। खेतों के एक समूह के चारों ओर एक दृश्य कंटेनर डालना और लेबल संरेखित करना आसान बनाता है।

Answer 8

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

इसी प्रश्न का उत्तर यहाँ SO पर दिया गया था ।

Answer 9

बस कुछ फायदे बता रहे हैं:

HTML  <fieldset> तत्व का उपयोग कई नियंत्रणों के साथ-साथ लेबल ( <label>) को वेब फॉर्म के भीतर करने के लिए किया जाता है क्योंकि इसे MDN द्वारा परिभाषित किया गया है ।

दूसरे शब्दों में: फ़ील्डसेट टैग आपको फ़ील्ड के समूह सेटों को तार्किक रूप से क्रम में रखने की अनुमति देता है ताकि आपके फ़ॉर्म अधिक वर्णनात्मक हों। तो, एक सामान्य नाम के तहत वैकल्पिक रूप से समूहीकृत नियंत्रण प्रपत्रों का एक सेट।

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

फ़ील्डसेट का उपयोग करने के " लाभ " हैं:

• वे आपको सबसे अधिक शब्दार्थ में अपने डेटा (इस मामले में एक फार्म) को चिह्नित करने की अनुमति देते हैं उपलब्ध । इस बात पर विचार करें कि किसी फ़ील्ड को अपने क्षेत्र में रखने से अधिक विवरणात्मक है कि आपके खेतों को एक div में रखा जाए। डिव आपको खेतों के बीच संबंध के बारे में कुछ नहीं बताता है, एक फ़ील्डसेट बताता है कि एक रिश्ता है।
• विकलांगों का उपयोग करके , यह आपको और उसकी सभी सामग्रियों को एक बार में अक्षम करने की अनुमति देता है।
• यह पहुंच के लिए सहायक है

Answer 10

मेरे लिए, <fieldset>...</fieldset>तत्व का एक सबसे बड़ा लाभ <form>...</form>संदर्भ को संरक्षित करने की क्षमता है, भले ही <fieldset>...</fieldset>वह फॉर्म के अंदर न हो।

उदाहरण के लिए, निम्न रूप:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

शब्दार्थ निम्नलिखित रूप के समान है:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>