एक HTML बटन कैसे बनाएं जो एक लिंक की तरह काम करता है?

Question

मैं एक HTML बटन बनाना चाहूंगा जो एक लिंक की तरह काम करे। इसलिए, जब आप बटन पर क्लिक करते हैं, तो यह एक पृष्ठ पर पुनर्निर्देशित करता है। मैं चाहूंगा कि यह यथासंभव सुलभ हो।

मुझे यह भी अच्छा लगेगा इसलिए URL में कोई अतिरिक्त वर्ण या पैरामीटर नहीं हैं।

इसे कैसे प्राप्त किया जा सकता है?

---

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

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

लेकिन इसके साथ समस्या यह है कि सफारी और इंटरनेट एक्सप्लोरर में , यह URL के अंत में एक प्रश्न चिह्न चरित्र जोड़ता है। मुझे एक समाधान खोजने की जरूरत है जो URL के अंत में किसी भी वर्ण को न जोड़े।

ऐसा करने के लिए दो अन्य समाधान हैं: एक बटन की तरह दिखने के लिए जावास्क्रिप्ट का उपयोग करना या लिंक को स्टाइल करना।

जावास्क्रिप्ट का उपयोग करना:

<button onclick="window.location.href='/page2'">Continue</button>

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

<a href="/link/to/page2">Continue</a>

Comments

GST को POST में बदलें। किसी को भी ओपी की पहली समस्या का पता नहीं चला है, जो ?यूआरएल पर था । यह द्वारा प्रपत्र जा रहा है के कारण होता है type="GET", के लिए इसे बदल type="POST"और ?यूआरएल गायब के अंत में। ऐसा इसलिए है क्योंकि GET URL में सभी चर भेजता है, इसलिए ?।

— redfox05

@ redfox05 यह उस सन्दर्भ में काम करता है जहाँ आप इस बात को लेकर सख्त नहीं हैं कि आप अपने पृष्ठों के लिए कौन सी विधि स्वीकार करते हैं। एक संदर्भ में जहां आप उन पृष्ठों पर पोस्टों को अस्वीकार करते हैं जो उम्मीद कर रहे हैं कि GETयह विफल हो जाएगा। मुझे अभी भी लगता है कि लिंक का उपयोग करने से कैविट के साथ यह समझ में आता है कि जब बटन सक्रिय होता है तो यह "स्पेसबार" पर प्रतिक्रिया नहीं करेगा। साथ ही कुछ शैली और व्यवहार अलग होंगे (जैसे कि ड्रैग करने योग्य)। यदि आप सही "बटन-लिंक" अनुभव चाहते हैं, तो ?इसे समाप्त करने के लिए URL परिष्करण के लिए सर्वर साइड पुनर्निर्देशन एक विकल्प भी हो सकता है।

— निकोलस बूवरेट

यदि आप css के साथ एक बटन बनाना चाहते हैं तो cssbuttongenerator.com आपके काम आ सकता है।

— बर्फ

मुझे लगता है कि एक लिंक बनाने के लिए बेहतर आईडेड है जो एक बटन की तरह दिखता है

— यासर

बस एक नोट, मेरे लिए "बटन लाइक लिंक की तरह काम करता है" का अर्थ है, मैं राइट-क्लिक कर सकता हूं और यह तय कर सकता हूं कि नए टैब / विंडो में खोलें, जो जेएस समाधानों के साथ काम नहीं कर रहा है ...

— बेटलिस्टा

Answer 1

एचटीएमएल

सादा HTML तरीका यह है कि <form>आप उस actionविशेषता में वांछित लक्ष्य URL को निर्दिष्ट करें ।

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

यदि आवश्यक हो, तो सीएसएस display: inline;को आसपास के पाठ के साथ प्रवाह में रखने के लिए फॉर्म पर सेट करें। <input type="submit">उपरोक्त उदाहरण के बजाय , आप भी उपयोग कर सकते हैं <button type="submit">। अंतर केवल इतना है कि <button>तत्व बच्चों को अनुमति देता है।

आप सहज रूप <button href="https://google.com">से <a>तत्व के साथ अनुरूप उपयोग करने में सक्षम होने की उम्मीद करेंगे , लेकिन दुर्भाग्य से नहीं, यह विशेषता HTML विनिर्देश के अनुसार मौजूद नहीं है ।

सीएसएस

अगर सीएसएस की अनुमति है, तो बस <a>एक बटन का उपयोग करें जिसे आप दूसरों के बीच appearanceसंपत्ति का उपयोग करके बटन की तरह देख सकते हैं ( यह केवल इंटरनेट एक्सप्लोरर में समर्थित नहीं है )।

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

या बूटस्ट्रैप जैसे कई सीएसएस पुस्तकालयों में से एक को चुनें ।

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

जावास्क्रिप्ट

यदि जावास्क्रिप्ट की अनुमति है, तो सेट करें window.location.href।

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

<input type="button">उपरोक्त उदाहरण के बजाय , आप भी उपयोग कर सकते हैं <button>। अंतर केवल इतना है कि <button>तत्व बच्चों को अनुमति देता है।

Comments

सरल और अच्छा। एक अच्छा समाधान। display: inlineफ़्लो में बटन को रखने के लिए फॉर्म में जोड़ें ।

— पाइका

सफारी में, यह url के अंत में एक प्रश्न चिह्न जोड़ता है ... क्या ऐसा करने का एक तरीका है जो url में कुछ भी नहीं जोड़ता है?

— एंड्रयू

@BalusC अच्छा समाधान है, लेकिन अगर यह किसी अन्य फॉर्म (पैरेंट फॉर्म) के अंदर है, तो इस बटन को दबाकर पेरेंट के फॉर्म एक्शन विशेषता में पता करने के लिए रीडायरेक्ट करता है।

— व्लादिमीर

क्या यह सिर्फ मैं है या <बटन> टैग एक स्पष्ट href विशेषता गुम है?

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

— तेजस्वी हेगड़े

Answer 2

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

ध्यान दें कि type="button"विशेषता महत्वपूर्ण है, क्योंकि इसकी अनुपलब्ध मान डिफ़ॉल्ट सबमिट बटन स्थिति है ।

Comments

@pinouchon को काम करना चाहिए। विंडो निहित है। एक IE9 बग, stackoverflow.com/questions/7690645/… हो सकता है

— एडम

ऐसा लगता है कि यदि आप टाइप नहीं करते हैं = "बटन" तो यह हमेशा काम नहीं करेगा। ऐसा लगता है कि बटन "सबमिट" करने के लिए डिफ़ॉल्ट होगा

— kenitech

यदि आप एक नई विंडो / टैब उपयोग में लिंक खोलना चाहते हैं: onclick = "window.open (' example.com', '_ blank' );"

— बेनोस

@kenitech सही, चश्मा के अनुसार : " लापता मान डिफ़ॉल्ट है बटन सबमिट करें राज्य।"

— Niels Keurentjes

लेकिन उपयोगकर्ता नए टैब में खुले क्लिक नहीं कर सकता, इसके लिए काम करने के लिए, आपको एंकर टैग की आवश्यकता है

— Irshu

Answer 3

यदि यह एक मूल HTML एंकर टैग में खोजे जा रहे बटन का दृश्य है तो आप ट्विटर बूटस्ट्रैप फ्रेमवर्क का उपयोग करके किसी भी सामान्य HTML प्रकार के लिंक / बटन को बटन के रूप में प्रदर्शित कर सकते हैं। कृपया फ्रेमवर्क के संस्करण 2, 3 या 4 के बीच दृश्य अंतर पर ध्यान दें:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

बूटस्ट्रैप (v4) नमूना उपस्थिति:

बूटस्ट्रैप (v3) नमूना उपस्थिति:

बूटस्ट्रैप (v2) नमूना उपस्थिति:

Comments

एक बटन को स्टाइल करने के लिए थोड़ा ओवरकिल लगता है, नहीं? बॉर्डर, पैडिंग, बैकग्राउंड और अन्य सीएसएस प्रभावों से आप पूरे ढांचे को लाए बिना समान दिखने के लिए बटन और लिंक स्टाइल कर सकते हैं। बूटस्ट्रैप का उपयोग करने का तरीका अच्छा है, हालांकि बूटस्ट्रैप का उपयोग अत्यधिक लगता है।

— स्कूटकेलुम

Answer 4

उपयोग:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

दुर्भाग्य से, यह मार्कअप HTML5 में मान्य नहीं है और यह न तो मान्य होगा और न ही हमेशा अपेक्षित रूप से काम करेगा। दूसरे दृष्टिकोण का उपयोग करें।

Comments

@ बालसु: न तो यह पेज करता है

— रॉबर्ट हार्वे

@ रब: यह मेरी समस्या नहीं है :) इसे मेटा में देखें और देखें। हालाँकि targetविशेषता किनारे पर है।

— बालुसक

Answer 5

HTML5 के अनुसार, बटन formactionविशेषता का समर्थन करते हैं। सबसे अच्छा, कोई जावास्क्रिप्ट या प्रवंचना की जरूरत नहीं है।

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

चेतावनियां

• <form>टैग से घिरा होना चाहिए ।
• <button>टाइप "सबमिट" (या अनिर्दिष्ट) होना चाहिए, मैं इसे "बटन" के साथ काम नहीं कर सका। जो नीचे बिंदु लाता है।
• किसी प्रपत्र में डिफ़ॉल्ट क्रिया को ओवरराइड करता है। दूसरे शब्दों में, यदि आप इसे दूसरे रूप के अंदर करते हैं तो यह संघर्ष का कारण बनने वाला है।

संदर्भ: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browser समर्थन: https://developer.mozilla.org/en-US/docs/Web/ HTML / तत्व / बटन # Browser_compatibility

Comments

बस पूरी जानकारी के लिए: formaction" आईई दुनिया " के बाद से संस्करण 10 और इसके बाद के संस्करण के लिए संगत है

— Luca Detomi

@EternalHour वास्तव में उत्सुक। आपके और मेरे द्वारा प्रदान किए गए उदाहरणों में उन दो रूपों के व्यवहार के बीच एक प्रशंसनीय अंतर माना जाता है? इस विशेष मामले करता है <button formaction>=== <form action>?

— स्यूडोसैवेंट

@pseudosavant - अंतर यह है कि आपका उत्तर कार्य करने के लिए जावास्क्रिप्ट पर निर्भर करता है। इस समाधान में, कोई जावास्क्रिप्ट की आवश्यकता नहीं है, यह सीधे HTML है।

— अनन्तौर

@EternalHour क्षमा करें, मुझे अधिक स्पष्ट होना चाहिए था। जाहिर है जेएस मुझे अलग बनाता है लेकिन यह सिर्फ एक प्रगतिशील वृद्धि है। फॉर्म अभी भी जेएस के बिना उस लिंक पर जाता है। <form>हम अपने प्रत्येक उदाहरण में केवल HTML s के इच्छित व्यवहार के बारे में उत्सुक थे । है formactionएक पर buttonजोड़ने के लिए माना जाता ?एक खाली प्राप्त प्रस्तुत करने के लिए? इस JSBin में ऐसा लग रहा है कि HTML दोनों के लिए बिल्कुल समान है।

— छद्मवसंत

यह नोट करने के लिए उपयोगी है कि यह केवल फॉर्म टैग द्वारा लिपटे जाने पर काम करता है। पाया कि कठिन रास्ता ...

— Adsy2010

Answer 6

यह वास्तविक रूप से बहुत सरल है और किसी भी प्रकार के तत्वों का उपयोग किए बिना। आप बस एक बटन के साथ <a> टैग का उपयोग कर सकते हैं :)।

ऐशे ही:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

और यह एक ही पेज में href लोड करेगा। नया पेज चाहिए? बस उपयोग करें target="_blank"।

संपादित करें

कुछ साल बाद, जबकि मेरा समाधान अभी भी काम कर रहा है, ध्यान रखें कि आप जो चाहें उसे देखने के लिए बहुत सीएसएस का उपयोग कर सकते हैं। यह सिर्फ एक तेज़ तरीका था।

Comments

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

— हैदर बी।

हां, हैदर बी। आप सही हैं, लेकिन आपको यह भी ध्यान रखना चाहिए कि मानक केवल कच्चे गाइड हैं। एक प्रोग्रामर के रूप में आपको हमेशा बॉक्स के बाहर सोचना चाहिए और उन चीजों को आज़माना चाहिए जो किताब में नहीं हैं;)।

— लूसियन मिनिया

एंकर में कभी भी अन्य एंकर या फॉर्म-एक्शन तत्वों को लपेटें।

— रोको सी। बुल्जन

अहा, और ऐसा क्यों है?

— लूसियन मिनिया

आपको इसका उपयोग करना चाहिए <button type="button">...ताकि यह एक फंक्शन के रूप में डिफ़ॉल्ट रूप से सबमिट न हो

— स्टीफन आर

Answer 7

यदि आप एक आंतरिक फ़ॉर्म का उपयोग कर रहे हैं, तो बटन तत्व के साथ विशेषता प्रकार = "रीसेट" जोड़ें । यह प्रपत्र कार्रवाई को रोक देगा।

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

Comments

यदि आप चाहते हैं कि यह आपके फॉर्म को रीसेट कर दे। उपयोगtype="button"

— स्टीफन आर

Answer 8

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

Comments

@Robusto कि खाली जगह है कि वहाँ हुआ करता था के बारे में एक snarky टिप्पणी था :) यह है नहीं IMO एक अच्छा समाधान, के रूप में यह जावास्क्रिप्ट के बिना काम नहीं करेगा।

— पेक्का

@Pekka: हाँ, और यह भी अच्छी तरह से नहीं बनाया है एक्सएचटीएमएल

— शॉन पैट्रिक फ्लोयड

अगर फॉर्म का उपयोग कर रहे हैं तो केवल एक सबमिट का उपयोग करें, अगर ऑनक्लिक का उपयोग करके फॉर्म से परेशान क्यों हैं। -1

— निमचम्पस्की

यह अच्छी तरह से गठित HTML नहीं है। टैग में inputसमाप्त होने वाला टैग नहीं है।

— पीटर मोर्टेंसन

@PeterMortensen HTML कल्पना के अनुसार , inputतत्व एक शून्य तत्व है। इसमें एक प्रारंभ टैग होना चाहिए, लेकिन अंतिम टैग नहीं होना चाहिए।

— गप्पे

Answer 9

इस समस्या के तीन समाधान प्रतीत होते हैं (सभी पेशेवरों और विपक्षों के साथ)।

समाधान 1: एक फ़ॉर्म में बटन।

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

लेकिन इसके साथ समस्या यह है कि क्रोम, सफारी और इंटरनेट एक्सप्लोरर जैसे लोकप्रिय ब्राउज़रों के कुछ संस्करण में, यह URL के अंत में एक प्रश्न चिह्न चरित्र जोड़ता है। तो आपके URL के ऊपर वाले कोड के लिए दूसरे शब्दों में इस तरह देखना होगा:

http://someserver/pages2?

इसे ठीक करने का एक तरीका है, लेकिन इसके लिए सर्वर-साइड कॉन्फ़िगरेशन की आवश्यकता होगी। Apache Mod_rewrite का उपयोग करने वाला एक उदाहरण ?बिना उनके संबंधित URL के अनुगामी के साथ सभी अनुरोधों को पुनर्निर्देशित करना होगा ?। यहाँ .htaccess का उपयोग करके एक उदाहरण दिया गया है, लेकिन यहाँ एक पूर्ण सूत्र है :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

वेब कॉन्फ़िगरेशन और उपयोग किए गए स्टैक के आधार पर समान कॉन्फ़िगरेशन भिन्न हो सकते हैं। तो इस दृष्टिकोण का सारांश:

पेशेवरों:

1. यह एक वास्तविक बटन है, और शब्दार्थ यह समझ में आता है।
2. चूंकि यह एक वास्तविक बटन है, यह वास्तविक बटन की तरह भी काम करेगा (जैसे कि ड्रैग करने योग्य व्यवहार और / या सक्रिय होने पर स्पेस बार दबाने पर एक क्लिक की नकल)।
3. कोई जावास्क्रिप्ट, कोई जटिल शैली की आवश्यकता नहीं है।

विपक्ष:

1. ?कुछ ब्राउज़रों में ट्रेलिंग बदसूरत दिखती है। इसे जीईटी के बजाय POST का उपयोग करके एक हैक (कुछ मामलों में) द्वारा तय किया जा सकता है, लेकिन साफ ​​तरीका सर्वर-साइड पुनर्निर्देशित करना है। सर्वर साइड रीडायरेक्ट के साथ नकारात्मक पक्ष यह है कि यह 304 रीडायरेक्ट के कारण इन लिंक के लिए अतिरिक्त HTTP कॉल का कारण होगा।
2. अतिरिक्त <form>तत्व जोड़ता है
3. कई रूपों का उपयोग करते समय तत्व स्थिति पेचीदा हो सकती है और उत्तरदायी डिजाइनों के साथ काम करते समय और भी बदतर हो जाती है। कुछ लेआउट तत्वों के आदेश के आधार पर इस समाधान के साथ प्राप्त करना असंभव हो सकता है। यदि डिजाइन इस चुनौती से प्रभावित होता है, तो यह प्रयोज्य को प्रभावित कर सकता है।

समाधान 2: जावास्क्रिप्ट का उपयोग करना।

आप बटन का उपयोग करके लिंक के व्यवहार की नकल करने के लिए onclick और अन्य घटनाओं को ट्रिगर करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण को HTML से सुधार और हटाया जा सकता है, लेकिन यह केवल विचार को चित्रित करने के लिए है:

<button onclick="window.location.href='/page2'">Continue</button>

पेशेवरों:

1. सरल (बुनियादी आवश्यकता के लिए) और अतिरिक्त फॉर्म की आवश्यकता नहीं होने पर शब्दार्थ रखें।
2. चूंकि यह एक वास्तविक बटन है, यह वास्तविक बटन की तरह भी काम करेगा (जैसे कि ड्रैग करने योग्य व्यवहार और / या सक्रिय होने पर स्पेस बार दबाने पर एक क्लिक की नकल)।

विपक्ष:

1. जावास्क्रिप्ट की आवश्यकता है जिसका अर्थ है कम सुलभ। यह आधार (कोर) तत्व जैसे लिंक के लिए आदर्श नहीं है।

समाधान 3: एंकर (लिंक) एक बटन की तरह स्टाइल।

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

पेशेवरों:

1. सरल (बुनियादी आवश्यकता के लिए) और अच्छा क्रॉस-ब्राउज़र समर्थन।
2. <form>काम करने की जरूरत नहीं है ।
3. काम करने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है।

विपक्ष:

1. सिमेंटिक टूटी हुई तरह है, क्योंकि आप एक बटन चाहते हैं जो एक लिंक की तरह काम करता है न कि एक लिंक जो एक बटन की तरह काम करता है।
2. यह समाधान # 1 के सभी व्यवहारों को पुन: पेश नहीं करेगा। यह बटन के समान व्यवहार का समर्थन नहीं करेगा। उदाहरण के लिए, लिंक खींचे जाने पर अलग तरह से प्रतिक्रिया करते हैं। इसके अलावा "स्पेस बार" लिंक ट्रिगर कुछ अतिरिक्त जावास्क्रिप्ट कोड के बिना काम नहीं करेगा। यह बहुत सी जटिलता जोड़ देगा क्योंकि ब्राउज़र keypressबटन पर घटनाओं का समर्थन करने के तरीके के अनुरूप नहीं हैं।

निष्कर्ष

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

यदि जावास्क्रिप्ट आपकी पहुंच आवश्यकताओं के लिए बाधा नहीं है, तो समाधान # 2 ( जावास्क्रिप्ट ) # 1 और # 3 से अधिक पसंद किया जाएगा।

यदि किसी कारण से, पहुँच महत्वपूर्ण है (जावास्क्रिप्ट एक विकल्प नहीं है) लेकिन आप ऐसी स्थिति में हैं जहां आपका डिज़ाइन और / या आपका सर्वर कॉन्फ़िगरेशन आपको विकल्प # 1 का उपयोग करने से रोक रहा है, तो समाधान # 3 ( लंगर बटन की तरह स्टाइल ) एक अच्छा विकल्प है इस समस्या को न्यूनतम प्रयोज्य प्रभाव के साथ हल करें।

Answer 10

सिर्फ एक संदर्भ टैग के अंदर अपने बटन को क्यों न रखें उदा

<a href="https://www.google.com/"><button>Next</button></a>

यह मेरे लिए पूरी तरह से काम करता है और लिंक में कोई भी 20% टैग नहीं जोड़ता है, बस आप इसे कैसे चाहते हैं। मैंने प्रदर्शित करने के लिए Google की लिंक का उपयोग किया है।

आप बेशक इसे एक फॉर्म टैग में लपेट सकते हैं लेकिन यह आवश्यक नहीं है।

किसी अन्य स्थानीय फ़ाइल को लिंक करते समय इसे उसी फ़ोल्डर में डालें और संदर्भ के रूप में फ़ाइल का नाम जोड़ें। या फ़ाइल का स्थान निर्दिष्ट करें यदि उसी फ़ोल्डर में नहीं है।

<a href="myOtherFile"><button>Next</button></a>

यह URL के अंत में किसी भी वर्ण को नहीं जोड़ता है, हालाँकि इसमें फ़ाइल का पथ पथ है जैसा कि फ़ाइल के नाम के साथ समाप्त होने से पहले url है। जैसे

यदि मेरी परियोजना संरचना थी ...

.. एक फ़ोल्डर को दर्शाता है - एक फाइल को दर्शाता है जबकि चार | मूल निर्देशिका या फ़ाइल को पैरेंट फ़ोल्डर में दर्ज करें

..पब्लिक
||| .. html
||| |||| -main.html
|||| |||| -secondary.html

यदि मैं main.html खोलता हूँ तो URL होगा,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

हालाँकि, जब मैंने main.html में बदलने के लिए main.html के अंदर बटन पर क्लिक किया, तो URL होगा,

http://localhost:0000/public/html/secondary.html 

URL के अंत में कोई विशेष वर्ण शामिल नहीं है। आशा है कि ये आपकी मदद करेगा। वैसे - (% 20 एक URL में एक जगह को एनकोड करता है और उनके स्थान पर इनकोड किया गया है।)

नोट: लोकलहोस्ट: 0000 स्पष्ट रूप से 0000 नहीं होगा, आपके पास वहां अपना पोर्ट नंबर होगा।

इसके अलावा? _Ijt = xxxxxxxxxxxxxx main.html URL के अंत में, x आपके खुद के कनेक्शन से निर्धारित होता है, तो जाहिर है कि यह मेरे बराबर नहीं होगा।

ऐसा लग सकता है कि मैं कुछ मूल बिंदु बता रहा हूं, लेकिन मैं केवल उतना ही स्पष्ट करना चाहता हूं जितना मैं कर सकता हूं। पढ़ने के लिए धन्यवाद और मुझे उम्मीद है कि यह बहुत कम से कम किसी की मदद करेगा। खुश प्रोग्रामिंग।

Answer 11

आप तत्व के चारों ओर एक टैग लगा सकते हैं:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

Comments

नहीं, आप नहीं कर सकते। HTML <button>अंदर घोंसला बनाने से मना करता है <a>।

— क्वेंटिन

यह अनिवार्य रूप से वर्षों से इस उत्तर के समान है ।

— क्वेंटिन

अगर यह मना करता है तो यह काम क्यों करता है? :) कोई भी गंभीर डेवलपर W3C सत्यापनकर्ता की हर बात पर ध्यान नहीं देता ... फेसबुक या Google या किसी भी बड़ी वेबसाइट को वहां से गुजरने की कोशिश करें ... वेब किसी का इंतजार नहीं कर रहा है

— Uriahs Victor

@UriahsVictor यह आज काम कर सकता है, लेकिन एक दिन ब्राउज़र विक्रेता व्यवहार को बदलने का फैसला कर सकते हैं क्योंकि यह वैध नहीं है।

— जैकब अल्वारेज़

@UriahsVictor फ्लैश और जावा एप्लेट बहुत आम थे।

— जैकब अल्वारेज

Answer 12

ऐसा करने का एकमात्र तरीका (बालुस के सरल रूप विचार को छोड़कर!) onclickबटन में एक जावास्क्रिप्ट घटना जोड़कर है , जो पहुंच के लिए अच्छा नहीं है।

क्या आपने बटन की तरह एक सामान्य लिंक को स्टाइल माना है? आप उस तरह से ओएस विशिष्ट बटन प्राप्त नहीं कर सकते हैं, लेकिन यह अभी भी सबसे अच्छा तरीका है आईएमओ।

Comments

मुझे लगता है कि वह न केवल कार्यक्षमता (क्लिक) बल्कि उपस्थिति के बारे में बात कर रहा है।

