So erstellen Sie eine HTML-Abbrechen-Schaltfläche, die zu einer URL weiterleitet

Lesezeit: 5 Minuten

Benutzer-Avatar
Rote Grille

Ich spiele mit dem Schaltflächen im w3schools Tryit-Editorund ich versuche herauszufinden, wie ich meinen Browser zu einer URL umleiten kann, wenn ich auf die Schaltfläche “Abbrechen” klicke.

Hier ist, was ich versucht habe:

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
  <button type="cancel" onclick="javascript:window.location='http://stackoverflow.com';">Cancel</button>
</form>

Aber es funktioniert nicht. Irgendwelche Ideen?

cancel ist kein gültiger Wert für ein Typattribut, daher ist die Schaltfläche wahrscheinlich standardmäßig auf submit und weiterhin das Formular absenden. Du meinst wahrscheinlich type="button".

(Das javascript: sollte entfernt werden, was zwar keinen Schaden anrichtet, aber völlig nutzlos ist Etikett)

Sie haben jedoch keine Schaltflächen-ähnliche Funktionalität, also wären Sie besser dran mit:

<a href="http://stackoverflow.com"> Cancel </a>

… möglicherweise mit etwas CSS, damit es wie eine Schaltfläche aussieht.

Benutzer-Avatar
RJ Anoop

Es gibt kein button type="cancel" im HTML-Format. Sie können es so versuchen

<a href="http://www.url.com/yourpage.php">Cancel</a>

Sie können es wie eine Schaltfläche aussehen lassen, indem Sie CSS-Stileigenschaften verwenden.

  • Um zu vermeiden, dass eine Schaltfläche mit unterstrichenem Label wie ein Link angezeigt wird, verwenden Sie <button type="button">Cancel</button> statt einer Eingabe.

    – Noumenon

    1. Februar 2016 um 12:14 Uhr

  • Warum sollten Sie jemals eine Schaltfläche in einen Link einfügen? Wenn das funktioniert, ist es definitiv ein skurriles Verhalten … Tatsächlich verbieten die HTML-Standards dies sogar: w3.org/TR/html-markup/…

    – Christian

    1. März 2016 um 21:39 Uhr

  • Dieses Markup ist gefährlich ungültig, und es beunruhigt mich, dass 21 Personen es für einen guten Vorschlag hielten. Bitte aktualisieren Sie entweder Ihre Antwort oder löschen Sie sie, damit niemand diesen Code in einer Produktionsumgebung verwendet.

    – zzzzBov

    16. Mai 2016 um 4:23 Uhr

  • Ihre Bearbeitung vom Mai 2016 hätte die ursprüngliche, 20-mal positiv bewertete Antwort beibehalten und dann erklären sollen, warum Sie sie jetzt für falsch halten. Das Ersetzen Ihrer ursprünglichen Antwort lässt den Anschein erwecken, dass diese Antwort die positiven Stimmen verdient hat, es macht die Kommentare verwirrend und ist weniger lehrreich. Es macht diese Antwort auch zu einem Duplikat der Top-Antwort.

    – Noumenon

    14. April 2018 um 22:00 Uhr

Hier gibt es ein paar Probleme.

Zunächst einmal gibt es so etwas nicht <button type="cancel">also wird es nur als a behandelt <button>. Das bedeutet, dass Ihr Formular abgeschickt wird, anstatt dass der Button Sie woanders hinführt.

Zweite, javascript: wird nur benötigt href oder action -Attribute, wo eine URL erwartet wird, um JavaScript-Code zu bezeichnen. Innen onclickwo JavaScript bereits erwartet wird, fungiert es nur als Label und erfüllt keinen wirklichen Zweck.

Schließlich ist es im Allgemeinen einfach besser, einen Stempel zu haben Verknüpfung statt einer Abbrechen-Schaltfläche. Sie können also einfach Folgendes tun:

<a href="http://stackoverflow.com/">Cancel</a>

