සබැඳියක් ලෙස ක්‍රියා කරන HTML බොත්තමක් නිර්මාණය කරන්නේ කෙසේද?

සබැඳියක් මෙන් ක්‍රියා කරන HTML බොත්තමක් සෑදීමට මම කැමතියි. එබැවින්, ඔබ බොත්තම ක්ලික් කළ විට, එය පිටුවකට හරවා යවයි. එය හැකි තරම් ප්‍රවේශ විය හැකි ලෙස මම කැමතියි.

URL හි අමතර අක්ෂර හෝ පරාමිතීන් නොමැති බැවින් මම එයට කැමතියි.

මට මෙය සාක්ෂාත් කරගත හැක්කේ කෙසේද?

මෙතෙක් පළ කර ඇති පිළිතුරු මත පදනම්ව, මම දැනට මෙය කරන්නේ:

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

නමුත් මෙහි ඇති ගැටළුව වන්නේ සෆාරි සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ය හි එය URL හි අවසානයට ප්‍රශ්නාර්ථ ලක්‍ෂණයක් එක් කිරීමයි. URL හි අවසානයට කිසිදු අක්ෂර එකතු නොකරන විසඳුමක් සොයා ගැනීමට මට අවශ්‍යය.

මෙය කිරීමට තවත් විසඳුම් දෙකක් තිබේ: ජාවාස්ක්‍රිප්ට් භාවිතා කිරීම හෝ බොත්තමක් මෙන් පෙනෙන පරිදි සබැඳියක් සැකසීම.

JavaScript භාවිතා කිරීම:

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

නමුත් මෙය පැහැදිලිවම ජාවාස්ක්‍රිප්ට් අවශ්‍ය වන අතර එම හේතුව නිසා එය තිර පා .කයන්ට ප්‍රවේශ විය නොහැක. සබැඳියක කාරණය වන්නේ වෙනත් පිටුවකට යාමයි. එබැවින් බොත්තමක් සබැඳියක් ලෙස ක්‍රියා කිරීමට උත්සාහ කිරීම වැරදි විසඳුමකි. මගේ යෝජනාව නම්, ඔබ සබැඳියක් භාවිතා කර බොත්තමක් මෙන් එය මෝස්තර කළ යුතුය .

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

HTML

සරල HTML ක්‍රමය නම් <form>, ඔබ අපේක්ෂිත ඉලක්කගත URL එක actionගුණාංගයේ සඳහන් කර ඇති තැනක තැබීමයි .

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

අවශ්ය නම්, display: inline;අවට පෙළ සමඟ ප්රවාහයේ තබා ගැනීමට පෝරමය මත CSS සකසන්න . <input type="submit">ඉහත උදාහරණය වෙනුවට ඔබට භාවිතා කළ හැකිය <button type="submit">. එකම වෙනස වන්නේ <button>මූලද්රව්යය දරුවන්ට ඉඩ දීමයි.

මූලද්රව්යය <button href="https://google.com">හා සමානකම් භාවිතා කිරීමට ඔබට සිතාමතාම අපේක්ෂා කළ හැකි <a>නමුත් අවාසනාවකට මෙන්, මෙම ගුණාංගය HTML පිරිවිතරයන්ට අනුව නොපවතී .

CSS

CSS සඳහා අවසර දී ඇත්නම් <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;
}

නැතහොත් බූට්ස්ට්‍රැප් වැනි බොහෝ CSS පුස්තකාලවලින් එකක් තෝරන්න .

<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>මූලද්රව්යය දරුවන්ට ඉඩ දීමයි.

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

type="button"ගුණාංගය වැදගත් බව සලකන්න , එහි නැතිවූ අගය පෙරනිමිය ඉදිරිපත් කරන්න බොත්තම් තත්වය බැවින් .

මූලික 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) නියැදි පෙනුම:

භාවිත:

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