@Web तर्क हाँ, इसलिए मैं बटन की तरह दिखने के लिए लिंक को स्टाइल करने की बात कर रहा हूं।

— पेक्का

@ChrisMarisic ऑनक्लिक का उपयोग करने के लिए कई डाउनसाइड हैं: यह जेएस बंद होने के साथ काम नहीं करता है; उपयोगकर्ता किसी नए टैब / विंडो में लिंक नहीं खोल सकता है, न ही लिंक को साझा करने के लिए उनके क्लिपबोर्ड में कॉपी कर सकता है; पार्सर्स और बॉट लिंक को पहचानने और उनका पालन करने में सक्षम नहीं होंगे; "प्रीफ़च" सुविधा वाले ब्राउज़र लिंक को पहचान नहीं पाएंगे; और बहुत सारे।

— पेका

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

— बजे क्रिस मैरिसिक

Answer 13

कुछ अन्य लोगों ने जो कुछ जोड़ा है, उसके साथ जा रहे हैं, तो आप बिना PHP, कोई jQuery कोड, बस सरल HTML और CSS के साथ एक साधारण सीएसएस वर्ग का उपयोग करके जंगली जा सकते हैं ।

CSS क्लास बनाएं और इसे अपने एंकर में जोड़ें। कोड नीचे है।

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

बस इतना ही। यह करना बहुत आसान है और आप जितना चाहें उतना रचनात्मक होने देंगे। आप रंग, आकार, आकार (त्रिज्या), आदि को नियंत्रित करते हैं। अधिक विवरण के लिए, उस साइट को देखें जिस पर मुझे यह मिला था ।

Answer 14

यदि आप किसी प्रपत्र या इनपुट का उपयोग करने से बचना चाहते हैं और आप एक बटन दिखने वाले लिंक की तलाश कर रहे हैं, तो आप एक दिव्य आवरण, एक लंगर और एक h1टैग के साथ अच्छे दिखने वाले बटन लिंक बना सकते हैं । आप संभवतः ऐसा चाहते हैं ताकि आप अपने पेज के चारों ओर लिंक-बटन को स्वतंत्र रूप से रख सकें। यह क्षैतिज रूप से केंद्रित बटन और उनके अंदर लंबवत केंद्रित पाठ रखने के लिए विशेष रूप से उपयोगी है। ऐसे:

आपके बटन में तीन नेस्टेड टुकड़े होंगे: एक डिव रैपर, एक लंगर और एक एच 1, जैसे:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

यहाँ एक jsField है इसे जाँचने और इसके साथ खेलने के लिए।

इस सेटअप के लाभ: 1. डिव रैपर को प्रदर्शित करना: ब्लॉक करना केंद्र (मार्जिन का उपयोग करते हुए: 0 ऑटो) और स्थिति को आसान बनाता है (जबकि <a> एक इनलाइन और सेंटर के लिए संभव नहीं है) के लिए कठिन है।

2. आप बस <a> प्रदर्शन: ब्लॉक कर सकते हैं, इसे चारों ओर ले जा सकते हैं, और इसे एक बटन के रूप में स्टाइल कर सकते हैं, लेकिन फिर इसके अंदर लंबवत संरेखण पाठ कठिन हो जाता है।

3. यह आपको <a> प्रदर्शन: इनलाइन-टेबल और <h1> डिस्प्ले: टेबल-सेल बनाने की अनुमति देता है, जो आपको ऊर्ध्वाधर-संरेखित: मध्य <h1> का उपयोग करने की अनुमति देता है और इसे केंद्र में खड़ी करता है (जो हमेशा अच्छा होता है) एक बटन)। हां, आप पैडिंग का उपयोग कर सकते हैं, लेकिन यदि आप चाहते हैं कि आपका बटन गतिशील रूप से आकार परिवर्तन करे, तो यह उतना साफ नहीं होगा।

4. कभी-कभी जब आप एक div के भीतर <a> एम्बेड करते हैं, तो केवल पाठ क्लिक करने योग्य होता है, यह सेटअप पूरे बटन को क्लिक करने योग्य बनाता है।

5. यदि आपको किसी अन्य पृष्ठ पर जाने का प्रयास कर रहे हैं तो आपको प्रपत्रों से निपटना नहीं है। फॉर्म इनपुट जानकारी के लिए हैं, और उन्हें उसी के लिए आरक्षित किया जाना चाहिए।

6. आप बटन स्टाइल और टेक्स्ट स्टाइल को एक-दूसरे से अलग करने की अनुमति देते हैं (स्ट्रेच बेनिफिट? ज़रूर, लेकिन सीएसएस नॉटी-लुकिंग हो सकता है इसलिए इसे विघटित करना अच्छा है)।

इसने निश्चित रूप से मेरे जीवन को चर-आकार स्क्रीन के लिए एक मोबाइल वेबसाइट स्टाइल करना आसान बना दिया।

Comments

आपको वास्तव में बिना किसी CSS के एक उचित बटन मिल जाएगा

— सोरेन

Answer 15

