Heim >Web-Frontend >HTML-Tutorial >Verwendung des HTML-Tags
Verwendung des HTML-Tags
- 巴扎黑Original
- 2017-06-16 14:08:002834Durchsuche
Auf Webseiten werden Schaltflächen in drei Typen unterteilt: normale Schaltflächen, Senden-Schaltflächen und Zurücksetzen-Schaltflächen.
1. Gewöhnliche Schaltfläche
Gewöhnliche Schaltflächen müssen im Allgemeinen mit JavaScript-Skripten zusammengearbeitet werden, um das Formular zu implementieren.
Syntax:
<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
Beschreibung:
Der Wert von value ist der auf der Schaltfläche angezeigte Text, onclick ist das Ereignis der gewöhnlichen Schaltfläche, wir werden dies tun im JavaScript-Einführungs-Tutorial Es wird im nächsten Kapitel ausführlich erklärt, daher ist es für jeden hier in Ordnung, es zu verstehen.
Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
单击按钮弹出对话框：<br/>
<input type="button" value="按钮" onclick="alert('你点击了按钮！')">
</body>
</html>2. Senden-Button
Der Senden-Button kann als gewöhnlicher Button mit Sonderfunktionen betrachtet werden, um das Formular zu realisieren Inhalt Zur Verarbeitung an den Server senden.
Syntax:
<input type="submit" value="提交按钮的取值"/>
Beschreibung:
Der Wert von value ist der auf der Schaltfläche angezeigte Text. Ein Beispiel finden Sie im Beispiel unter „Reset-Taste“.
Der wahre Nutzen der Schaltfläche „Senden“ kann erst wirklich verstanden werden, wenn wir uns mit der Back-End-Technologie vertraut machen.
3. Zurücksetzen der Schaltfläche „Zurücksetzen“
Die Schaltfläche „Zurücksetzen“ kann auch als gewöhnliche Schaltfläche mit Sonderfunktionen betrachtet werden. Durch Klicken auf die Schaltfläche „Zurücksetzen“ können die vom Benutzer im Seitenformular eingegebenen Informationen gelöscht werden.
Syntax:
<input type="reset" value="重置按钮的取值"/>
Beschreibung:
Der Wert von value ist der auf der Schaltfläche angezeigte Text.
Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="form1" method="post" action="index.html">
账号：<input type="text"/><br/>
密码：<input type="text"/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>Nachdem Sie Zeichen in das Textfeld eingegeben haben, drücken Sie die Reset-Taste und Sie werden feststellen, dass der Inhalt des Textfelds gelöscht wird! Dies ist, was die Reset-Taste tut.
1. Missverständnisse über die Reset-Taste
Aus dem oben Gesagten wissen wir, dass die Reset-Taste die vom Benutzer im Formular eingegebenen Informationen löschen kann, die Reset-Taste jedoch nur den „aktuellen Wert“. Formular-Tag“ Der Inhalt des Formularelements ist für Formularelemente außerhalb des aktuellen Formular-Tags ungültig.
Beispiel:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="form1" method="post" action="index.html">
账号：<input type="text"/><br/>
密码：<input type="text"/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
昵称：<input type="text"/><br/>
</body>
</html>Dann geben Sie Informationen in das Textfeld außerhalb des b2368275032c438dd74002c1e36dce38-Feldes ein und klicken dann auf die Schaltfläche „Zurücksetzen“. dass es ungültig ist.
Fazit: Die Schaltfläche „Zurücksetzen“ kann nur die Eingabeinformationen des Formularelements innerhalb des aktuellen ff9c23ada1bcecdd1a0fb5d5a0f18437-Tags löschen und hat keine Auswirkung auf die Formularelemente außerhalb des aktuellen ff9c23ada1bcecdd1a0fb5d5a0f18437-Tags.
Ich möchte hier erwähnen, dass der Absenden-Button auch für das aktuelle ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag gilt.
4. Der Unterschied zwischen gewöhnlichen Schaltflächen, Absenden-Schaltflächen und Reset-Schaltflächen
Aus dem oben Gesagten wissen wir, dass gewöhnliche Schaltflächen im Allgemeinen mit JavaScript-Skripten kombiniert werden, um einige Spezialeffekte zu erzielen, und Absenden-Schaltflächen hauptsächlich Wird verwendet, um die derzeit im ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag enthaltenen Formulareingabeinformationen zur Verarbeitung an den Server zu senden, und die Schaltfläche zum Zurücksetzen löscht die Eingabeinformationen des derzeit im ff9c23ada1bcecdd1a0fb5d5a0f18437-Tag enthaltenen Formularelements.
In der Einführungsphase von HTML ist es für Sie unmöglich, die Funktionen dieser drei Schaltflächen vollständig zu verstehen. Also keine Panik, es macht nichts, wenn Sie es nicht gut verstehen, denn es handelt sich um JavaScript und dynamische Webseiten, und wir werden es klar wissen, nachdem wir die späteren Kurse studiert haben. In der HTML-Phase müssen wir nur wissen, welche Arten von Schaltflächen es gibt und wie man den Beschriftungscode schreibt. Das ist sehr einfach.
Das obige ist der detaillierte Inhalt vonVerwendung des HTML-Tags