क्या मैं HTML5 का उपयोग करके <चीज़ के अंदर <बटन> तत्व को घोंसला बना सकता हूँ?

145

मैं निम्नलिखित कर रहा हूँ:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

यह अच्छा काम करता है लेकिन मुझे एक HTML5 सत्यापन त्रुटि मिलती है जो कहती है कि "तत्व 'बटन को तत्व' एक बटन 'के भीतर नहीं होना चाहिए।

क्या कोई मुझे सलाह दे सकता है कि मुझे क्या करना चाहिए?

html

— मैरी
स्रोत

8

सत्यापनकर्ता ने पहले ही आपके लिए आपके प्रश्न का उत्तर दे दिया है, और यहां तक कि आपको यह भी बताया कि यह उस त्रुटि संदेश में मान्य क्यों नहीं है।

— बेकार कोड

1

लेकिन क्या कोई विकल्प है अगर मैं चाहता हूं कि Google लिंक के रूप में इसे देख सके। बटन के उपयोग के उदाहरण के रूप में मेरे पास अगले रिकॉर्ड और पिछले रिकॉर्ड के लिए "<<" और ">>" नामक बटन हैं। मेरा मानना है कि ये बटन होने चाहिए लेकिन कार्यक्षमता यह है कि वे नए पृष्ठों से जुड़ते हैं।

— मैरी

3

मेरा सवाल यह है कि क्या यह मामला है..यदि आप इसे एक अच्छी तरह से अपवादित अपवाद बनाते हैं।

— मुहम्मद उमेर

1

अगर मैं <बटन> <a href="dsada.html"> परीक्षण </a> </ बटन> डालूं तो यह इंटरनेट एक्सप्लोरर 11 या फ़ायरफ़ॉक्स पर काम नहीं करता है।

— dutraveller

231

नहीं , यह W3C से HTML5 विशेष दस्तावेज़ के अनुसार मान्य HTML5 नहीं है :

सामग्री मॉडल: पारदर्शी , लेकिन कोई इंटरैक्टिव सामग्री वंशज नहीं होनी चाहिए ।

एक तत्व को पूरे पैराग्राफ, सूचियों, तालिकाओं, और आगे, यहां तक कि पूरे वर्गों के चारों ओर लपेटा जा सकता है, जब तक कि कोई इंटरैक्टिव सामग्री भीतर न हो (जैसे बटन या अन्य लिंक)।

दूसरे शब्दों में, आप <a>निम्नलिखित को छोड़कर किसी भी तत्व को अंदर कर सकते हैं :

<a>
<audio>(यदि नियंत्रण विशेषता मौजूद है)
<button>
<details>
<embed>
<iframe>
<img>(यदि usemap विशेषता मौजूद है)
<input>(यदि प्रकार छिपी अवस्था में विशेषता नहीं है )
<keygen>
<label>
<menu>(यदि प्रकार विशेषता टूलबार स्थिति में है)
<object>(यदि usemap विशेषता मौजूद है)
<select>
<textarea>
<video>(यदि नियंत्रण विशेषता मौजूद है)

यदि आप एक ऐसा बटन लगाने की कोशिश कर रहे हैं जो कहीं लिंक करता है, तो उस बटन को <form>टैग के अंदर लपेटें :

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

हालांकि, यदि आपका <button>टैग CSS का उपयोग करके स्टाइल किया गया है और सिस्टम के विजेट की तरह नहीं दिखता है ... अपने आप को एक एहसान करो, अपने <a>टैग के लिए एक नया वर्ग बनाएं और इसे उसी तरह से स्टाइल करें।

— एंड्रयू मूर
स्रोत

1

@Andrew मूर - एक और तरीका है। मेरा मानना है कि इसने समस्याएं दीं और यही कारण है कि इसे एक <a> लिंक के अंदर बदल दिया गया। निश्चित नहीं है कि समस्या क्या थी, लेकिन हमारे पास इनमें से कई बटन इस तरह हैं। शायद ऐसा इसलिए था क्योंकि हम <a> लिंक का उपयोग करके एसईओ में सुधार करना चाहते थे।

— मैरी

2

@ मेरी: बटन की तरह दिखने के लिए आपके लिंक को स्टाइल करने के अलावा कोई और तरीका नहीं है।

— एंड्रयू मूर

3

user25 न तो विधि = "पोस्ट" का उपयोग करना बेहतर नहीं है क्योंकि ब्राउज़र आगे और पीछे नेविगेट करते समय पोस्ट फॉर्म को फिर से भेजने के लिए कहता है। जैसा कि GET एक फॉर्म का डिफ़ॉल्ट तरीका है, एक विधि छोड़ सकता है = संक्षिप्तता के लिए "प्राप्त करें"।

— बिजन

4

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

— आइकनोकॉस्ट

