Heim Web-Frontend HTML-Tutorial Verwendung des HTML-Tags

Verwendung des HTML-Tags

Jun 16, 2017 pm 02:08 PM
button html 标签 用法

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 . 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)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate 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.

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.

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-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-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.

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

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