Frage Wie erstelle ich eine HTML-Schaltfläche, die wie ein Link funktioniert?


Ich möchte einen HTML-Button erstellen, der wie ein Link funktioniert. Wenn Sie auf die Schaltfläche klicken, wird sie auf eine Seite umgeleitet. Ich möchte, dass es so zugänglich wie möglich ist.

Ich würde es auch mögen, also gibt es keine zusätzlichen Charaktere oder Parameter in der URL.

Wie kann ich das erreichen?


Basierend auf den bisher veröffentlichten Antworten mache ich folgendes:

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

aber das Problem damit ist, dass Safari und Internet Explorerfügt es am Ende der URL ein Fragezeichen hinzu. Ich muss eine Lösung finden, die am Ende der URL keine Zeichen hinzufügt.

Es gibt zwei andere Lösungen, um dies zu tun: JavaScript verwenden oder einen Link so gestalten, dass er wie eine Schaltfläche aussieht.

Verwenden von JavaScript:

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

Dies erfordert jedoch offensichtlich JavaScript und ist daher für Screenreader weniger zugänglich. Der Zweck eines Links ist es, zu einer anderen Seite zu gehen. Der Versuch, einen Button wie einen Link zu wirken, ist die falsche Lösung. Mein Vorschlag ist, dass Sie einen Link verwenden und Stil es wie ein Knopf aussehen.

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

1369
2018-05-25 16:39


Ursprung


Antworten:


HTML

Der einfache HTML-Weg ist, es in ein <form> wobei Sie die gewünschte Ziel-URL in der action Attribut.

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

Legen Sie ggf. CSS fest display: inline; auf dem Formular, um es im Fluss mit dem umgebenden Text zu halten. Anstatt von <input type="submit"> Im obigen Beispiel können Sie auch verwenden <button type="submit">. Der einzige Unterschied ist, dass die <button> Element erlaubt Kindern.

Sie würden intuitiv erwarten, dass Sie es nutzen können <button href="http://google.com"> analog zu den <a> Element, aber leider nein, dieses Attribut existiert nicht nach HTML-Spezifikation.

CSS

Wenn CSS erlaubt ist, verwenden Sie einfach ein <a> die Sie aussehen, um wie eine Taste aussehen unter Verwendung der appearance Eigentum (Nur der Internet Explorer-Support ist derzeit (Juli 2015) noch immer schlecht).

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

Oder wählen Sie eine dieser vielen CSS-Bibliotheken wie Bootstrap.

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

JavaScript

Wenn JavaScript erlaubt ist, setzen Sie die 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



Wenn es sich um das Aussehen einer Schaltfläche handelt, nach der Sie in einem einfachen HTML-Anchor-Tag suchen, können Sie das verwenden Twitter Bootstrap Framework zum Formatieren einer der folgenden allgemeinen HTML-Typ-Links / Schaltflächen, die als Schaltfläche angezeigt werden. Bitte beachten Sie die visuellen Unterschiede zwischen Version 2, 3 oder 4 des Frameworks:

<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) Aussehen der Probe:

Sample output of Boostrap v4 buttons

Bootstrap (v3) Aussehen der Probe:

Sample output of Boostrap v3 buttons

Bootstrap (v2) Aussehen der Probe:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Benutzen:

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

Leider ist dieses Markup in HTML5 nicht mehr gültig und wird weder validieren noch immer als potenziell erwartet funktionieren. Verwenden Sie einen anderen Ansatz.


130
2018-05-25 16:42



Ab HTML5 unterstützen Schaltflächen die formaction Attribut. Das Beste von allem, kein Javascript oder Tricks sind erforderlich.

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

Vorbehalte

  • Muss von umgeben sein <form> Stichworte.
  • <button> type muss "submit" (oder unspezifiziert) sein, ich konnte es nicht mit type "button" arbeiten. Was bringt Punkt unten.
  • Überschreibt die Standardaktion in einem Formular. Mit anderen Worten, wenn Sie dies in einem anderen Formular tun, wird es einen Konflikt verursachen.

Referenz: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Browserunterstützung: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



Es ist wirklich sehr einfach und ohne Verwendung von Formelementen. Sie können einfach das <a> -Tag mit einer Schaltfläche innerhalb von :) verwenden.

So was:

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

Und es wird die href in die gleiche Seite laden. Willst du eine neue Seite? Benutz einfach target="_blank".


41
2018-02-11 15:29



Wenn Sie ein Innenformular verwenden, fügen Sie das Attribut hinzu type = "Zurücksetzen" zusammen mit dem Knopfelement. Es wird die Formularaktion verhindern.

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

35
2018-01-24 06:59