2

जैसा कि @jonaspas ने सुझाव दिया है, एक <div>अंदर <a>HTML5 में बिल्कुल मान्य है: validator.w3.org/nu/…

— Socob

43

यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं , तो यह काफी अच्छी तरह से काम करता है

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

— user2197018
स्रोत

एक गोल बटन फ़ॉन्ट भयानक आइकन के साथ अच्छी तरह से काम नहीं करता है

— टूलकिट

कक्षा का उपयोग करना = 'btn btn-default' अन्य बटन (MVC6) से मेल खाता है।

— क्रोकेक

12

नहीं।

निम्नलिखित समाधान जावास्क्रिप्ट पर निर्भर करता है।

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

बटन एक मौजूदा के अंदर रखा जा रहा है <form>के साथ method="post"है, तो यह सुनिश्चित बटन विशेषता है type="button"अन्यथा बटन पोस्ट आपरेशन प्रस्तुत करेगा। इस तरह से आपके पास <form>GET और POST ऑपरेशन बटन का मिश्रण हो सकता है ।

— पीटर विल्सन
स्रोत

onclick फ़ाइल प्रोटोकॉल पर काम नहीं करेगा, इसलिए यह स्थिर प्रस्तुति के लिए उपयोगी नहीं है, उदाहरण के लिए। इस मामले में एक्शन प्रोपीटी जाने का रास्ता है।

— netalex

1

यदि बटन किसी पृष्ठ से जुड़ा हुआ है, तो यह एक बटन नहीं है, यह एक लंगर है

— कैप्सूल

इन दिनों यह देखना इतना आम है। बस अस्तित्व में हर वेब विकास ढांचे के लिए लैंडिंग पृष्ठ देखें। मैं आम तौर पर शुद्धवादी तर्क के लिए हूं, लेकिन यहां तक कि मैं यह स्वीकार कर रहा हूं कि एक बड़ा आयताकार बटन एक लिंक की तुलना में बेहतर, अधिक स्पष्ट खर्च होता है, भले ही यह एक सच्चे प्रपत्र कार्रवाई शुरू करने के बजाय किसी पृष्ठ से लिंक हो।

— TheDudeAbides

अभी मैं एक है <a>अंदर <button>(एक ही साथ hrefअगर जे एस अक्षम किया गया है एक बैकअप के रूप में), और अब से छह महीने मैं निश्चित रूप से शर्मिंदा जा सकता है कि मुझे लगता है कि भर्ती कराया जा रहा हूँ।

— TheDudeAbides

@ TheDudeAbides मैं इसके पहलू के बारे में बात नहीं कर रहा हूं, मैं उस मार्कअप के बारे में ले रहा हूं जिसका आप उपयोग करना चाहते हैं। इस लिंक को बड़े आयताकार बटन के रूप में स्टाइल करने से क्या रोकता है? जब तक आपकी साइट किसी भी शैली का उपयोग नहीं करती है? हम जिस बारे में टिप्पणी कर रहे हैं, उसके ऊपर के उत्तर को btw इसका एक आदर्श उदाहरण है। यह एक एंकर टैग है, जिसे बटन के रूप में स्टाइल किया गया है।

— कैप्सूल

10

मैं बस एक ही मुद्दे में कूद गया हूं और मैंने इसे 'बटन' टैग को 'स्पैन' टैग में हल किया है। मेरे मामले में मैं बूटस्ट्रैप का उपयोग कर रहा हूं। यह इस तरह दिखता है:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a>

— gobeltri
स्रोत

4

आपको बूटस्ट्रैप के साथ स्पैन की बिल्कुल भी आवश्यकता नहीं है। बस पूरे वर्ग के हिस्से को <a> पर ले जाएँ और आपके पास एक लिंक बटन होगा। उदाहरण के लिए <a href="#register" class="btn btn-default btn-lg"> सदस्यता लें </a>

— रयान बूडिकोम

मूल पोस्टर ने पूछा कि क्या एंकर टैग के अंदर बटन लगाना संभव है । स्वीकृत उत्तर नोट करता है कि यह W3C चश्मा के खिलाफ जाता है <<अंदर एक <a> जगह। मुझे लगता है कि यही कारण है कि गोलबेल्ट्री एक बटन के रूप में <span> स्टाइलिंग का प्रदर्शन कर रही थी।

— स्टैकऑवरफ्लोवर

यह समझ में आता है कि क्या अंदर कोई अन्य सामग्री है <a>, जो लिंक का हिस्सा है, लेकिन एक बटन की तरह स्टाइल नहीं है। उदाहरण के लिए, किसी भी divछवि (छवि, पृष्ठभूमि, पाठ, आदि) के भीतर एक लिंक पर जाता है, लेकिन केवल spanएक बटन की तरह दिखता है।

