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


Ik wil graag een HTML-knop maken die als een link fungeert. Dus wanneer u op de knop klikt, wordt deze omgeleid naar een pagina. Ik zou graag zien dat het zo toegankelijk mogelijk is.

Ik zou het ook leuk vinden, dus er zijn geen extra tekens of parameters in de URL.

Hoe kan ik dit bereiken?


Op basis van de tot nu toe gepubliceerde antwoorden, 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 voegt een vraagtekenteken toe aan het einde van de URL. Ik moet een oplossing vinden die geen tekens toevoegt aan het einde van de URL.

Er zijn twee andere oplossingen om dit te doen: JavaScript gebruiken of een koppeling stylen om er als een knop uit te zien.

JavaScript gebruiken:

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

Maar dit vereist natuurlijk JavaScript en daarom is het minder toegankelijk voor schermlezers. Het punt van een link is om naar een andere pagina te gaan. Dus proberen om een ​​knop als een link te laten fungeren, is de verkeerde oplossing. Mijn suggestie is dat je een link en style it om eruit te zien als een knop.

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

1369
2018-05-25 16:39


oorsprong


antwoorden:


HTML

De eenvoudige HTML-manier is om het in een <form> waarin u de gewenste doel-URL opgeeft in de action attribuut.

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

Stel zo nodig CSS in display: inline; op het formulier om het in de stroom te laten met de omringende tekst. In plaats van <input type="submit"> in het bovenstaande voorbeeld kunt u ook gebruiken <button type="submit">. Het enige verschil is dat de <button> element maakt kinderen mogelijk.

Je zou intuïtief verwachten te kunnen gebruiken <button href="http://google.com"> analoog aan de <a> element, maar helaas nee, dit kenmerk bestaat niet volgens HTML-specificatie.

CSS

Als CSS is toegestaan, gebruikt u gewoon een <a> welke je stijl om eruit te zien als een knop met behulp van onder andere de appearance eigendom (alleen de ondersteuning van Internet Explorer is momenteel (juli 2015) nog steeds slecht).

<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, stelt u de window.location.href.

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

1578
2018-05-25 16:40



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

406
2018-05-25 16:44



Als het de visuele verschijning is van een knop waarnaar u op zoek bent in een eenvoudige HTML-ankertag, kunt u de Twitter Bootstrap raamwerk om een ​​van de volgende veelgebruikte links / knoppen van het HTML-type op te maken om als een knop te verschijnen. Let op de visuele verschillen tussen versie 2, 3 of 4 van het framework:

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

Bootstrap (v4) voorbeeld uiterlijk:

Sample output of Boostrap v4 buttons

Bootstrap (v3) voorbeeld uiterlijk:

Sample output of Boostrap v3 buttons

Bootstrap (v2) voorbeeld uiterlijk:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Gebruik:

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

Helaas is deze opmaak niet langer geldig in HTML5 en zal deze niet valideren of altijd werken zoals mogelijk wordt verwacht. Gebruik een andere benadering.


130
2018-05-25 16:42



Vanaf HTML5 ondersteunen knoppen het formaction attribuut. Het beste van alles is dat er geen Javascript of bedrog nodig is.

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

Voorbehoud

  • Moet worden omringd door <form> -tags.
  • <button> type moet "submit" zijn (of niet gespecificeerd), ik kon het niet laten werken met de knop "type". Dat komt hieronder naar voren.
  • Overschrijft de standaardactie in een formulier. Met andere woorden, als je dit in een andere vorm doet, zal dit een conflict veroorzaken.

Referentie: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browserondersteuning: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



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

Soortgelijk:

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

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


41
2018-02-11 15:29



Als u een binnenvorm gebruikt, voegt u het kenmerk toe type = "reset" samen met het knopelement. Het zal de vormactie voorkomen.

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

35
2018-01-24 06:59



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

24
2018-05-25 16:41