@ निकोलस, मेरे बाद आपके लिए काम किया क्योंकि आपके पास ऐसा नहीं था type="button"जिसके कारण यह सबमिट टाइप के रूप में व्यवहार करना शुरू कर दिया था..क्योंकि मेरे पास पहले से ही एक टाइप टाइप है। यह मेरे लिए काम नहीं किया .... और अब आप या तो क्लास जोड़ सकते हैं। बटन या <a>आवश्यक लेआउट प्राप्त करने के लिए:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

Answer 16

एक अन्य विकल्प बटन में एक लिंक बनाना है:

<button type="button"><a href="yourlink.com">Link link</a></button>

फिर लिंक और बटन को स्टाइल करने के लिए CSS का उपयोग करें, ताकि लिंक बटन के भीतर पूरी जगह ले ले (ताकि उपयोगकर्ता द्वारा कोई मिस-क्लिक न हो):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

मैंने यहां एक डेमो बनाया है ।

Comments

ध्यान रखें कि युक्ति कहती है कि यह मान्य नहीं है क्योंकि बटन में किसी भी इंटरैक्टिव वंशज नहीं होना चाहिए। w3.org/TR/2011/WD-html5-20110525/the-button-element.html

— lukeocom

आप दोनों सही हैं। VS2015 इसे एक चेतावनी के साथ चिह्नित करता है: "तत्व 'ए' तत्व 'बटन के अंदर नेस्टेड नहीं किया जा सकता", लेकिन इसके साथ काम करता है: वर्तमान में IE11, एज, क्रोम, फ़ायरफ़ॉक्स, सफारी और कम से कम कुछ (शायद सभी) मोबाइल ब्राउज़र। इसलिए इस तकनीक का उपयोग न करें लेकिन यदि आपने अतीत में किया था, तो यह अब के लिए काम करता है;)

— Zeek2

Answer 17

यदि आप एक ऐसा बटन बनाना चाहते हैं जो URL के लिए कहीं भी उपयोग किया जाता है, तो एक एंकर के लिए एक बटन वर्ग बनाएं।

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

Answer 18

मुझे पता है कि वहाँ बहुत सारे उत्तर प्रस्तुत किए गए हैं, लेकिन उनमें से कोई भी समस्या को वास्तव में महसूस नहीं करता है। यहाँ एक समाधान पर मेरी ले है:

1. <form method="get">ओपी के साथ शुरू होने वाले तरीके का उपयोग करें । यह वास्तव में अच्छी तरह से काम करता है, लेकिन यह कभी-कभी ?URL को जोड़ता है । ?मुख्य समस्या है।
2. जावास्क्रिप्ट सक्षम होने के बाद लिंक को करने के लिए jQuery / जावास्क्रिप्ट का उपयोग करें ताकि ?URL पर समाप्त न हो। यह <form>उन उपयोगकर्ताओं के बहुत छोटे अंश के लिए विधि में मूल रूप से कमबैक करेगा जिनके पास जावास्क्रिप्ट सक्षम नहीं है।
3. जावास्क्रिप्ट कोड ईवेंट प्रतिनिधिमंडल का उपयोग करता है ताकि आप ईवेंट श्रोता को पहले <form>या <button>यहां तक ​​कि मौजूद कर सकें । मैं इस उदाहरण में jQuery का उपयोग कर रहा हूं, क्योंकि यह त्वरित और आसान है, लेकिन यह 'वेनिला' जावास्क्रिप्ट में भी किया जा सकता है।
4. जावास्क्रिप्ट कोड डिफ़ॉल्ट कार्रवाई को होने से रोकता है और फिर <form> actionविशेषता में दिए गए लिंक का अनुसरण करता है ।

JSBin उदाहरण (कोड स्निपेट लिंक का अनुसरण नहीं कर सकता)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

Answer 19

ऐसा करने के 7 तरीके:

1. का उपयोग करते हुए window.location.href = 'URL'
2. का उपयोग करते हुए window.location.replace('URL')
3. का उपयोग करते हुए window.location = 'URL'
4. का उपयोग करते हुए window.open('URL')
5. का उपयोग करते हुए window.location.assign('URL')
6. HTML फॉर्म का उपयोग करना
7. HTML एंकर टैग का उपयोग करना

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Answer 20

HTML 5 और स्टाइल बैकग्राउंड के साथ-साथ इमेज बैकग्राउंड के लिए

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

Comments

मान्य नहीं करता है। Validator.w3.org/nu/#textarea में चिपकाना त्रुटि

— मार्क अमेरी

Answer 21

इसके अलावा आप एक बटन का उपयोग कर सकते हैं:

उदाहरण के लिए, ASP.NET कोर सिंटैक्स में :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

Answer 22

यदि आप SSL प्रमाणपत्र का उपयोग कर रहे हैं

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Answer 23

जिन लोगों ने <a></a>विशेषताओं का उपयोग करके उत्तर दिया है <button></button>वे सहायक थे।

लेकिन हाल ही में, मुझे एक समस्या का सामना करना पड़ा जब मैंने एक के अंदर एक लिंक का उपयोग किया <form></form>।

