Heim Web-Frontend HTML-Tutorial Einführung in die Methode zum Hinzufügen eines Submit-Links zu einer Schaltfläche auf einer statischen HTML-Seite

Einführung in die Methode zum Hinzufügen eines Submit-Links zu einer Schaltfläche auf einer statischen HTML-Seite

Jul 27, 2017 pm 02:15 PM
button html

1. Die Schaltfläche sieht aus wie ein Link (Bild)
Senden-Schaltfläche

<input type="submit" value="提交">
Nach dem Login kopieren

Senden-Link

<a href="#" onclick="表单名字.submit()">提交</a>
Nach dem Login kopieren

Zurücksetzen-Schaltfläche

<input type="reset" value="重置">
Nach dem Login kopieren

Link zurücksetzen

<a href="#" onclick="表单名字.reset()">重置</a>
Nach dem Login kopieren

Normale Schaltfläche

<input type="button" value="按钮" onclick="函数()">
Nach dem Login kopieren

Normaler Link

<a href="#" onclick="函数()">链接</a>
Nach dem Login kopieren

Machen Sie für das Bild dasselbe und ersetzen Sie das a-Tag durch img
2. Der Link sieht aus wie ein Button

<a href="reg.asp">注册</a>
=><input type="button" value="注册" onclick="location.href=&#39;reg.asp&#39;">
Nach dem Login kopieren

------------- --- ---
Manchmal können wir ein Abrufformular manuell erstellen und nach Belieben Schaltflächen oder Links verwenden.

<form action="xx.asp" method="get" name="form1">
  <input name="aa" type="text" id="aa">
  <input name="bb" type="text" id="bb">
  <input type="submit" name="Submit" value="提交">
</form>
=>
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="button" value="按钮" onclick="location.href=&#39;xx.asp?aa=&#39;+document.all[&#39;aa&#39;].value+&#39;&bb=&#39;+document.all[&#39;bb&#39;].value">
Nach dem Login kopieren

------------------------------------------------
Darüber hinaus , wir können auch eine Schaltfläche (Link) erstellen, um gleichzeitig JS-Variablen, Formulareingabewerte, ASP-Variablen und Recordset-Werte zu übertragen

<script language="javascript">
var id1=1;
</script>
<%
id3=3
....
rs.open exec,conn,1,1
假设有rs("id4")=4
...
%>
<input name="id2" type="text" id="id2" value="2">
<input type="button" value="按钮"
onclick="location.href=&#39;xx.asp?id1=&#39;+id1+&#39;&id2=&#39;+document.all[&#39;id2&#39;].value+&#39;&id3=<%=id3%>&id4=<%=rs("id4")%>&#39;">
Nach dem Login kopieren

Wenn wir die Schaltfläche drücken, sehen wir die Browser-URL Ist es xx.asp?id1=1&id2=2&id3=3&id4=4
In xx.asp können wir request.querystring verwenden, um alle Variablen abzurufen. Handelt es sich um eine getarnte Variablenübertragung zwischen dem Client-JS und dem Serversegment ?
--------------------------------- --- -------------------------------- --- -------------------------
So fügen Sie einer Schaltfläche eine Linkfunktion hinzu

Lösung:
Schaltflächen sind Objekte auf Steuerungsebene mit relativ hoher Priorität und können daher nicht wie Bilder oder Texte direkt verknüpft werden. Sie können nur durch den Aufruf eines Skripts über das Klickereignis der Schaltfläche implementiert werden.
Spezifische Schritte:
1. Öffnen Sie den Link im Originalfenster

    <input type="button" 
value="闪吧" onClick="location=’http://www.xxx.net’">
    <button onClick="location.href=’http://www.xxxx.net’">闪吧</button>
    <form action="http://www.xxxx.net%22%3e%3cinput/ type="submit" value="打开链接"></form>
Nach dem Login kopieren

2. Öffnen Sie den Link in einem neuen Fenster

<input type="button" 
value="闪吧" onClick="window.open(’http://www.xxxx.net’)">
    <button onClick="window.open(’http://www.xxxx.net’)">ggg</button>
    <form action="http://www.xxxx.net/" 
target="_blank"><input type="submit" value="打开链接"></form>
Nach dem Login kopieren


Hinweis: Die Anführungszeichen im von onClick aufgerufenen Code können einfach oder doppelt verschachtelt sein, wenn nur eines vorhanden ist. Wenn mehr als zwei Anführungszeichen vorhanden sind, müssen sie mit „“ maskiert werden, und die maskierten Anführungszeichen müssen sein im Einklang mit den inneren Anführungszeichen, wie zum Beispiel:

<button onClick="this.innerHTML=’<font color=\’red\’>http://www.xxxx.net</font>’">闪吧</button>
Nach dem Login kopieren

oder

<button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>
Nach dem Login kopieren

und die folgenden sind falsche Schreibweisen:

<button onClick="this.innerHTML=’<font color=’red’>http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color="red">http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color=\"red\">http://www.xxxx.net</font>’">闪吧</button>
Nach dem Login kopieren

Tipp: Die meisten davon gehören zu Fenster- oder Dokumentobjekten. Sowohl bei Methoden als auch bei Eigenschaften kann das Präfix „Fenster“ oder „Dokument“ weggelassen werden. In diesem Beispiel kann „location.href“ auch als „location“ abgekürzt werden Das Standardobjekt von location ist href.) ist window.location.href oder document.location.href Die elliptische Schreibweise.

Tipps: In diesem Beispiel können Sie auch die folgende Methode verwenden, um location.href zu ersetzen

location.replace(url)
location.assign(url)
navigate(url)
Nach dem Login kopieren

Besondere Tipps

Nach dem Code im ersten Wenn der Schritt ausgeführt wird, wird durch Klicken auf die Schaltfläche zum Linkziel gesprungen. Im zweiten Schritt wird der Link nach dem Klicken auf die Schaltfläche in einem neuen Fenster geöffnet.

Besondere Hinweise

In diesem Beispiel wird hauptsächlich onClick verwendet, um das Klickereignis des Benutzers auf der Schaltfläche zu erfassen, und dann wird die href-Methode des Standortobjekts oder die open-Methode des Fensterobjekts aufgerufen, um die zu öffnen Link. Ein weiterer Trick besteht darin, die Link-Funktion durch Absenden eines Formulars zu implementieren. Die Schaltfläche muss eine Schaltfläche vom Typ „Typ=Senden“ sein. Der Aktionswert des Formulars ist das Linkziel und der Zielwert ist die Zielmethode zum Öffnen des Links.

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Hinzufügen eines Submit-Links zu einer Schaltfläche auf einer statischen HTML-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles