सवाल HTML में आईडी विशेषता के लिए वैध मान क्या हैं?


बनाते समय id एचटीएमएल तत्वों के लिए विशेषताएं, मूल्य के लिए कौन से नियम हैं?


1710
2017-09-16 09:08


मूल


यह एचटीएमएल 5 और spec के पिछले संस्करणों के बीच अलग है। मैंने इसे यहां समझाया: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
मैंने SharePoint 2010 को इस तरह का मान निर्दिष्ट किया - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} वेब पार्ट के भीतर गतिशील रूप से जेनरेट की गई तालिका के लिए और एक पृष्ठ जिसमें आईडी मान है उस तरह के किसी भी लोकप्रिय ब्राउज़र में तोड़ नहीं आया। जावास्क्रिप्ट के माध्यम से इस तरह के आईडी मूल्यों से निपटना मुश्किल है हालांकि - mvark.blogspot.in/2012/07/... - mvark
के लिए एचटीएमएल 4 और एचटीएमएल 5 आवश्यकताओं ID मूल्य बहुत अलग हैं। यहां एचटीएमएल 5 का एक त्वरित और पूर्ण रंडाउन है ID नियम: stackoverflow.com/a/31773673/3597276 - Michael_B
कृपया ध्यान दें: कुछ उत्तरों के रूप में ऐसा करना और एक अवधि का उपयोग करना है (**.**) jQuery के साथ आपको काफी परेशानी होगी, उदाहरण के लिए, इसका उपयोग करना <input id="me.name" />और फिर $("#me.name").val() jQuery को देखने के लिए कारण होगा <me> कक्षा के साथ टैग करें .name, जो वास्तव में कोई नहीं चाहता! - Sam Swift 웃
@ सैमस्विफ्ट 웃 नहीं, आपको बस विशेष पात्रों से बचना होगा दस्तावेज़ कहते हैं। कृपया इसे जाँचे ऑनलाइन डेमो। - Álvaro González


जवाब:


के लिये एचटीएमएल 4, जवाब तकनीकी रूप से है:

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

एचटीएमएल 5 यह भी अधिक अनुमोदित है, केवल यह कहकर कि एक आईडी में कम से कम एक वर्ण होना चाहिए और इसमें कोई भी स्थान वर्ण नहीं हो सकता है।

आईडी विशेषता केस संवेदनशील है एक्सएचटीएमएल

पूरी तरह से व्यावहारिक मामले के रूप में, आप कुछ पात्रों से बचना चाह सकते हैं। अवधि, कॉलन और '#' का सीएसएस चयनकर्ताओं में विशेष अर्थ है, इसलिए आपको उन वर्णों से बचने के लिए एक अक्षर का उपयोग करना होगा सीएसएस में बैकस्लैश या एक में एक डबल बैकस्लैश चयनकर्ता स्ट्रिंग jQuery को पास किया गया। इस अवधि के बारे में सोचें कि आप अपनी स्टाइलशीट्स या कोड में किसी चरित्र से बचने से पहले कितनी बार आईड्स में अवधि और कॉलन के साथ पागल हो जाते हैं।

उदाहरण के लिए, एचटीएमएल घोषणा <div id="first.name"></div> यह सही है। आप उस तत्व को सीएसएस में चुन सकते हैं #first\.name और jQuery में ऐसा है: $('#first\\.name'). लेकिन अगर आप बैकस्लैश भूल जाते हैं, $('#first.name'), आपके पास आईडी के साथ तत्व की तलाश करने वाला एक बिल्कुल वैध चयनकर्ता होगा first और कक्षा भी है name। यह एक बग है जिसे अनदेखा करना आसान है। आप आईडी चुनने के लंबे समय तक खुश रह सकते हैं first-name (एक अवधि के बजाय एक हाइफ़न), इसके बजाए।

आप नामकरण सम्मेलन में सख्ती से चिपके हुए अपने विकास कार्यों को सरल बना सकते हैं। उदाहरण के लिए, यदि आप पूरी तरह से निचले-केस वर्णों तक सीमित हैं और हमेशा हाइफ़न या अंडरस्कोर वाले शब्दों को अलग करते हैं (लेकिन दोनों नहीं, एक चुनें और कभी भी दूसरे का उपयोग न करें), तो आपके पास एक याद रखने योग्य पैटर्न है। आप कभी आश्चर्य नहीं करेंगे "यह था firstName या FirstName? "क्योंकि आप हमेशा जानते होंगे कि आपको टाइप करना चाहिए first_name। ऊंट के मामले को पसंद करते हैं? फिर अपने आप को सीमित करें, कोई हाइफ़न या अंडरस्कोर नहीं, और हमेशा, पहले वर्ण के लिए लगातार ऊपरी-केस या लोअर-केस का उपयोग करें, उन्हें मिश्रण न करें।


अब एक बहुत ही अस्पष्ट समस्या यह थी कि कम से कम एक ब्राउज़र, नेटस्केप 6, गलत-पहचान आईडी विशेषता मान केस-संवेदी के रूप में। इसका मतलब था कि अगर आपने टाइप किया था id="firstName" अपने एचटीएमएल में (लोअर-केस 'एफ') और #FirstName { color: red } आपके सीएसएस (ऊपरी-मामले 'एफ') में, वह बग्गी ब्राउज़र तत्व के रंग को लाल रंग में सेट करने में असफल रहा होगा। इस संपादन के समय, अप्रैल 2015, मुझे आशा है कि आपको नेटस्केप 6 का समर्थन करने के लिए कहा नहीं जा रहा है। इस पर एक ऐतिहासिक फुटनोट पर विचार करें।


1488
2017-09-17 01:42



ध्यान दें कि कक्षा और आईडी विशेषताएँ कर रहे हैं एक्सएचटीएमएल में केस-सेंसिटिव, अन्य सभी विशेषताओं नहीं हैं। एरिक मेयर ने भाग लिया एक सीएसएस कार्यशाला में मैंने इसका उल्लेख किया। - John Topley
यह भी ध्यान रखें कि यदि आप आईडी द्वारा किसी तत्व को लक्षित करने के लिए एक सीएसएस नियम लिखने का प्रयास करते हैं, और आईडी के साथ एक आईडी, यह काम नहीं करेगा। ओहो! - Zack The Human
से संबंधित '।' या ':' jQuery का उपयोग कर एक आईडी में, jQuery देखें सामान्य प्रश्न। इसमें एक छोटा सा कार्य होता है जो आवश्यक भागने से होता है। - Wolfram
id विशेषता है [w3.org/TR/html4/struct/global.html#adef-id](case एचटीएमएल 4 में संवेदनशील) और इसे एक पत्र (ए से ज़ेड तक सीमित) से शुरू करना है। यह भी ध्यान रखें कि आपके उदाहरण में आपके तत्व का टेक्स्ट रंग लाल नहीं होना चाहिए क्योंकि आपका सीएसएस वर्ग के साथ तत्व को संदर्भित करता है FirstName आपके लिए नहीं id। - Augustus Kling
अगस्तस की ओर इशारा करते हुए त्रुटि अभी भी मौजूद है। आपके उदाहरण में, यदि आपके पास है id="firstName" या तो HTML 4 या HTML 5 और #FirstName { color: red } सीएसएस में, केवल एक छोटी गाड़ी ब्राउज़र होगा तत्व का रंग लाल रंग में सेट करें। - Stephen Booher


वहाँ से एचटीएमएल 4 विनिर्देश:

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

एक सामान्य गलती एक आईडी का उपयोग करना है जो अंकों से शुरू होती है।


195
2017-09-16 09:09



ध्यान दें कि एचटीएमएल 5 और अधिक की अनुमति देता है तो HTML4 उदाहरण के लिए देखें 456bereastreet.com/archive/201011/... तथा w3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
आईई 6 ने अंडरस्कोर से शुरू होने वाली आईडी का समर्थन नहीं किया, लेकिन यह वैसे भी मर चुका है। - rahmanisback
आई 6 के बारे में @rahmanisback, किसी ने ऐसा सोचा होगा, लेकिन मैं अभी बैंक के लिए एक प्रस्ताव पूरा कर रहा हूं और वे जोर देते हैं कि कोई भी विक्रेता आईई 6 में रन विकसित करता है। यह 30,000 उपयोगकर्ताओं के लिए है। बिल्ली, अगर हम उन्हें उन सभी डेस्कटॉप पर अपने ब्राउज़र को अपडेट करने के लिए प्राप्त कर सकते हैं, तो यह केवल बेरोजगारी दर में मदद कर सकता है। - Karl
@ करल मुझे यह सुनकर खेद है। आईई 6 सुरक्षा मुद्दों के बारे में चेतावनी देने के आपके सभी प्रयास करें। हालांकि आईई 7 जल्द ही नया आईई 6 होगा, इसलिए हाँ यह पिछले उद्योग में एमएस को हल करने के लिए इस उद्योग में हमारी किस्मत प्रतीत होता है। - rahmanisback
@MrShark दूसरा लिंक टूटा हुआ है; नया लिंक - SWdV


आप तकनीकी रूप से आईडी / नाम विशेषताओं में कोलन और अवधि का उपयोग कर सकते हैं, लेकिन मैं दृढ़ता से दोनों से बचने का सुझाव दूंगा।

सीएसएस (और jQuery जैसी कई जावास्क्रिप्ट पुस्तकालयों) में, अवधि और कोलन दोनों का विशेष अर्थ होता है और यदि आप सावधान नहीं हैं तो आप समस्याओं में भाग लेंगे। अवधि कक्षा चयनकर्ता हैं और कोलन छद्म चयनकर्ता हैं (उदाहरण के लिए, माउस के ऊपर होने पर तत्व के लिए "होवर")।

यदि आप एक तत्व "my.cool:thing" आईडी देते हैं, तो आपका सीएसएस चयनकर्ता इस तरह दिखेगा:

#my.cool:thing { ... /* some rules */ ... }

जो वास्तव में कह रहा है, "सीएसएस में 'मेरी' आईडी, 'कूल' और 'चीज' छद्म चयनकर्ता 'की एक कक्षा के साथ तत्व।

किसी भी मामले, संख्याओं, अंडरस्कोर और हाइफ़न के ए-जेड पर चिपकाएं। और ऊपर बताए अनुसार, सुनिश्चित करें कि आपकी आईडी अद्वितीय हैं।

यह आपकी पहली चिंता होनी चाहिए।


130
2017-09-16 14:01



आप कोलन और अवधियों का उपयोग कर सकते हैं - लेकिन आपको डबल बैकस्लाश का उपयोग करके उनसे बचने की आवश्यकता होगी, उदाहरण के लिए: $ ('# my \\। Cool \\: thing') या एक चर से बचें: $ ('#' + id.replace (/\।/,'\\।')।बदलने के(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/... - joeformd
अंक क्यों नहीं; क्यों सिर्फ ए-जेड? जब तक आप संख्या से शुरू नहीं होते हैं, तब तक संख्याओं के साथ कुंजी वाले तत्वों का जिक्र करते समय संख्या बहुत उपयोगी आईडी होती है। - cori
बस एफवाईआई, डैश कर रहे हैं तकनीकी रूप से हाइफ़न। माइनस साइन ASCII चरित्र सेट में नहीं है। en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
यदि आपके पास ये वर्ण हैं (., :) आईडी में, और उन्हें हटा नहीं सकते (खांसी ... शेयरपॉइंट), आप आईडी चयनकर्ताओं के बजाय विशेषता चयनकर्ताओं के साथ सीएसएस में इसे प्राप्त कर सकते हैं, उदा। [id='my.cool:thing']हालांकि, इस चयनकर्ता के पास आईडी चयनकर्ता की तुलना में कम विशिष्टता होगी, जो अन्य समस्याओं का कारण बन सकती है। - Faust
पुराना, मुझे पता है, लेकिन हाइफ़न पर संख्याओं और बैकपीडल को शामिल करने के लिए अपडेट किया गया है - Michael Thompson


jQuery कर देता है किसी मान्य आईडी नाम को संभाल लें। आपको बस मेटाएक्टैक्टर्स से बचने की जरूरत है (यानी, डॉट्स, अर्धविराम, स्क्वायर ब्रैकेट ...)। ऐसा कहने की तरह है कि जावास्क्रिप्ट को केवल उद्धरणों के साथ समस्या है क्योंकि आप लिख नहीं सकते हैं

var name = 'O'Hara';

JQuery एपीआई में चयनकर्ता (नीचे नोट देखें)


60
2018-01-10 20:40





कड़ाई से यह मेल खाना चाहिए

[A-Za-z][-A-Za-z0-9_:.]*

लेकिन jquery को कोलों के साथ समस्याएं प्रतीत होती हैं, इसलिए इससे बचने के लिए बेहतर हो सकता है।


51
2017-09-16 09:11



यह नहीं होना चाहिए [ए-ज़ा-जेड] [- ए-ज़ा-जे 0-9 _:।] * इसके बजाय, चूंकि पहले अक्षर के बाद सब कुछ वैकल्पिक है ("किसी भी संख्या" में शून्य शामिल है, "मई" का तात्पर्य है " यह करना है")। - foo


एचटीएमएल 5:

आईडी विशेषता पर अतिरिक्त प्रतिबंधों से छुटकारा पाता है यहाँ देखें। केवल एक ही आवश्यकता है (दस्तावेज़ में अद्वितीय होने के अलावा) हैं:

  1. मान में कम से कम एक वर्ण होना चाहिए (खाली नहीं हो सकता है)
  2. इसमें कोई स्पेस वर्ण नहीं हो सकता है।

पूर्व एचटीएमएल 5:

आईडी मेल खाना चाहिए:

[A-Za-z][-A-Za-z0-9_:.]*
  1. ए-जेड या ए-जेड अक्षरों से शुरू होना चाहिए
  2. में हो सकता है - (हाइफन), _ (अंडरस्कोर), : (कोलन) और . (अवधि)

लेकिन एक से बचना चाहिए : तथा . beacause:

उदाहरण के लिए, एक आईडी को "ab: c" लेबल किया जा सकता है और स्टाइल शीट में #ab: c के रूप में संदर्भित किया जा सकता है लेकिन साथ ही तत्व के लिए आईडी होने के कारण, इसका अर्थ आईडी "ए", कक्षा "बी", छद्म- चयनकर्ता "सी"। भ्रम से बचने और उपयोग करने से दूर रहने के लिए सर्वश्रेष्ठ। और: पूरी तरह से।


39
2018-01-18 07:09





एचटीएमएल 5: आईडी और कक्षा विशेषताओं के लिए अनुमत मान

एचटीएमएल 5 के रूप में, आईडी के मूल्य पर केवल प्रतिबंध ही हैं:

  1. दस्तावेज़ में अद्वितीय होना चाहिए
  2. किसी भी अंतरिक्ष अक्षर नहीं होना चाहिए
  3. कम से कम एक चरित्र होना चाहिए

इसी तरह के नियम कक्षाओं पर लागू होते हैं (निश्चित रूप से विशिष्टता को छोड़कर)।

तो मूल्य सभी अंक हो सकता है, केवल एक अंक, केवल विराम चिह्न, विशेष वर्ण, जो भी हो। बस कोई सफेद जगह नहीं है। यह HTML4 से बहुत अलग है।

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

एचटीएमएल 5 में ये मान्य हैं:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id=""> ... </div>
<div id="{}"> ... </div>
<div id=""> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

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

उदाहरण के लिए, निम्नलिखित आईडी HTML5 में मान्य है:

<div id="9lions"> ... </div>

हालांकि, यह सीएसएस में अमान्य है:

सीएसएस 2.1 spec से:

4.1.3 वर्ण और मामला

सीएसएस में, पहचानकर्ता (तत्व नाम, कक्षाएं, और आईडी सहित   चयनकर्ताओं) में केवल वर्ण [ए-जेए-जेड -9] और आईएसओ 10646 शामिल हो सकते हैं   अक्षर यू +00 ए 0 और उच्चतर, साथ ही हाइफ़न (-) और अंडरस्कोर   (_); वे एक अंक, दो हाइफ़न, या एक हाइफ़न से शुरू नहीं कर सकते हैं   एक अंक के बाद

ज्यादातर मामलों में आप उन संदर्भों में वर्णों से बचने में सक्षम हो सकते हैं जहां उनके पास प्रतिबंध या विशेष अर्थ है।


डब्ल्यू 3 सी संदर्भ

एचटीएमएल 5

3.2.5.1 द id   गुण

id विशेषता इसके तत्व के अद्वितीय पहचानकर्ता (आईडी) को निर्दिष्ट करती है।

मूल्य तत्व के घर में सभी आईडी के बीच अद्वितीय होना चाहिए   subtree और कम से कम एक चरित्र होना चाहिए। मूल्य नहीं होना चाहिए   कोई अंतरिक्ष अक्षर शामिल हैं।

नोट: आईडी के किस प्रारूप पर कोई अन्य प्रतिबंध नहीं है; में   विशेष रूप से, आईडी में अंक शामिल हो सकते हैं, एक अंक से शुरू हो सकते हैं, शुरू करें   अंडरस्कोर के साथ, केवल विराम चिह्न, इत्यादि शामिल हैं।

3.2.5.7 द class   गुण

विशेषता, यदि निर्दिष्ट है, तो एक मान होना चाहिए जो एक सेट है   अंतरिक्ष से अलग टोकन विभिन्न वर्गों का प्रतिनिधित्व करते हैं   तत्व से संबंधित है।

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

टोकन लेखकों पर कोई अतिरिक्त प्रतिबंध नहीं है   कक्षा विशेषता, लेकिन लेखकों को मूल्यों का उपयोग करने के लिए प्रोत्साहित किया जाता है   वर्णन करने वाले मानों की बजाय सामग्री की प्रकृति का वर्णन करें   सामग्री की वांछित प्रस्तुति।


33
2017-08-02 15:53





अभ्यास में कई साइटें उपयोग करती हैं id संख्याओं से शुरू होने वाले गुण, भले ही यह तकनीकी रूप से मान्य HTML नहीं है।

एचटीएमएल 5 मसौदा विनिर्देश के लिए नियमों को कम करता है id तथा name विशेषताएं: वे अब केवल अपारदर्शी तार हैं जिनमें रिक्त स्थान नहीं हो सकते हैं।


28
2017-09-16 10:04





हाइफ़ेंस, अंडरस्कोर, अवधि, कोलन, संख्याएं और अक्षर सभी सीएसएस और JQuery के उपयोग के लिए मान्य हैं। निम्नलिखित कार्य करना चाहिए लेकिन यह पूरे पृष्ठ में अद्वितीय होना चाहिए और एक अक्षर [ए-ज़ा-जेड] से भी शुरू होना चाहिए।

कोलन और अवधियों के साथ काम करने के लिए थोड़ा और काम की ज़रूरत है लेकिन आप इसे निम्न उदाहरण के रूप में कर सकते हैं।

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

25
2017-07-07 10:09





एचटीएमएल 5

ध्यान में रखते हुए कि आईडी अद्वितीय होना चाहिए, यानी। ऐसे दस्तावेज़ में एकाधिक तत्व नहीं होने चाहिए जिनमें एक ही आईडी मान हो।

एचटीएमएल 5 में आईडी सामग्री के नियम हैं (अद्वितीय होने के अलावा):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

यह है डब्ल्यू 3 आईडी के बारे में कल्पना (från एमडीएन):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

और जानकारी:

  • डब्ल्यू 3 - वैश्विक विशेषताएं (id)
  • MDN एक श्रद्धांजलि (id)

18
2017-08-26 21:54