අවාසනාවකට මෙන්, මෙම සලකුණු කිරීම HTML5 හි තවදුරටත් වලංගු නොවන අතර එය වලංගු හෝ සෑම විටම අපේක්ෂා කළ පරිදි ක්‍රියා නොකරනු ඇත. වෙනත් ප්‍රවේශයක් භාවිතා කරන්න.

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 බ්‍රව්සර සහාය: https://developer.mozilla.org/en-US/docs/Web/ HTML / මූලද්‍රව්‍යය / බොත්තම # බ්‍රව්සර_ අනුකූලතාව

එය ඇත්ත වශයෙන්ම ඉතා සරල වන අතර කිසිදු ආකාරයක මූලද්‍රව්‍යයක් භාවිතා නොකර. ඔබට ඇතුළත බොත්තමක් සහිත <a> ටැගය භාවිතා කළ හැකිය :).

මෙවැනි:

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

තවද එය එකම පිටුවකට href පටවනු ඇත. නව පිටුවක් අවශ්‍යද? භාවිතා කරන්න target="_blank".

සංස්කරණය කරන්න

අවුරුදු කිහිපයකට පසු, මගේ විසඳුම තවමත් ක්‍රියාත්මක වන අතර, ඔබට අවශ්‍ය ඕනෑම දෙයක් පෙනීම ලබා දීම සඳහා ඔබට CSS විශාල ප්‍රමාණයක් භාවිතා කළ හැකි බව මතක තබා ගන්න. මෙය වේගවත් ක්‍රමයක් පමණි.

ඔබ අභ්‍යන්තර පෝරමයක් භාවිතා කරන්නේ නම් , බොත්තම් මූලද්‍රව්‍යය සමඟ = = යළි පිහිටුවීම ” යන ගුණාංගය එක් කරන්න . එය ආකෘති ක්‍රියාව වළක්වනු ඇත.

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

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

මෙම ගැටලුවට විසඳුම් තුනක් ඇති බව පෙනේ (සියල්ලම වාසි සහ අවාසි සහිතව).

විසඳුම 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. පසුපස ? සමහර බ්රවුසර කැත බලයි. GET වෙනුවට POST භාවිතා කරමින් (සමහර අවස්ථාවල) මෙය හැක් මගින් නිවැරදි කළ හැකි නමුත් පිරිසිදු ක්‍රමය වන්නේ සේවාදායක පාර්ශව යළි හරවා යැවීමයි. සේවාදායකයේ යළි-යොමුවීම් සමඟ ඇති අවාසිය නම්, 304 යළි-යොමුවීම් නිසා මෙම සබැඳි සඳහා අමතර HTTP ඇමතුමක් ලැබෙනු ඇත.
2. අමතර <form>අංගයක් එක් කරයි
3. බහු ආකෘති භාවිතා කරන විට මූලද්‍රව්‍ය ස්ථානගත කිරීම උපක්‍රමශීලී විය හැකි අතර ප්‍රතිචාරාත්මක සැලසුම් සමඟ කටයුතු කිරීමේදී වඩාත් නරක අතට හැරේ. මූලද්රව්යවල අනුපිළිවෙල අනුව මෙම විසඳුම සමඟ සමහර පිරිසැලසුම සාක්ෂාත් කරගත නොහැකිය. මෙම අභියෝගයෙන් සැලසුමට බලපෑම් ඇති වුවහොත් මෙය භාවිතයට බලපානු ඇත.

විසඳුම 2: ජාවාස්ක්‍රිප්ට් භාවිතා කිරීම.

බොත්තමක් භාවිතයෙන් සබැඳියක හැසිරීම අනුකරණය කිරීමට ඔබට ඔන්ක්ලික් සහ වෙනත් සිදුවීම් අවුලුවාලීමට ජාවාස්ක්‍රිප්ට් භාවිතා කළ හැකිය. පහත උදාහරණය 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 ( ඇන්කර් බොත්තමක් වැනි මෝස්තරයක් ) හොඳ විකල්පයක් වන්නේ අවම උපයෝගීතා බලපෑමකින් මෙම ගැටළුව විසඳීමයි.

ඔබේ බොත්තම යොමු ටැගයක් තුළ පමණක් තැබිය නොහැක්කේ ඇයි

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