बटन को अब सबमिट बटन (HTML5) की तरह माना जाता है। मैंने चारों ओर एक तरह से काम करने की कोशिश की है, और इस विधि को पाया है।

नीचे की तरह सीएसएस स्टाइल बटन बनाएं:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

या यहां एक नया बनाएं: सीएसएस बटन जेनरेटर

और फिर आपके द्वारा बनाए गए CSS शैली के नाम से एक वर्ग टैग के साथ अपना लिंक बनाएं :

<a href='link.php' class='btn-style'>Link</a>

यहाँ एक बेला है:

जेएस फिडल

Comments

बटन प्रकार = "बटन" सेट करें, जो आपको फॉर्म सबमिट किए बिना इसे क्लिक करने की अनुमति देगा।

— ब्लेक ए। निकोल्स

Answer 24

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

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

कार्य JSFiddle यहाँ ।

Answer 25

आप बटन भी सेट कर सकते हैं type-property को "बटन" पर (यह इसे फ़ॉर्म सबमिट नहीं करता है), और फिर इसे एक लिंक के अंदर घोंसला करें (यह उपयोगकर्ता को पुनर्निर्देशित करता है)।

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

उदाहरण:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

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

यह सुनिश्चित करने के लिए सावधान रहें कि बटन किसी भी कार्रवाई को ट्रिगर नहीं करता है, क्योंकि इससे संघर्ष होगा। जैसा कि एरियस ने कहा, आपको ज्ञात होना चाहिए कि, उपरोक्त कारण से, यह मानक के अनुसार कड़ाई से मान्य HTML नहीं बोल रहा है। हालाँकि यह फ़ायरफ़ॉक्स और क्रोम में अपेक्षित रूप से काम करता है, लेकिन मैंने अभी तक इसे इंटरनेट एक्सप्लोरर के लिए परीक्षण नहीं किया है।

Comments

तत्व 'बटन' को 'ए' तत्व के भीतर नेस्ट नहीं किया जा सकता है।

— एरियस

मानक संख्या के अनुसार, लेकिन मेरे अनुभव में यह ठीक काम करता है। क्रॉस-ब्राउज़र ने इसे अभी तक बड़े पैमाने पर परीक्षण नहीं किया है, लेकिन कम से कम एफएफ और क्रोम इसे उचित व्यवहार के साथ ठीक से संभालते हैं।

— एंडर्स मार्टिनी

एरियस: थोड़ा ऊपर पढ़ें, कुछ और प्रयोग किए, और पाया कि एक बटन तत्व वास्तव में एक <a> तत्व के अंदर नेस्टेड हो सकता है, जब तक कि बटन तत्व का अपना एक्शन लागू नहीं होता है (तब से जाहिर तौर पर परिणाम होगा संघर्ष - ब्राउज़र किस क्रिया को करेगा? बटन या <a> का बटन?) लेकिन जब तक आप यह सुनिश्चित कर लेते हैं कि बटन-तत्व स्वयं एक बार क्लिक किए जाने के बाद किसी भी कार्रवाई को ट्रिगर नहीं करता है, यह ठीक काम करना चाहिए (संभवत: ' टी को हालांकि एक सर्वश्रेष्ठ अभ्यास माना जाता है)

— एंडर्स मार्टिनी

यह संभावना के बारे में नहीं है। यह सिर्फ HTML5 विनिर्देश के खिलाफ है और यह सब है।

— एरियस

Answer 26

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

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

http://www.google.comअपनी वेबसाइट से बदलें , http://URL से पहले शामिल करना सुनिश्चित करें।

Answer 27

जावास्क्रिप्ट में

setLocation(base: string) {
  window.location.href = base;
}

HTML में

<button onclick="setLocation('/<whatever>')>GO</button>"

Answer 28

अपने ब्राउज़र कंसोल में टाइप करें window.locationऔर दबाएँ enter। फिर आप स्पष्ट विचार प्राप्त कर सकते हैं कि locationइसमें क्या शामिल है

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

आप यहां से कोई भी मूल्य निर्धारित कर सकते हैं।

इसलिए एक अन्य पृष्ठ के लिए आप hrefअपने लिंक के साथ मूल्य निर्धारित कर सकते हैं ।

   window.location.href = your link

आपके मामले में-

   <button onclick="window.location.href='www.google.com'">Google</button>

Answer 29

यदि आपको जरूरत है कि यह एक बटन की तरह दिखेगा, तो ढाल छवि पर जोर देने के साथ , आप यह कर सकते हैं:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

Answer 30

यदि आप उन पृष्ठों के लिए पुनर्निर्देशित करना चाहते हैं, जो आपकी वेबसाइट के भीतर रहते हैं, तो फिर यहाँ मेरा तरीका है - मैंने बटन में विशेषता href जोड़ दिया है , और onclick को असाइन किया है ।getAttribute ('href') document.location.href को

** यदि आप 'एक्स-फ्रेम-ऑप्शंस' के 'यूरोरिजिन' के कारण अपने डोमेन के यूट्रस के लिए संदर्भ लेते हैं तो यह काम नहीं करेगा।

नमूना कोड:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>