— योशिय्याह

7

यह वास्तव में अजीब होगा अगर यह मान्य था, और मैं इसे अमान्य होने की उम्मीद करूंगा। किसी अन्य क्लिक करने योग्य तत्व के अंदर एक क्लिक करने योग्य तत्व होने का क्या मतलब होना चाहिए? यह कौन सा है - एक बटन, या एक लिंक?

— स्टीव जोर्गेनसन
स्रोत

धन्यवाद स्टीव। यह एक टीम-कार्यकर्ता द्वारा मुझे सुझाई गई विधि थी। विधि काम करती है। वहाँ कुछ बेहतर तरीका है मैं यह कर सकता है?

— मैरी

1

@Marie यदि आप एक बटन की तरह एक लिंक दिखना चाहते हैं, तो सीएसएस शैलियों का उपयोग करना आसान है ताकि यह इस तरह दिख सके। इसके समान एक बॉर्डर शैली जोड़ें border: 2px outset:। यदि आप कोनों को थोड़ा गोल करना चाहते हैं तो आप उस पर सीमा-त्रिज्या का भी उपयोग कर सकते हैं । एक साधारण <img>टैग भी अच्छा काम करेगा।

— बेकार संहिता

3

एक अन्य विकल्प बटन के ऑनक्लिक विशेषता का उपयोग करना है:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

यह काम करता है, हालांकि, उपयोगकर्ता होवर पर प्रदर्शित लिंक को नहीं देखेगा क्योंकि वे तत्व के अंदर थे।

— LaserCat
स्रोत

2

इन दिनों भले ही कल्पना इसकी अनुमति नहीं देती हो, फिर भी "लगता है" अभी भी <a href...><button ...></a>टैग, एफडब्ल्यूआईडब्ल्यू के भीतर बटन को एम्बेड करने के लिए काम करता है ...

— rogerdpack
स्रोत

2

यह काम करता है जब <button>एक के भीतर निहित नहीं है <form>। हालाँकि, जैसे ही बटन समाहित होता है (जैसे, <form>...<a><button>) यह काम करना बंद कर देता है, जब तक कि कोई बटन के ऑन-क्लिक हैंडलर को निष्क्रिय नहीं करता। इस परिदृश्य से बचने के लिए वारंट के लिए यह पर्याप्त है।

— बिशप

0

आप बटन में एक वर्ग जोड़ सकते हैं और कुछ स्क्रिप्ट को पुनर्निर्देशित कर सकते हैं।

मैं इसे इस तरह से करता हूं:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

— divHelper11
स्रोत

0

क्यों नहीं..आप बटन पर भी तस्वीर एम्बेड कर सकते हैं

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM>

— तपस्य सुसेतितं
स्रोत

2

समस्या यह है कि <आरेख </a> जैसा कि ओपी ने पूछा है कि वह अपनी सीमाओं के भीतर होने की अनुमति देता है, उसमें थोड़ा प्रतिबंध है। वहां स्वीकृत प्रश्न देखें।

— थॉमस

0

यहाँ स्पष्टीकरण और काम करने का हल: हाउटो: ओनक्लिक जावास्क्रिप्ट के साथ एक और div के अंदर onclick के साथ div

इस स्क्रिप्ट को अपने आंतरिक क्लिक हैंडलर में निष्पादित करके:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

— रूवेन
स्रोत

-1

एक लिंक के अंदर एक बटन तत्व को एम्बेड करना HTML5 में अवैध है।

डिफ़ॉल्ट पर सीएसएस का उपयोग करने के लिए बेहतर और: सक्रिय (दबाए गए) राज्य:

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

स्निपेट का विस्तार करें

— पतंजलि
स्रोत

-2

मैं आपके जावास्क्रिप्ट समाधानों की कोशिश करता हूं लेकिन, काम के लिए मुझे e.preventDefault();अपनी जावास्क्रिप्ट फ़ंक्शन को सम्मिलित करने की आवश्यकता है ।

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>

— पाओलो फेरारीस
स्रोत

-3

बटन के अंदर सूत्रीकरण विशेषता का उपयोग करें

पुनश्च! यह केवल तभी काम करता है जब आपका बटन = "सबमिट" हो

<button type="submit" formaction="www.youraddress.com">Submit</button>

— Moonfly
स्रोत

आपको बटन को <फॉर्म> टैग में भी डालना होगा।

— डेनोडस्टर

-3

<a href="index.html">
  <button type="button">Submit</button>
</a>

या आप बटन के रूप में जावा स्क्रिप्ट का उपयोग कर सकते हैं:

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>

— आदित्य पांचाल
स्रोत

बस कुछ ब्राउज़र इसे अनुमति देंगे, इसका मतलब यह नहीं है कि यह एक अच्छा विचार है।

— डेनोडस्टर