මෙය මට හොඳින් ක්‍රියාත්මක වන බව පෙනේ, ඔබට අවශ්‍ය ආකාරයට% 20 ටැග් සබැඳියට එක් නොකරයි. නිරූපණය කිරීම සඳහා මම ගූගල් වෙත සබැඳියක් භාවිතා කර ඇත.

ඔබට මෙය පෝරම ටැගයකින් ඔතා ගත හැකි නමුත් එය අවශ්‍ය නොවේ.

වෙනත් දේශීය ගොනුවක් සම්බන්ධ කරන විට එය එකම ෆෝල්ඩරයට දමා ගොනුවේ නම යොමුව ලෙස එක් කරන්න. හෝ එකම ෆෝල්ඩරයේ නොමැති නම් ගොනුවේ පිහිටීම සඳහන් කරන්න.

<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

කෙසේ වෙතත්, ද්විතීයික. Html වෙත වෙනස් කිරීම සඳහා මම main.html තුළ ඇති බොත්තම ක්ලික් කළ විට, URL එක වනුයේ,

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

URL අවසානයේ විශේෂ අක්ෂර කිසිවක් ඇතුළත් නොවේ. මම හිතනවා මේක උදව් වෙයි කියලා. මාර්ගය වන විට - (% 20 මඟින් URL එකක ඇති ඉඩක් එහි කේතනය කර ඒවා වෙනුවට ඇතුළත් කර ඇත.)

සටහන: localhost: 0000 පැහැදිලිවම 0000 නොවනු ඇත ඔබට එහි ඔබේම වරාය අංකය ඇත.

තවද, main.html URL එකෙන් අවසානයේ?

මම ඇත්ත වශයෙන්ම මූලික කරුණු කිහිපයක් ප්‍රකාශ කරන බවක් පෙනෙන්නට තිබුණත් මට අවශ්‍ය වන්නේ මට හැකි උපරිමයෙන් පැහැදිලි කිරීමට ය. කියවීමට ස්තූතියි, මෙය අවම වශයෙන් යමෙකුට උපකාර කරනු ඇතැයි මම බලාපොරොත්තු වෙමි. සතුටු වැඩසටහන්කරණය.

ඔබට මූලද්රව්යය වටා ටැගයක් තැබිය හැකිය:

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

https://jsfiddle.net/hj6gob8b/

මෙය කළ හැකි එකම ක්‍රමය (බලුස්සී හි සූක්ෂම ආකෘති අදහස හැර!) onclickබොත්තමට ජාවාස්ක්‍රිප්ට් සිදුවීමක් එක් කිරීම පමණි, එය ප්‍රවේශ වීමට හොඳ නැත.

බොත්තමක් වැනි සාමාන්‍ය සබැඳියක් සැකසීමට ඔබ සිතුවාද? ඔබට OS විශේෂිත බොත්තම් ඒ ආකාරයෙන් සාක්ෂාත් කරගත නොහැක, නමුත් එය තවමත් IMO හි හොඳම ක්‍රමයයි.

තවත් කිහිප දෙනෙකු එකතු කර ඇති දේ සමඟ යමින්, ඔබට PHP නොමැති සරල CSS පන්තියක්, 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>

එය එයයි. එය කිරීම ඉතා පහසු වන අතර ඔබට අවශ්‍ය තරම් නිර්මාණශීලී වීමට ඉඩ සලසයි. ඔබ වර්ණ, ප්‍රමාණය, හැඩයන් (අරය) යනාදිය පාලනය කරයි. වැඩි විස්තර සඳහා, මම මෙය සොයාගත් වෙබ් අඩවිය බලන්න .

ඔබට පෝරමයක් හෝ ආදානයක් භාවිතා කිරීමෙන් වැළකී සිටීමට අවශ්‍ය නම් සහ ඔබ බොත්තම් පෙනුමක් ඇති සබැඳියක් සොයන්නේ නම්, ඔබට ඩිවර් එතුම, නැංගුරම සහ 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>

මෙතන ඇති jsFiddle එය පරීක්ෂා කර බලන්න හා ඒ සමග පාරමිතාවක්.

මෙම සැකසුමෙහි වාසි: 1. ඩිව් එතීමේ සංදර්ශකය සෑදීම: බ්ලොක් කිරීම කේන්ද්‍රගත කිරීම පහසු කරයි (ආන්තිකය: 0 ස්වයංක්‍රීයව භාවිතා කිරීම) සහ පිහිටීම (<a> පේළිගත කර ඇති අතර ස්ථානගත කිරීමට අපහසු වන අතර කේන්ද්‍රගත වීමට නොහැකි වේ).

2. ඔබට <a> සංදර්ශකය: අවහිර කරන්න, එය වටා ගෙන ගොස් බොත්තමක් ලෙස හැඩගස්වන්න, නමුත් එහි ඇතුළත සිරස් අතට පෙළගැස්වීම දුෂ්කර වේ.

3. මෙය ඔබට <a> display: inline-table සහ <h1> display: table-cell සෑදීමට ඉඩ සලසයි, එමඟින් සිරස්-පෙළගැස්වීම භාවිතා කිරීමට ඉඩ සලසයි: <h1> මැද හා සිරස් අතට කේන්ද්‍රගත කරන්න (එය සැමවිටම හොඳයි බොත්තමක්). ඔව්, ඔබට පෑඩින් භාවිතා කළ හැකිය, නමුත් ඔබේ බොත්තම ගතිකව ප්‍රමාණය වෙනස් කිරීමට ඔබට අවශ්‍ය නම් එය එතරම් පිරිසිදු නොවේ.

4. සමහර විට ඔබ ඩිව් එකක් තුළ <a> කාවැද්දූ විට, පෙළ පමණක් ක්ලික් කළ හැකිය, මෙම සැකසුම මඟින් මුළු බොත්තම ක්ලික් කළ හැකිය.

5. ඔබ වෙනත් පිටුවකට යාමට උත්සාහ කරන්නේ නම් ඔබට පෝරම සමඟ ගනුදෙනු කිරීමට අවශ්‍ය නැත. පෝරම යනු තොරතුරු ඇතුළත් කිරීම සඳහා වන අතර ඒවා ඒ සඳහා වෙන් කළ යුතුය.

6. එකිනෙකාගෙන් බොත්තම් මෝස්තර සහ පෙළ මෝස්තරය පිරිසිදුව වෙන් කිරීමට ඔබට ඉඩ සලසයි (වාසිය දිගු කරන්න? ෂුවර්, නමුත් CSS හට අප්රසන්න පෙනුමක් ලබා ගත හැකි බැවින් එය දිරාපත් වීම සතුටක්).

විචල්‍ය ප්‍රමාණයේ තිර සඳහා ජංගම වෙබ් අඩවියක් සැකසීම නිසැකවම මගේ ජීවිතය පහසු කරවයි.

@ නිකොලස්, පහත දැක්වෙන දේ මා වෙනුවෙන් වැඩ කර type="button"ඇති අතර එය ඔබ සතුව නැති නිසා එය ඉදිරිපත් කිරීමේ වර්ගය ලෙස හැසිරීමට පටන් ගෙන ඇත .. මට දැනටමත් එක් ඉදිරිපත් කිරීමේ වර්ගයක් ඇති බැවින් එය මා වෙනුවෙන් වැඩ නොකළේය .... දැන් ඔබට පන්තිය එක් කළ හැකිය බොත්තමට හෝ <a>අවශ්‍ය පිරිසැලසුම ලබා ගැනීමට:

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

තවත් විකල්පයක් වන්නේ බොත්තම තුළ සබැඳියක් නිර්මාණය කිරීමයි:

<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;}

මම මෙහි නිරූපණයක් නිර්මාණය කර ඇත්තෙමි .

එය කළ හැකි ක්‍රම 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>

ඔබට ඕනෑම තැනක 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;
}

පිළිතුරු විශාල ප්‍රමාණයක් ඉදිරිපත් කර ඇති බව මම දනිමි, නමුත් ඒ කිසිවක් ඇත්ත වශයෙන්ම ගැටලුව විසඳන බවක් නොපෙනුණි. මෙන්න මම විසඳුමක් ගන්නවා:

1. <form method="get">OP ආරම්භ කරන ක්‍රමය භාවිතා කරන්න . මෙය ඉතා හොඳින් ක්‍රියාත්මක වේ, නමුත් සමහර විට එය ?URL වෙත එකතු කරයි. මෙම ?ප්රධාන ප්රශ්නය.
2. ජාවාස්ක්‍රිප්ට් සක්‍රිය කර ඇති විට පහත සබැඳිය සිදු කිරීමට jQuery / JavaScript භාවිතා කරන්න, ?එමඟින් 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>

රූප පසුබිම සමඟ 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>

ඔබට බොත්තමක් භාවිතා කළ හැකිය:

උදාහරණයක් ලෙස, ASP.NET Core syntax හි :

// 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>

ඔබ SSL සහතිකය භාවිතා කරන්නේ නම්

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

<a></a>A <button></button>හි ගුණාංග භාවිතා කර පිළිතුරු දුන් පුද්ගලයින් ප්‍රයෝජනවත් විය.

නමුත් මෑතකදී, a තුළ සබැඳියක් භාවිතා කරන විට මට ගැටලුවක් ඇතිවිය<form></form> .

බොත්තම දැන් ඉදිරිපත් කිරීමේ බොත්තමක් (HTML5) ලෙස සලකනු ලැබේ. මම යම් ආකාරයකින් වැඩ කිරීමට උත්සාහ කර ඇති අතර මෙම ක්‍රමය සොයාගෙන ඇත.

පහත දැක්වෙන ආකාරයට CSS විලාසිතාවේ බොත්තමක් සාදන්න:

.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 බොත්තම් උත්පාදක යන්ත්රය

ඉන්පසු ඔබ විසින් සාදන ලද CSS ශෛලියට අනුව පන්ති ටැගයක් සමඟ ඔබේ සබැඳිය සාදන්න :

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

මෙන්න ප්‍රහේලිකාවක්:

ජේ.එස්

මම මෙය දැනට වැඩ කරන වෙබ් අඩවියක් සඳහා භාවිතා කළ අතර එය විශිෂ්ට ලෙස ක්‍රියා කරයි! ඔබට සිසිල් මෝස්තරයක් අවශ්‍ය නම් මම CSS මෙහි තබමි.

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 මෙතන .

ඔබට බොත්තම් 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 ලෙස නොසලකන බව ඔබ දැන සිටිය යුතුය. කෙසේ වෙතත් එය ෆයර්ෆොක්ස් සහ ක්‍රෝම් හි අපේක්ෂා කළ පරිදි ක්‍රියා කරයි, නමුත් මම එය තවමත් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා අත්හදා බලා නොමැත.

ඔබට javascript භාවිතා කළ හැකිය:

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

</html>

http://www.google.comඔබේ වෙබ් අඩවිය සමඟ ප්‍රතිස්ථාපනය කරන්න, http://URL එකට ඇතුළත් කිරීමට වග බලා ගන්න .

JavaScript හි

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

HTML හි

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

ඔබගේ බ්‍රව්සර් කොන්සෝලය තුළ ටයිප් 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>

ඔබට අවශ්‍ය වන්නේ එය බොත්තමක් මෙන් පෙනේ නම්, ශ්‍රේණියේ රූපය අවධාරණය කරමින් ඔබට මෙය කළ හැකිය:

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

ඔබේ වෙබ් අඩවිය තුළ ඇති පිටු සඳහා නැවත හරවා යැවීමට ඔබට අවශ්‍ය නම්, මෙන්න මගේ ක්‍රමය - මම බොත්තමට href ගුණාංගය එකතු කර ඇති අතර ඔන්ක්ලික් විසින් මෙය පවරා ඇත .getAttribute ('href') document.location.href කිරීමට

** 'X-Frame-Options' 'sameorigin' නිසා ඔබගේ වසමෙන් පිටත යූආර්එල් සඳහා යොමු කළහොත් එය ක්‍රියා නොකරනු ඇත.

නියැදි කේතය:

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