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

Question

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

• <fieldset> टैग एक रूप में समूह संबंधित तत्वों के लिए इस्तेमाल किया जाता है:

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

• <fieldset> टैग संबंधित तत्वों के आस-पास एक बॉक्स खींचता है।

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

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">Red</label> 
 

 
</fieldset>

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

की जाँच करें: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

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

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

Answer 6

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

इसी प्रश्न का उत्तर here पर किया गया था।

Answer 7

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

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

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

Answer 8

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

<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>