क्या FORM के अंदर DIV का उपयोग करना सही है?


86

मैं सोच रहा हूँ कि आप FORM-tag के अंदर DIV-टैग के बारे में क्या सोच रहे हैं?

मुझे कुछ ऐसा ही चाहिए:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

क्या DIVअंदर का उपयोग करना सामान्य बात है FORMया मुझे कुछ अलग चाहिए?

जवाबों:


133

यह पूरी तरह से ठीक है।

form(* भी केवल अपने इनपुट प्रकार नियंत्रण प्रस्तुत करेगा Textarea, Select, आदि ...)।

तुम एक के divभीतर के बारे में चिंता करने की कोई बात नहीं है form


2
कैसे एक div के अंदर एक फार्म का उपयोग करने के बारे में?
किक बटोस्की

1
@KickButtowski एक div के अंदर एक फार्म कोई समस्या नहीं है। आप इसे HTML सत्यापनकर्ता पर स्वयं आज़मा सकते हैं। इसके अलावा, यह इन दिनों लगभग अपरिहार्य है, क्योंकि आधुनिक पृष्ठ div के हैं। यदि इसकी अनुमति नहीं थी, तो एक साधारण आवरण या कंटेनर में फ़ॉर्म रखने से पृष्ठ पहले से ही अमान्य हो जाएगा।
Nrzonline

फॉर्म के सत्यापन के बाद से मेरे लिए काम करना बंद कर दिया गया है क्योंकि मैंने फॉर्म के अंदर डिवीज़ जोड़े हैं
सुहास

28

यह एक <form>टैग के अंदर एक डीआईवी का उपयोग करने के लिए पूरी तरह से स्वीकार्य है ।

यदि आप डिफ़ॉल्ट CSS 2.1 स्टाइलशीट को देखते हैं , divऔर pदोनों display: blockश्रेणी में हैं। फिर फार्म तत्व के लिए HTML 4.01 विनिर्देशन को देखते हुए, वे न केवल <p>टैग, बल्कि <table>टैग शामिल करते हैं, इसलिए निश्चित रूप <div>से समान मानदंडों को पूरा करेंगे। <legend>डॉक्यूमेंट में फॉर्म के अंदर एक टैग भी होता है ।

उदाहरण के लिए, निम्नलिखित सख्त मोड में HTML4 सत्यापन पास करता है:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
  Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>

11

आप <div>एक फॉर्म के भीतर उपयोग कर सकते हैं - वहाँ कोई समस्या नहीं है .... लेकिन अगर आप <div>नॉट के लिए लेबल के रूप में उपयोग करने जा रहे हैं input... labelएक बेहतर विकल्प है:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />

3

<<> के प्रत्यक्ष बच्चे के रूप में <इनपुट> होना गलत है

और वैसे भी <इनपुट / > कुछ सिद्धांत पर विफल हो सकता है

इसे http://validator.w3.org/check से चेक करें


दस्तावेज़ प्रकार यहां "INPUT" तत्व की अनुमति नहीं देता है; "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" स्टार्ट-टैग गायब

<इनपुट प्रकार = "टेक्स्ट" />

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

इस संदेश का एक संभावित कारण यह है कि आपने एक इनलाइन तत्व के अंदर एक ब्लॉक-स्तरीय तत्व (जैसे "<p>" या "<टेबल>") डालने का प्रयास किया है (जैसे "<a>", "<span>" ", या" <font> ")।


3

आपका सवाल यह नहीं बताता है कि आप DIV टैग में क्या डालना चाहते हैं, शायद यही वजह है कि आपको कुछ अधूरे / गलत उत्तर मिले हैं। सच्चाई यह है कि आप कर सकते हैं, जैसा कि रॉय ने कहा, अपने प्रपत्रों के अंदर DIV टैग डालें। आप उदाहरण के लिए, लेबल के लिए ऐसा नहीं करना चाहते हैं, लेकिन यदि आपके पास एक चेकबॉक्स का एक समूह है, जिसे आप तीन कॉलम में रखना चाहते हैं, तो हर तरह से, DIV टैग (या SPAN, HEADER, आदि) का उपयोग करें। ।) आप प्राप्त करने की कोशिश कर रहे हैं देखो और महसूस को पूरा करने के लिए।


3

परिभाषा और उपयोग

टैग HTML दस्तावेज़ में एक विभाजन या एक अनुभाग को परिभाषित करता है।

टैग का उपयोग ब्लॉक-एलिमेंट्स को स्टाइल के साथ फॉर्मेट करने के लिए किया जाता है। http://www.w3schools.com/tags/tag_div.asp

इसके अलावा DIV - MDN

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

आप डिव के अंदर फॉर्म का उपयोग कर सकते हैं, यदि आप टेबल के बजाय डिव का उपयोग करने की बात कर रहे हैं, तो टेबललेस वेब डिज़ाइन के बारे में गूगल करें


3
वास्तव में? w3schools संदर्भ?
एडोनिस के। काकोलीडिस

2
@AdonisK।, मुझे पता है कि किसी को w3schools के संदर्भ को शामिल क्यों नहीं करना चाहिए, लेकिन मेरा मानना ​​है कि यह एक मूल्य के लायक नहीं है, मैं आपसे मेटा पर इस चर्चा को देखने का अनुरोध करूंगा : meta.stackexchange.com/estestions/120025/… इसके अलावा मैंने एमडीएन से डीआईवी का संदर्भ अपडेट किया है
हबीब

1

जैसा कि दूसरों ने कहा है, यह सब अच्छा है, आप इसे ठीक कर सकते हैं। मेरे लिए व्यक्तिगत रूप से, मैं अपने तत्वों के साथ divबाहरी सबसे मूल तत्व होने के साथ पदानुक्रमित संरचना का एक रूप रखने की कोशिश करता हूं । मैं केवल table p ulऔर spanअंदर के रूपों का उपयोग करने की कोशिश करता हूं । बस मेरे लिए अपने वेबपेजों के अंदर माता-पिता / बच्चों के रिश्तों पर नज़र रखना आसान हो जाता है ।


0

मैंने देखा कि जब भी मैं एक डिव के अंदर फॉर्म टैग शुरू करूँगा, उसके बाद के दिव्यांग भाई-बहन उस फॉर्म का हिस्सा नहीं होंगे, जब मैं निरीक्षण (क्रोम निरीक्षण) करता हूँ, इसलिए मेरा फॉर्म कभी सबमिट नहीं होगा।

<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

मुझे लगा कि अगर मैंने DIV के बाहर फॉर्म टैग लगा दिया तो यह काम कर जाएगा। फॉर्म टैग को मूल DIV की शुरुआत में रखा जाना चाहिए। जैसा नीचे दिखाया गया है।

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

-5

बिलकुल नहीं! यह प्रस्तुत करेगा, लेकिन यह मान्य नहीं होगा। एक लेबल का उपयोग करें।

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


-8

नहीं यह नहीं

<div>वेब लेआउट बनाने के लिए टैग का हमेशा दुरुपयोग किया जाता है। इसका प्रतीकात्मक उद्देश्य पृष्ठ में एक खंड / भाग को विभाजित करना है ताकि अलग शैली को इसमें जोड़ा या लागू किया जा सके। [w3schools डॉक्टर] [W3C]

यह अत्यधिक आपके someऔर क्या है पर निर्भर करता anotherहै।

HTML5, में सादे लेआउट टैग होने के बजाय अधिक तार्किक अर्थ टैग हैं। section, header, nav, asideसब कुछ अपने स्वयं के अर्थ यह करने के लिए अर्थ नहीं होता। और के खिलाफ उपयोग किया जाता है<div>


1
मैं सहमत हूं। रहे हैं कई चीजें हैं जो आप कर सकते हैं एचटीएमएल अंदर है। लेकिन उन ढीले दिशानिर्देशों के कारण हम खुद को हैक से भरे कोड के साथ अक्षम वेब लेआउट की गड़बड़ी से खुदाई करते हुए पाते हैं। वेब बढ़ने का एकमात्र तरीका यह है कि हम नए दिशानिर्देशों का पालन करते रहें क्योंकि वे हमारे सामने प्रस्तुत हैं।
जेटी स्मिथ

खैर, मुझे वेब पेज पर कुछ क्षेत्र की आवश्यकता है। उपयोगकर्ता इस क्षेत्र पर क्लिक करते हैं और प्रपत्र इनपुट पर मान सेट करते हैं। इस मामले में HTML- तत्व क्या है?
डेमस

1
@demas, अपने बचाव के उपयोग के लिए <select>सही फिट बैठता है अगर विकल्प दिए गए हैं, अगर नहीं <a>या <buttons>अच्छे हैं।
स्टारएक्स

27
-1 आप गलत हैं। हर बड़े साइट एक फार्म के अंदर div का उपयोग करें। आपने html 5 उदाहरण दिए हैं जिनका प्रश्न से कोई लेना देना नहीं है। मुझे एक बड़ी साइट दिखाएं जो फ़ॉर्म के भीतर नहीं है। जाँच और बिना इस साइट जवाब throuws में यहाँ के लोग अन्य उपयोगकर्ताओं को भ्रमित
Royi Namir

4
कुछ नहीं बनाने का तरीका यह है कि एक नियम के रूप में, एंटरप्राइज़ कोड ने कैसे किया। यदि आप केवल पाठ को नियंत्रित करने के लिए लागू होते हैं, यदि पाठ प्रपत्र नियंत्रण पर लागू होता है, तो लेबल का उपयोग करें। यदि नहीं, तो एक पी का उपयोग करें। शब्दार्थ पदार्थ। सुलभता मायने रखती है।
अल्बर्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.