Verwendung des HTML-Tags

巴扎黑

Freigeben： 2017-06-16 14:08:00

Original

2821 Leute haben es durchsucht

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脚本程序"/>

Nach dem Login kopieren

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(&#39;你点击了按钮！&#39;)">
</body>
</html>

Nach dem Login kopieren

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="提交按钮的取值"/>

Nach dem Login kopieren

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="重置按钮的取值"/>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Dann geben Sie Informationen in das Textfeld außerhalb des -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

-Tags löschen und hat keine Auswirkung auf die Formularelemente außerhalb des aktuellen -Tags.

Ich möchte hier erwähnen, dass der Absenden-Button auch für das aktuelle -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 -Tag enthaltenen Formulareingabeinformationen zur Verarbeitung an den Server zu senden, und die Schaltfläche zum Zurücksetzen löscht die Eingabeinformationen des derzeit im -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