Ich möchte eine HTML-Schaltfläche erstellen, die sich wie ein Link verhält. Wenn Sie also auf die Schaltfläche klicken, wird eine Seite weitergeleitet. Ich möchte, dass es so zugänglich wie möglich ist.
Ich würde es auch mögen, damit die URL keine zusätzlichen Zeichen oder Parameter enthält.
Wie kann ich das erreichen?
Aufgrund der bisher veröffentlichten Antworten mache ich derzeit Folgendes:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
Das Problem dabei ist jedoch, dass in Safari und Internet Explorer am Ende der URL ein Fragezeichen eingefügt wird. Ich muss eine Lösung finden, die am Ende der URL keine Zeichen hinzufügt.
Hierfür gibt es zwei weitere Lösungen: Verwenden von JavaScript oder Stylen eines Links, um wie eine Schaltfläche auszusehen.
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 Sinn eines Links besteht darin, zu einer anderen Seite zu wechseln. Der Versuch, eine Schaltfläche wie einen Link wirken zu lassen, ist also die falsche Lösung. Mein Vorschlag ist, dass Sie einen Link verwenden und ihn so gestalten, dass er wie eine Schaltfläche aussieht .
<a href="/link/to/page2">Continue</a>
?
auf der URL. Dies wird durch das Formular verursachttype="GET"
, ändern Sie dies intype="POST"
und das?
am Ende der URL verschwindet. Dies liegt daran, dass GET alle Variablen in der URL sendet, daher die?
.GET
dies fehl. Ich denke immer noch, dass die Verwendung eines Links mit der Einschränkung sinnvoll ist, dass er nicht auf "Leertaste" reagiert, wenn er wie die Schaltfläche aktiv ist. Auch einige Stile und Verhaltensweisen sind unterschiedlich (z. B. ziehbar). Wenn Sie die echte "Button-Link"?
-Erfahrung wünschen, ist es möglicherweise auch eine Option , serverseitige Weiterleitungen für die URL-Fertigstellung zum Entfernen durchzuführen.Antworten:
HTML
Die einfache HTML-Methode besteht darin, sie so
<form>
einzufügen, dass Sie die gewünschte Ziel-URL imaction
Attribut angeben .Legen Sie bei Bedarf CSS
display: inline;
für das Formular fest, damit es im Fluss mit dem umgebenden Text bleibt. Anstelle des<input type="submit">
obigen Beispiels können Sie auch verwenden<button type="submit">
. Der einzige Unterschied besteht darin, dass das<button>
Element Kinder zulässt.Sie würden intuitiv erwarten,
<button href="https://google.com">
analog zum<a>
Element verwenden zu können, aber leider nein, dieses Attribut existiert gemäß der HTML-Spezifikation nicht .CSS
Wenn CSS zulässig ist, verwenden
<a>
Sie einfach einen, den Sie so gestalten, dass er wie eine Schaltfläche aussieht, indem Sie unter anderem dieappearance
Eigenschaft verwenden ( dies wird in Internet Explorer nur nicht unterstützt ).Oder wählen Sie eine dieser vielen CSS-Bibliotheken wie Bootstrap .
JavaScript
Wenn JavaScript zulässig ist, setzen Sie die
window.location.href
.Anstelle des
<input type="button">
obigen Beispiels können Sie auch verwenden<button>
. Der einzige Unterschied besteht darin, dass das<button>
Element Kinder zulässt.quelle
display: inline
Zum Formular hinzufügen , um die Schaltfläche im Fluss zu halten.Beachten Sie, dass das
type="button"
Attribut wichtig ist, da der Standardwert für den fehlenden Wert der Status der Schaltfläche "Senden" ist .quelle
Wenn es sich um das visuelle Erscheinungsbild einer Schaltfläche handelt, nach der Sie in einem einfachen HTML-Ankertag suchen, können Sie das Twitter Bootstrap- Framework verwenden, um einen der folgenden allgemeinen HTML-Links / Schaltflächen so zu formatieren, dass sie als Schaltfläche angezeigt werden. Bitte beachten Sie die visuellen Unterschiede zwischen Version 2, 3 oder 4 des Frameworks:
Beispiel für ein Bootstrap (v4) -Beispiel:
Beispiel für ein Bootstrap (v3) -Beispiel:
Beispiel für ein Bootstrap (v2) -Beispiel:
quelle
Verwenden:
Leider ist dieses Markup in HTML5 nicht mehr gültig und wird weder validiert noch funktioniert es immer wie erwartet. Verwenden Sie einen anderen Ansatz.
quelle
target
Attribut befindet sich jedoch imo am Rande.Ab HTML5 unterstützen Schaltflächen das
formaction
Attribut. Das Beste ist, dass kein Javascript oder Trick benötigt wird.Vorsichtsmaßnahmen
<form>
Tags umgeben sein.<button>
Typ muss "Submit" (oder nicht angegeben) sein, ich konnte es nicht mit Typ "Button" zum Laufen bringen. Welches bringt Punkt unten.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 / Schaltfläche # Browser_Kompatibilität
quelle
formaction
ist kompatibel seit " IE world " seit Version 10 und höher<button formaction>
===<form action>
?<form>
Code in jedem unserer Beispiele. Istformaction
auf einebutton
der hinzuzufügen , soll?
auf eine leere GET Unterwerfung? In diesem JSBin sieht es so aus, als ob sich der HTML- Code für beide genau gleich verhält.Es ist eigentlich sehr einfach und ohne Verwendung von Formularelementen. Sie können einfach das <a> -Tag mit einer Schaltfläche im Inneren verwenden :).
So was:
Und es wird die href auf die gleiche Seite laden. Willst du eine neue Seite? Einfach benutzen
target="_blank"
.BEARBEITEN
Ein paar Jahre später, während meine Lösung noch funktioniert, können Sie viel CSS verwenden, damit sie so aussieht, wie Sie es möchten. Dies war nur ein schneller Weg.
quelle
<button type="button">...
damit es nicht standardmäßig als Senden fungiertWenn Sie ein Insider-Formular verwenden, fügen Sie das Attribut type = "reset" zusammen mit dem Schaltflächenelement hinzu. Dadurch wird die Formularaktion verhindert.
quelle
type="button"
quelle
input
hat kein Ending-Tag.input
Element ein ungültiges Element. Es muss ein Start-Tag haben, darf aber kein End-Tag haben.Es scheint drei Lösungen für dieses Problem zu geben (alle mit Vor- und Nachteilen).
Lösung 1: Schaltfläche in einem Formular.
Das Problem dabei ist jedoch, dass in einigen Versionen gängiger Browser wie Chrome, Safari und Internet Explorer am Ende der URL ein Fragezeichen eingefügt wird. Mit anderen Worten, für den Code über Ihrer URL sieht Ihre URL folgendermaßen aus:
Es gibt eine Möglichkeit, dies zu beheben, die jedoch eine serverseitige Konfiguration erfordert. Ein Beispiel für die Verwendung von Apache Mod_rewrite wäre die Umleitung aller Anforderungen mit einem Trailing
?
zu ihrer entsprechenden URL ohne die?
. Hier ist ein Beispiel .htaccess verwenden, aber es ist ein Full - Thread hier :Ähnliche Konfigurationen können je nach verwendetem Webserver und Stack variieren. Eine Zusammenfassung dieses Ansatzes:
Vorteile:
Nachteile:
?
sieht in einigen Browsern hässlich aus. Dies kann durch einen Hack (in einigen Fällen) mit POST anstelle von GET behoben werden. Der saubere Weg ist jedoch eine serverseitige Umleitung. Der Nachteil bei der serverseitigen Umleitung besteht darin, dass diese Links aufgrund der 304-Umleitung einen zusätzlichen HTTP-Aufruf verursachen.<form>
Element hinzuLösung 2: Verwenden von JavaScript.
Sie können JavaScript verwenden, um einen Klick und andere Ereignisse auszulösen, um das Verhalten eines Links mithilfe einer Schaltfläche nachzuahmen. Das folgende Beispiel könnte verbessert und aus dem HTML-Code entfernt werden, dient jedoch nur zur Veranschaulichung der Idee:
Vorteile:
Nachteile:
Lösung 3: Anker (Link) im Stil eines Knopfes.
Das Stylen eines Links wie eine Schaltfläche ist relativ einfach und bietet eine ähnliche Erfahrung für verschiedene Browser. Bootstrap macht das, aber es ist auch einfach, es mit einfachen Stilen selbst zu erreichen.
Vorteile:
<form>
zum Arbeiten.Nachteile:
keypress
Ereignisse auf Schaltflächen unterstützen.Fazit
Lösung Nr. 1 ( Schaltfläche in einem Formular ) scheint für Benutzer mit minimalem Arbeitsaufwand am transparentesten zu sein. Wenn Ihr Layout von dieser Auswahl nicht betroffen ist und die serverseitige Optimierung möglich ist, ist dies eine gute Option für Fälle, in denen die Barrierefreiheit oberste Priorität hat (z. B. Links auf einer Fehlerseite oder Fehlermeldungen).
Wenn JavaScript kein Hindernis für Ihre Barrierefreiheitsanforderungen darstellt, wird Lösung Nr. 2 ( JavaScript ) gegenüber Nr. 1 und Nr. 3 bevorzugt.
Wenn aus irgendeinem Grund die Barrierefreiheit von entscheidender Bedeutung ist (JavaScript ist keine Option), Sie sich jedoch in einer Situation befinden, in der Ihr Design und / oder Ihre Serverkonfiguration Sie daran hindert, Option 1 zu verwenden, dann Lösung 3 ( Anker im Stil einer Schaltfläche ) ist eine gute Alternative, um dieses Problem mit minimalen Auswirkungen auf die Benutzerfreundlichkeit zu lösen.
quelle
Warum platzieren Sie Ihre Schaltfläche nicht einfach in einem Referenz-Tag, z
Dies scheint perfekt für mich zu funktionieren und fügt dem Link keine% 20-Tags hinzu, so wie Sie es möchten. Ich habe einen Link zu Google verwendet, um zu demonstrieren.
Sie können dies natürlich in ein Formular-Tag einschließen, dies ist jedoch nicht erforderlich.
Wenn Sie eine andere lokale Datei verknüpfen, legen Sie sie einfach in denselben Ordner und fügen Sie den Dateinamen als Referenz hinzu. Oder geben Sie den Speicherort der Datei an, wenn sich in nicht im selben Ordner befindet.
Dies fügt auch kein Zeichen am Ende der URL hinzu, hat jedoch den Dateiprojektpfad als URL, bevor er mit dem Namen der Datei endet. z.B
Wenn meine Projektstruktur ...
.. bezeichnet einen Ordner - bezeichnet eine Datei, während vier | bezeichnen ein Unterverzeichnis oder eine Datei im übergeordneten Ordner
..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
Wenn ich main.html öffne, lautet die URL:
Wenn ich jedoch auf die Schaltfläche in main.html klickte, um zu Secondary.html zu wechseln, lautete die URL wie folgt:
Keine Sonderzeichen am Ende der URL. Ich hoffe das hilft. Übrigens - (% 20 bezeichnet ein Leerzeichen in einer URL, das codiert und an deren Stelle eingefügt wird.)
Hinweis: Der localhost: 0000 ist offensichtlich nicht 0000, Sie haben dort Ihre eigene Portnummer.
Darüber hinaus wird die? _Ijt = xxxxxxxxxxxxxx am Ende der main.html-URL x durch Ihre eigene Verbindung bestimmt, sodass sie offensichtlich nicht meiner entspricht.
Es mag so aussehen, als würde ich einige wirklich grundlegende Punkte darlegen, aber ich möchte nur so gut wie möglich erklären. Vielen Dank fürs Lesen und ich hoffe, dass dies zumindest jemandem hilft. Viel Spaß beim Programmieren.
quelle
Sie können einfach ein Tag um das Element setzen:
https://jsfiddle.net/hj6gob8b/
quelle
<button>
Inneren<a>
.Die einzige Möglichkeit, dies zu tun (mit Ausnahme von BalusCs genialer Formularidee!), Ist das Hinzufügen eines JavaScript-
onclick
Ereignisses zur Schaltfläche, was für die Barrierefreiheit nicht gut ist.Haben Sie darüber nachgedacht, einen normalen Link wie eine Schaltfläche zu gestalten? Auf diese Weise können Sie keine betriebssystemspezifischen Schaltflächen erreichen, aber IMO ist dies immer noch der beste Weg.
quelle
Wenn Sie dem folgen, was einige andere hinzugefügt haben, können Sie einfach eine einfache CSS-Klasse ohne PHP, ohne jQuery- Code, nur einfaches HTML und CSS verwenden.
Erstellen Sie eine CSS-Klasse und fügen Sie sie Ihrem Anker hinzu. Der Code ist unten.
Das ist es. Es ist sehr einfach und lässt Sie so kreativ sein, wie Sie möchten. Sie steuern die Farben, die Größe, die Formen (Radius) usw. Weitere Informationen finden Sie unter der Website, auf der ich dies gefunden habe .
quelle
Wenn Sie vermeiden möchten, ein Formular oder eine Eingabe verwenden zu müssen, und nach einem Link mit Schaltflächen suchen, können Sie gut aussehende Verknüpfungen mit einem Div-Wrapper, einem Anker und einem
h1
Tag erstellen . Möglicherweise möchten Sie dies, damit Sie den Link-Button frei um Ihre Seite platzieren können. Dies ist besonders nützlich, um Schaltflächen horizontal zu zentrieren und vertikal zentrierten Text darin zu haben. Hier ist wie:Ihr Button besteht aus drei verschachtelten Teilen: einem Div-Wrapper, einem Anker und einem h1, wie folgt:
Hier ist eine jsFiddle , um es auszuprobieren und damit herumzuspielen .
Vorteile dieses Setups: 1. Das Anzeigen des div-Wrappers: Block erleichtert das Zentrieren (mit Rand: 0 automatisch) und Positionieren (während ein <a> inline und schwieriger zu positionieren ist und nicht zentriert werden kann).
Sie können die <a> -Anzeige einfach blockieren, verschieben und als Schaltfläche formatieren, aber dann wird es schwierig, den Text darin vertikal auszurichten.
Auf diese Weise können Sie die Anzeige <a> display: inline-table und die Anzeige <h1> display: table-cell erstellen, mit der Sie vertikal ausrichten: middle auf <h1> verwenden und vertikal zentrieren können (was immer gut ist ein Knopf). Ja, Sie könnten Polster verwenden, aber wenn Sie möchten, dass die Größe Ihrer Schaltfläche dynamisch geändert wird, ist dies nicht so sauber.
Wenn Sie ein <a> in ein Div einbetten, kann manchmal nur der Text angeklickt werden. Durch dieses Setup kann die gesamte Schaltfläche angeklickt werden.
Sie müssen sich nicht mit Formularen befassen, wenn Sie nur versuchen, auf eine andere Seite zu wechseln. Formulare dienen zur Eingabe von Informationen und sollten dafür reserviert werden.
Ermöglicht es Ihnen, das Button-Styling und das Text-Styling sauber voneinander zu trennen (Stretch-Vorteil? Sicher, aber CSS kann böse aussehen, so dass es schön ist, es zu zerlegen).
Es hat mir definitiv das Leben erleichtert, eine mobile Website für Bildschirme mit variabler Größe zu gestalten.
quelle
@ Nicolas, folgendes hat für mich funktioniert, da deins nicht hatte,
type="button"
aufgrund dessen es sich als Submit-Typ zu verhalten begann ... da ich bereits einen Submit-Typ habe. Es hat bei mir nicht funktioniert ... und jetzt kannst du entweder eine Klasse hinzufügen zum Button oder<a>
zum Abrufen des gewünschten Layouts:quelle
Eine andere Möglichkeit besteht darin, einen Link in der Schaltfläche zu erstellen:
Verwenden Sie dann CSS, um den Link und die Schaltfläche so zu gestalten, dass der Link den gesamten Platz innerhalb der Schaltfläche einnimmt (damit der Benutzer nicht falsch klickt):
Ich habe hier eine Demo erstellt .
quelle
Wenn Sie eine Schaltfläche erstellen möchten, die an einer beliebigen Stelle für eine URL verwendet wird, erstellen Sie eine Schaltflächenklasse für einen Anker.
quelle
Ich weiß, dass viele Antworten eingereicht wurden, aber keine von ihnen schien das Problem wirklich zu lösen. Hier ist meine Einstellung zu einer Lösung:
<form method="get">
Methode, mit der das OP beginnt. Dies funktioniert sehr gut, hängt aber manchmal ein?
an die URL an. Das?
ist das Hauptproblem.?
nicht an die URL angehängt wird. Es wird nahtlos auf die<form>
Methode für den sehr kleinen Teil der Benutzer zurückgreifen, für die JavaScript nicht aktiviert ist.<form>
oder<button>
sogar vorhanden ist. In diesem Beispiel verwende ich jQuery, da es schnell und einfach ist, aber auch in 'Vanilla'-JavaScript ausgeführt werden kann.<form>
action
Attribut angegebenen Link .JSBin-Beispiel (Code-Snippet kann Links nicht folgen)
quelle
7 Möglichkeiten, dies zu tun:
window.location.href = 'URL'
window.location.replace('URL')
window.location = 'URL'
window.open('URL')
window.location.assign('URL')
quelle
Für HTML 5 und gestaltete Schaltfläche zusammen mit Bildhintergrund
quelle
Sie können auch eine Schaltfläche verwenden:
Beispiel: In der ASP.NET Core-Syntax :
quelle
Wenn Sie ein SSL-Zertifikat verwenden
quelle
Personen, die mit
<a></a>
Attributen auf a geantwortet haben,<button></button>
waren hilfreich.ABER vor kurzem bin ich auf ein Problem gestoßen, als ich einen Link in einem verwendet habe
<form></form>
.Die Schaltfläche wird jetzt als / als Senden-Schaltfläche (HTML5) betrachtet. Ich habe versucht, mich zurechtzufinden, und habe diese Methode gefunden.
Erstellen Sie eine Schaltfläche im CSS-Stil wie die folgende:
Oder erstellen Sie hier einen neuen: CSS Button Generator
Erstellen Sie dann Ihren Link mit einem Klassen- Tag, das nach dem von Ihnen erstellten CSS-Stil benannt ist:
Hier ist eine Geige:
JS Fiddle
quelle
Ich habe dies für eine Website verwendet, an der ich gerade arbeite, und es funktioniert großartig!. Wenn Sie auch ein cooles Styling wollen, werde ich das CSS hier ablegen.
JSFiddle hier arbeiten .
quelle
Sie können die Schaltflächen auch
type-property
auf "Schaltfläche" setzen (dadurch wird das Formular nicht gesendet) und dann in einem Link verschachtelt (der Benutzer wird umgeleitet).Auf diese Weise können Sie eine andere Schaltfläche im selben Formular haben, die das Formular sendet, falls dies erforderlich ist. Ich denke auch, dass dies in den meisten Fällen dem Festlegen der Formularmethode und der Aktion als Link vorzuziehen ist (es sei denn, es handelt sich um ein Suchformular, denke ich ...).
Beispiel:
Auf diese Weise leitet die erste Schaltfläche den Benutzer weiter, während die zweite das Formular sendet.
Stellen Sie sicher, dass die Schaltfläche keine Aktion auslöst, da dies zu einem Konflikt führt. Wie Arius betonte, sollten Sie sich darüber im Klaren sein, dass dies aus dem oben genannten Grund laut Standard nicht als gültiges HTML angesehen wird. Es funktioniert jedoch wie erwartet in Firefox und Chrome, aber ich habe es noch nicht für Internet Explorer getestet.
quelle
Sie können Javascript verwenden:
Durch
http://www.google.com
Ihre Website ersetzen undhttp://
vor der URL einfügen.quelle
In JavaScript
In HTML
quelle
Geben Sie Ihre Browserkonsole ein
window.location
und drückenenter
Sie sie. Dann können Sie die klare Vorstellung bekommen, waslocation
enthältHier können Sie einen beliebigen Wert einstellen.
Um eine andere Seite umzuleiten, können Sie
href
mit Ihrem Link einen Wert festlegen .In Ihrem Fall-
quelle
Wenn Sie möchten, dass es wie eine Schaltfläche mit Schwerpunkt auf dem Verlaufsbild aussieht , können Sie Folgendes tun:
quelle
Wenn Sie nach Seiten umleiten möchten, die sich auf Ihrer Website befinden, dann ist hier meine Methode: Ich habe das Attribut href zur Schaltfläche hinzugefügt und mit einem Klick this.getAttribute ('href') zugewiesen. zu document.location.href
** Es funktioniert nicht, wenn Sie aufgrund von 'X-Frame-Optionen' auf 'sameorigin' auf URLs außerhalb Ihrer Domain verweisen.
Beispielcode:
quelle