Hoe maak je een HTML-knop die werkt als een link

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

Antwoord 6, autoriteit 3%

Het is eigenlijk heel eenvoudig en zonder enige vormelementen te gebruiken. Je kunt gewoon de <a>-tag gebruiken met een knop erin :).

Zoals dit:

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

En het zal de href op dezelfde pagina laden. Wil je een nieuwe pagina? Gebruik gewoon target="_blank".

BEWERKEN

Een paar jaar later, terwijl mijn oplossing nog steeds werkt, moet u er rekening mee houden dat u veel CSS kunt gebruiken om het eruit te laten zien zoals u wilt. Dit was gewoon een snelle manier.

Antwoord 7, autoriteit 2%

Als je een inside-formulier gebruikt, voeg dan het attribuut type=”reset” toe samen met het button-element. Het voorkomt de formulieractie.

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

Antwoord 8

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

Antwoord 9

Er lijken drie oplossingen voor dit probleem te zijn (allemaal met voor- en nadelen).

Oplossing 1: knop in een formulier.

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

Het probleem hiermee is echter dat in sommige versies van populaire browsers, zoals Chrome, Safari en Internet Explorer, een vraagteken aan het einde van de URL wordt toegevoegd. Met andere woorden, voor de bovenstaande code ziet uw URL er uiteindelijk als volgt uit:

http://someserver/pages2?

Er is een manier om dit op te lossen, maar hiervoor is configuratie aan de serverzijde vereist. Een voorbeeld van het gebruik van Apache Mod_rewrite zou zijn om alle verzoeken met een afsluitende ? om te leiden naar hun corresponderende URL zonder de ?. Hier is een voorbeeld van het gebruik van .htaccess, maar er is hier een volledige thread:

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

Vergelijkbare configuraties kunnen variëren, afhankelijk van de gebruikte webserver en stack. Dus een samenvatting van deze aanpak:

Pluspunten:

1. Dit is een echte knop, en semantisch is het logisch.
2. Omdat het een echte knop is, zal het ook werken als een echte knop (bijv. versleepbaar gedrag en/of een klik nabootsen wanneer je op de spatiebalk drukt wanneer deze actief is).
3. Geen JavaScript, geen complexe stijl vereist.

Nadelen:

1. Trailing ? ziet er in sommige browsers lelijk uit. Dit kan worden opgelost door een hack (in sommige gevallen) met POST in plaats van GET, maar de schone manier is om een ​​server-side redirect te hebben. Het nadeel van de server-side omleiding is dat het een extra HTTP-aanroep voor deze links veroorzaakt vanwege de 304-omleiding.
2. Voegt extra <form> element toe
3. De positionering van elementen bij het gebruik van meerdere formulieren kan lastig zijn en wordt nog erger bij responsieve ontwerpen. Een bepaalde lay-out kan met deze oplossing onmogelijk worden, afhankelijk van de volgorde van de elementen. Dit kan van invloed zijn op de bruikbaarheid als het ontwerp wordt beïnvloed door deze uitdaging.

Oplossing 2: JavaScript gebruiken.

U kunt JavaScript gebruiken om onclick en andere gebeurtenissen te activeren om het gedrag van een link met een knop na te bootsen. Het onderstaande voorbeeld kan worden verbeterd en uit de HTML worden verwijderd, maar het is er alleen om het idee te illustreren:

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

Pluspunten:

1. Eenvoudig (voor basisvereiste) en semantisch behouden zonder dat er een extra formulier nodig is.
2. Omdat het een echte knop is, zal het ook werken als een echte knop (bijv. versleepbaar gedrag en/of een klik nabootsen wanneer je op de spatiebalk drukt wanneer deze actief is).

Nadelen:

1. Vereist JavaScript, wat betekent dat het minder toegankelijk is. Dit is niet ideaal voor een basis (kern)element zoals een link.

Oplossing 3: Anker (link) in de vorm van een knop.

Een link stylen als een knop is relatief eenvoudig en kan een vergelijkbare ervaring bieden in verschillende browsers. Bootstrap doet dit, maar het is ook gemakkelijk zelf te doen met eenvoudige stijlen.

Pluspunten:

1. Eenvoudig (voor basisvereiste) en goede ondersteuning voor meerdere browsers.
2. Heeft geen <form> nodig om te werken.
3. Heeft geen JavaScript nodig om te werken.

Nadelen:

1. Semantiek is een beetje kapot, omdat je een knop wilt die als een link werkt en niet een link die als een knop werkt.
2. Het zal niet alle gedragingen van oplossing #1 reproduceren. Het ondersteunt niet hetzelfde gedrag als de knop. Links reageren bijvoorbeeld anders wanneer ze worden gesleept. Ook de "spatiebalk" link trigger werkt niet zonder wat extra JavaScript-code. Het zal veel complexiteit toevoegen omdat browsers niet consistent zijn over hoe ze keypress-gebeurtenissen op knoppen ondersteunen.

Conclusie

Oplossing #1 (Knop in een formulier) lijkt de meest transparante voor gebruikers met een minimum aan werk. Als uw lay-out niet wordt beïnvloed door deze keuze en de aanpassing aan de serverzijde haalbaar is, is dit een goede optie voor gevallen waarin toegankelijkheid de hoogste prioriteit heeft (bijvoorbeeld links op een foutpagina of foutmeldingen).

Als JavaScript geen belemmering vormt voor uw toegankelijkheidsvereisten, heeft oplossing #2 (JavaScript) de voorkeur boven #1 en #3.

Als toegankelijkheid om de een of andere reden van vitaal belang is (JavaScript is geen optie), maar u zich in een situatie bevindt waarin uw ontwerp en/of uw serverconfiguratie u verhindert om optie #1 te gebruiken, dan is oplossing #3 ( Anker in de vorm van een knop) is een goed alternatief om dit probleem op te lossen met een minimale impact op de bruikbaarheid.

Antwoord 10

Plaats uw knop gewoon in een referentietag, bijvoorbeeld

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

Dit lijkt perfect te werken voor mij en voegt geen %20 tags toe aan de link, precies zoals jij het wilt. Ik heb een link naar Google gebruikt om te demonstreren.

U kunt dit natuurlijk in een formuliertag plaatsen, maar dat is niet nodig.

Als je een ander lokaal bestand koppelt, plaats het dan gewoon in dezelfde map en voeg de bestandsnaam toe als referentie. Of geef de locatie van het bestand op als in niet in dezelfde map staat.

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

Dit voegt ook geen teken toe aan het einde van de URL, maar het heeft wel het bestandsprojectpad als de URL voordat het eindigt met de naam van het bestand. bijv.

Als mijn projectstructuur was…

.. geeft een map aan \

• geeft een bestand aan
  terwijl vier | duiden een submap of bestand aan in de bovenliggende map

..openbaar
|||| ..html
|||| |||| -main.html
|||| |||| -secundair.html

Als ik bestand main.html open, zou de URL zijn:

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

Als ik echter op de knop in main.html klik om te veranderen naar secondary.html, zou de URL zijn:

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

Er zijn geen speciale tekens aan het einde van de URL.

Trouwens – (%20 geeft een spatie aan in een URL die het heeft gecodeerd en ingevoegd op de plaats ervan.)

Opmerking: de localhost:0000 zal uiteraard niet 0000 zijn. Je hebt daar je eigen poortnummer.

Bovendien wordt de ?_ijt=xxxxxxxxxxxxxxx aan het einde van de main.html URL, x bepaald door uw eigen verbinding, dus het zal duidelijk niet gelijk zijn aan de mijne.

Het lijkt misschien alsof ik een paar heel basale punten noem, maar ik wil het gewoon zo goed mogelijk uitleggen.

Antwoord 11

Je kunt eenvoudig een a-tag rond het element plaatsen:

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

https://jsfiddle.net/hj6gob8b/

Antwoord 12

Als u wilt voorkomen dat u een formulier of invoer moet gebruiken en u op zoek bent naar een link die op een knop lijkt, kunt u mooie knoplinks maken met een div-wrapper, een anker en een h1-tag. U zou dit mogelijk willen, zodat u de link-knop vrijelijk rond uw pagina kunt plaatsen. Dit is vooral handig voor het horizontaal centreren van knoppen en het hebben van verticaal gecentreerde tekst erin. Hier is hoe:

Je knop bestaat uit drie geneste delen: een div-wrapper, een anker en een h1, zoals:

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

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

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

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

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

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

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

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

<a id="Navigate" href="http://www.google.com">
  <input
    type="button"
    id="NavigateButton"
    style="
      background-image: url(https://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>

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

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

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'">

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

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

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

.abutton { 
  background: #bada55; padding: 5px; border-radius: 5px; 
  transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2;  }

<a href="https://example.com" class="abutton">Continue</a>

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

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

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

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/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:"

   window.location.href = your link

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

  <a class="btn-block-option" href="">
    <i class="si si-reload"></i>
  </a>