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
1. Die Schaltfläche sieht aus wie ein Link (Bild)
Senden-Schaltfläche
<input type="submit" value="提交">
Senden-Link
<a href="#" onclick="表单名字.submit()">提交</a>
Zurücksetzen-Schaltfläche
<input type="reset" value="重置">
Link zurücksetzen
<a href="#" onclick="表单名字.reset()">重置</a>
Normale Schaltfläche
<input type="button" value="按钮" onclick="函数()">
Normaler Link
<a href="#" onclick="函数()">链接</a>
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='reg.asp'">
------------- --- ---
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='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">
------------------------------------------------
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='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">
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>
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>
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>
oder
<button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>
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>
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)
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!