html - एचटीएमएल इनपुट-नाम बनाम आईडी




html-input (10)

एचटीएमएल <input> टैग का उपयोग करते समय, name और id विशेषताओं के उपयोग के बीच क्या अंतर है, विशेष रूप से मैंने पाया कि उन्हें कभी-कभी समान नाम दिया जाता है?


आईडी अद्वितीय होना चाहिए

... पृष्ठ डीओएम तत्व पेड़ के भीतर, इसलिए प्रत्येक नियंत्रण क्लाइंट पक्ष (ब्राउज़र पृष्ठ के भीतर) पर अपनी id द्वारा व्यक्तिगत रूप से सुलभ है

  • पृष्ठ में लोड जावास्क्रिप्ट स्क्रिप्ट
  • पेज पर परिभाषित सीएसएस शैलियों

आपके पृष्ठ पर गैर-अद्वितीय आईडी होने पर भी आपका पृष्ठ प्रस्तुत होगा, लेकिन यह निश्चित रूप से मान्य नहीं होगा। अमान्य HTML को पार्स करते समय ब्राउज़र्स काफी क्षमा कर रहे हैं। लेकिन ऐसा मत करो क्योंकि ऐसा लगता है कि यह काम करता है।

नाम अक्सर अनूठे होते हैं लेकिन साझा किए जा सकते हैं

... पृष्ठ के भीतर एक ही प्रकार के कई नियंत्रणों के बीच डोम (रेडियो बटन के बारे में सोचें) ताकि डेटा सर्वर पर पोस्ट हो जाए, केवल एक विशेष मूल्य भेजा जाता है। इसलिए जब आपके पृष्ठ पर कई रेडियो बटन होते हैं, तो केवल चयनित व्यक्ति का value सर्वर पर वापस पोस्ट हो जाता है, भले ही एक ही name साथ कई संबंधित रेडियो बटन नियंत्रण हों।

सर्वर पर डेटा भेजने के लिए अनुपूरक : जब डेटा सर्वर पर भेजा जाता है (आमतौर पर HTTP POST अनुरोध के माध्यम से) सभी डेटा नाम-मूल्य जोड़े के रूप में भेजे जाते हैं जहां नाम इनपुट का name HTML नियंत्रण होता है और मान उसका value दर्ज / चयनित होता है उपयोगकर्ता द्वारा गैर-अजाक्स अनुरोधों के लिए यह हमेशा सच है। अजाक्स अनुरोधों में नाम-मूल्य जोड़े पृष्ठ पर HTML इनपुट नियंत्रण से स्वतंत्र हो सकते हैं, क्योंकि डेवलपर्स जो भी सर्वर चाहते हैं उसे भेज सकते हैं। अक्सर इनपुट नियंत्रण से मूल्यों को भी पढ़ा जाता है, लेकिन मैं बस यह कहने की कोशिश कर रहा हूं कि यह आवश्यक नहीं है।

जब नाम डुप्लीकेट किया जा सकता है

यह कभी-कभी फायदेमंद हो सकता है कि किसी भी फॉर्म इनपुट प्रकार के नियंत्रण के बीच नाम साझा किए जाते हैं। लेकिन जब? आपने यह नहीं बताया कि आपका सर्वर प्लेटफ़ॉर्म क्या हो सकता है, लेकिन यदि आपने एएसपीनेट एमवीसी जैसे कुछ का उपयोग किया है तो आपको स्वचालित डेटा सत्यापन (क्लाइंट और सर्वर) का लाभ मिलता है और मजबूत डेटा को डेटा को बाध्यकारी भी मिलता है। इसका मतलब है कि उन नामों को संपत्ति के नामों से मेल खाना पड़ेगा।

अब मान लीजिए कि आपके पास यह परिदृश्य है:

  • आपके पास एक ही प्रकार की वस्तुओं की सूची के साथ एक दृश्य है
  • उपयोगकर्ता आमतौर पर एक समय में एक आइटम के साथ काम करता है, इसलिए वे केवल एक आइटम के साथ डेटा दर्ज करेंगे और इसे सर्वर पर भेजेंगे

तो आपके व्यू का मॉडल (चूंकि यह एक सूची प्रदर्शित करता है) टाइप किया गया है IEnumerable<SomeType> लेकिन आपका सर्वर पक्ष केवल SomeType प्रकार के एक आइटम को स्वीकार करता है।

तब नाम साझा करने के बारे में कैसे?

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

यह विशेष परिदृश्य मेरी रचनात्मक कहानियों मिनी साइट पर देखा जा सकता है। आप भाषा को समझ नहीं पाएंगे, लेकिन आप उन एकाधिक रूपों और साझा नामों को देख सकते हैं। इस बात से कोई फर्क नहीं पड़ता कि ID एस भी डुप्लिकेट हैं (जो एक नियम उल्लंघन है) लेकिन इसे हल किया जा सकता है। यह इस मामले में कोई फर्क नहीं पड़ता।


HTML4.01 में:

नाम विशेषता

  • केवल <a> , <form> , <iframe> , <img> , <map> , <input> , <select> , <textarea> पर मान्य
  • नाम अद्वितीय नहीं होना चाहिए, और रेडियो बटन और चेकबॉक्स जैसे तत्वों को समूहबद्ध करने के लिए उपयोग किया जा सकता है
  • यूआरएल में संदर्भित नहीं किया जा सकता है, हालांकि जावास्क्रिप्ट और PHP के रूप में यूआरएल देख सकता है वहां वर्कअराउंड हैं
  • जेएस में getElementsByName() साथ संदर्भित है
  • id विशेषता के समान नामस्थान साझा करता है
  • एक पत्र से शुरू होना चाहिए
  • चश्मा के अनुसार मामला संवेदनशील है, लेकिन अधिकांश आधुनिक ब्राउज़र इसका पालन नहीं करते हैं
  • जानकारी जमा करने के लिए प्रपत्र तत्वों पर प्रयुक्त। name विशेषता वाले केवल इनपुट टैग सर्वर पर सबमिट किए जाते हैं

आईडी विशेषता

  • <base> , <html> , <head> , <meta> , <param> , <script> , <style> , <title> को छोड़कर किसी भी तत्व पर मान्य
  • ब्राउज़र में प्रस्तुत किए गए प्रत्येक पृष्ठ को पृष्ठ में अद्वितीय होना चाहिए, जो एक ही फ़ाइल में हो सकता है या नहीं भी हो सकता है
  • यूआरएल में एंकर संदर्भ के रूप में इस्तेमाल किया जा सकता है
  • # साइन के साथ सीएसएस या यूआरएल में संदर्भित है
  • जेएस में getElementById() , और jQuery द्वारा $(#<id>) के संदर्भ में संदर्भित है
  • नाम विशेषता के रूप में समान नाम स्थान साझा करता है
  • कम से कम एक चरित्र होना चाहिए
  • एक पत्र से शुरू होना चाहिए
  • अक्षरों, संख्याओं, अंडरस्कोर ( _ ), डैश ( - ), कोलन (:), या अवधि ( . ) के अलावा कुछ भी नहीं होना चाहिए
  • मामला असंवेदनशील है

(एक्स) एचटीएमएल 5 में, सब कुछ एक ही है:

नाम विशेषता

  • अब <form> पर मान्य नहीं है
  • एक्सएचटीएमएल का कहना है कि यह सभी लोअरकेस होना चाहिए, लेकिन अधिकांश ब्राउज़र इसका पालन नहीं करते हैं

आईडी विशेषता

  • किसी भी तत्व पर मान्य
  • एक्सएचटीएमएल का कहना है कि यह सभी लोअरकेस होना चाहिए, लेकिन अधिकांश ब्राउज़र इसका पालन नहीं करते हैं

यह सवाल तब लिखा गया जब HTML4.01 मानक था, और आज से कई ब्राउज़र और सुविधाएं अलग-अलग थीं।


आईडी का उपयोग जावास्क्रिप्ट या सीएसएस में किसी तत्व को विशिष्ट रूप से पहचानने के लिए किया जाता है।

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


एक ही नाम का उपयोग करने का एक दिलचस्प मामला: इस तरह के checkbox प्रकार के input तत्व:

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

कम से कम अगर प्रतिक्रिया PHP द्वारा संसाधित की जाती है, यदि आप दोनों बॉक्स चेक करते हैं, तो आपका पोस्ट डेटा दिखाएगा:

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

मुझे नहीं पता कि इस प्रकार का सरणी निर्माण अन्य सर्वर-साइड भाषाओं के साथ होगा, या यदि name विशेषता का मान केवल वर्णों की स्ट्रिंग के रूप में माना जाता है, और यह PHP सिंटैक्स का एक झुकाव है जो 0-आधारित सरणी है POST प्रतिक्रिया में डेटा के क्रम के आधार पर बनाया गया है, जो बस है:

myfruit[]       apple
myfruit[]       orange

आईडी के साथ उस तरह की चाल नहीं कर सकते हैं। HTML में आईडी विशेषता के लिए मान्य मान क्या हैं में कुछ जवाब हैं? एचटीएमएल 4 के लिए spec उद्धृत करने के लिए प्रतीत होता है (हालांकि वे उद्धरण नहीं देते हैं):

आईडी और NAME टोकन को एक अक्षर ([ए-ज़ा-जेड] से शुरू होना चाहिए) और उसके बाद किसी भी संख्या, अक्षरों ([0-9]), हाइफ़न ("-"), अंडरस्कोर ("_") के बाद हो सकता है , कोलन (":"), और अवधि ("।")।

तो वर्ण [ और ] HTML4 में किसी भी आईडी या नामों में मान्य नहीं हैं (वे HTML5 में ठीक होंगे)। लेकिन इतनी सारी चीजों के साथ एचटीएमएल, सिर्फ इसलिए कि यह मान्य नहीं है इसका मतलब यह नहीं है कि यह काम नहीं करेगा या बेहद उपयोगी नहीं है।


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

उदाहरण के लिए:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

जब फॉर्म सबमिट किया जाता है, तो फॉर्म डेटा HTTP शीर्षलेख में इस तरह शामिल किया जाएगा:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

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


नाम निश्चित रूप से फॉर्म जमा होने के बाद विशेषता का नाम क्या होगा। इसलिए यदि आप बाद में इस विशेषता को पढ़ना चाहते हैं तो आपको इसे POST या GET अनुरोध में "नाम" के अंतर्गत मिल जाएगा।

जबकि आईडी जावास्क्रिप्ट या सीएसएस में किसी फ़ील्ड या तत्व को संबोधित करने के लिए प्रयोग किया जाता है।


मुझे उम्मीद है कि आप निम्नलिखित संक्षिप्त उदाहरण उपयोगी पा सकते हैं:

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

कोड में, ध्यान दें कि 'पुरुष' या 'मादा' के बीच वैकल्पिकता को परिभाषित करने के लिए दोनों 'नाम' गुण समान हैं, लेकिन 'आईडी उन्हें अलग करने के बराबर नहीं हैं।


यदि आप जावास्क्रिप्ट / सीएसएस का उपयोग कर रहे हैं तो आपको उस पर किसी भी सीएसएस / जावास्क्रिप्ट सामान को लागू करने के लिए नियंत्रण के 'आईडी' का उपयोग करना होगा।

यदि आप उस नियंत्रण के लिए नाम सीएसएस काम नहीं करते हैं। उदाहरण के तौर पर यदि आप किसी टेक्स्टबॉक्स से जुड़े जावास्क्रिप्ट कैलेंडर का उपयोग करते हैं तो आपको इसे जावास्क्रिप्ट कैलेंडर असाइन करने के लिए टेक्स्ट नियंत्रण की आईडी का उपयोग करना होगा।


नाम डीओएम (दस्तावेज़ ऑब्जेक्ट मॉडल) में फॉर्म सबमिशन के लिए उपयोग किया जाता है।

विशेष रूप से जावास्क्रिप्ट और सीएसएस के लिए डीओएम में एचटीएमएल नियंत्रण के अद्वितीय नाम के लिए आईडी का उपयोग किया जाता है


  • name फार्म फ़ील्ड * की पहचान करता है; इसलिए उन्हें ऐसे नियंत्रणों द्वारा साझा किया जा सकता है जो इस तरह के एक क्षेत्र (रेडियो बटन, चेकबॉक्स) के लिए एकाधिक possibles मानों का प्रतिनिधित्व करने के लिए खड़े हैं। उन्हें फॉर्म मानों के लिए कुंजी के रूप में सबमिट किया जाएगा।
  • id डीओएम तत्वों की पहचान करता है; इसलिए उन्हें सीएसएस या जावास्क्रिप्ट द्वारा लक्षित किया जा सकता है।

* नाम स्थानीय एंकरों की पहचान के लिए भी उपयोग किए जाते हैं , लेकिन यह बहिष्कृत है और 'आईडी' आजकल ऐसा करने का एक पसंदीदा तरीका है।





html-input