Mit CSS können Sie es sogar so aussehen lassen wie eine Schaltfläche, aber mit diesem HTML gibt es absolut keine Verwirrung darüber, was es tun soll.

  • Vielen Dank! Kolink. Können Sie mir eine Dokumentation zeigen, wie man den Link wie eine Schaltfläche aussehen lässt?

    – Rote Grille

    23. August 2013 um 16:46 Uhr

  • Am einfachsten ist es, den Button innerhalb des Links zu platzieren.

    – JJJ

    23. August 2013 um 16:49 Uhr

  • @Juhana, und das wäre ein ungültiges Markup, also schlagen Sie es bitte nicht vor.

    – zzzzBov

    16. Mai 2016 um 4:22 Uhr

Standardmäßig wird ein Formular gesendet. Am einfachsten ist es, “return false” hinzuzufügen.

<button type="cancel" onclick="window.location='http://stackoverflow.com';return false;">Cancel</button>


<input class="button" type="button" onclick="window.location.replace('your_url')" value="Cancel" />

  • bat um eine Schaltfläche zum Abbrechen für die Weiterleitung zu einer URL, warum dann abstimmen

    – Sobin Augustinus

    23. August 2013 um 16:51 Uhr

  • Ich habe dir eine positive Stimme gegeben. Vielen Dank für Ihre Antwort auf meine Frage.

    – Rote Grille

    23. August 2013 um 17:07 Uhr

  • Vielleicht sollten Sie erwägen, Ihrer Codezeile eine kleine Erklärung hinzuzufügen. Der Kontext hilft immer – Sie könnten dem OP mitteilen, was an seinem Ansatz falsch war und warum Ihre Antwort das Problem löst. Sehen Sie sich die Antworten von Kolink oder Quentin an, um eine Idee zu bekommen.

    – schlau

    23. August 2013 um 20:34 Uhr

  • perfekt. Sie müssen keine Zeit mit dem Hinzufügen von CSS-Code verbringen, wenn wir diese Methode verwenden können. Bravo.

    – Zach Smith

    9. Dezember 2015 um 13:57 Uhr

Geben Sie einfach type=”button” ein

<button type="button"><b>Cancel</b></button>

Da sich Ihre Schaltfläche in einem Formular befindet, nimmt sie den Standardwert als Absenden an und type=”cancel” existiert nicht.

  • bat um eine Schaltfläche zum Abbrechen für die Weiterleitung zu einer URL, warum dann abstimmen

    – Sobin Augustinus

    23. August 2013 um 16:51 Uhr

  • Ich habe dir eine positive Stimme gegeben. Vielen Dank für Ihre Antwort auf meine Frage.

    – Rote Grille

    23. August 2013 um 17:07 Uhr

  • Vielleicht sollten Sie erwägen, Ihrer Codezeile eine kleine Erklärung hinzuzufügen. Der Kontext hilft immer – Sie könnten dem OP mitteilen, was an seinem Ansatz falsch war und warum Ihre Antwort das Problem löst. Sehen Sie sich die Antworten von Kolink oder Quentin an, um eine Idee zu bekommen.

    – schlau

    23. August 2013 um 20:34 Uhr

  • perfekt. Sie müssen keine Zeit mit dem Hinzufügen von CSS-Code verbringen, wenn wir diese Methode verwenden können. Bravo.

    – Zach Smith

    9. Dezember 2015 um 13:57 Uhr

Benutzer-Avatar
SoSen

Es gibt keinen Schaltflächentyp Abbrechen
https://www.w3schools.com/jsref/prop_pushbutton_type.asp

Um die Abbruchfunktionalität zu erreichen, habe ich den DOM-Verlauf verwendet

<button type="button" class="btn btn-primary" onclick="window.history.back();">Cancel</button>

Für mehr Details : https://www.w3schools.com/jsref/met_his_back.asp

  • Sauberer als alle anderen

    – Robert

    21. Januar 2021 um 6:16 Uhr

1245600cookie-checkSo erstellen Sie eine HTML-Abbrechen-Schaltfläche, die zu einer URL weiterleitet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy