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

Ik wil graag een HTML-knop maken die werkt als een link. Dus, als je op de knop klikt, gaat hij naar een pagina. Ik wil graag dat het zo toegankelijk mogelijk is.

Ik wil ook dat er geen extra tekens of parameters in de URL staan.

Hoe kan ik dit bereiken?

Gebaseerd op de antwoorden die tot nu toe zijn gepost, doe ik dit momenteel:

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

maar het probleem hiermee is dat in Safari en Internet Explorer, het een vraagteken teken toevoegt aan het eind van de URL. Ik moet een oplossing vinden die geen tekens aan het eind van de URL toevoegt.

Er zijn twee andere oplossingen om dit te doen: Gebruik maken van JavaScript of een link zo stylen dat hij op een knop lijkt.

Met behulp van JavaScript:

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

Maar dit vereist uiteraard JavaScript, en is daarom minder toegankelijk voor schermlezers. De bedoeling van een link is om naar een andere pagina te gaan. Dus proberen om een knop te laten werken als een link is de verkeerde oplossing. Mijn suggestie is dat je een link moet gebruiken en style het om op een knop te lijken.

<a href="/link/to/page2">Continue</a>
Community
Bewerkte vraag 23ste1 mei 2017 в 12:03
Programmering
button html hyperlink anchor htmlbutton
25ste1 mei 2010 в 4:39
29 views
Oplossing

HTML

De gewone HTML manier is om het in een `te zetten waarin je de gewenste doel URL opgeeft in hetaction` attribuut.


    <input type="submit" value="Go to Google" />

Zet eventueel CSS display: inline; op het formulier om het in de flow te houden met de omliggende tekst. In plaats van <input type="submit"> in bovenstaand voorbeeld, kun je ook gebruiken. Het enige verschil is dat het element children toestaat.

Je'zou intuïtief verwachten dat je `zou kunnen gebruiken analoog aan het` element, maar helaas nee, dit attribuut bestaat niet volgens HTML specificatie.

CSS

Als CSS wel is toegestaan, gebruik je gewoon een <a> die je met behulp van onder andere de eigenschap appearance zo stijlt dat hij op een knop lijkt (alleen Internet Explorer ondersteuning is op dit moment (juli 2015) nog gebrekkig).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Of kies een van die vele CSS bibliotheken zoals Bootstrap.

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

JavaScript

Als JavaScript is toegestaan, stel dan de window.location.href in.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
BalusC
Bewerkt antwoord 4de3 augustus 2016 в 10:53
Commentaren (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Bewerkt antwoord 21ste0 juli 2014 в 3:22
Commentaren (6)

De enige manier om dit te doen (behalve BalusC's ingenieuze formulier-idee!) is door een JavaScript onclick event aan de knop toe te voegen, wat niet goed is voor de toegankelijkheid.

Heb je overwogen om een normale link te stylen als een knop? Je kunt geen OS-specifieke knoppen op die manier bereiken, maar het is nog steeds de beste manier IMO.

Peter Mortensen
Bewerkt antwoord 21ste0 juli 2014 в 3:24
Commentaren (5)