HTML wird verwendet, um die Struktur der Webseite zu erstellen, und die Skriptsprachen wie JavaScript werden verwendet, um die Webseite interaktiver und dynamischer zu gestalten. Darüber hinaus bietet HTML seinen Elementen verschiedene Attribute an, die dazu beitragen, JavaScript zu codieren. Zum Beispiel benötigen wir Formulare in fast jeder Anwendung, um Informationen einzugeben. Um die Formulardaten an den Server zu senden.

Dieser Leitfaden unterrichtet über die HTML “"Attributwert haben"einreichen”. Also lasst uns eintauchen!

So fügen Sie HTML -Schaltflächentyp = "Senden" hinzu?

Fügen Sie in HTML zunächst einen Klassennamen hinzu “myform”. Führen Sie dann die folgenden Schritte aus:

• In der DIV hinzufügen

  Tag für die Überschrift.

• Fügen Sie dann zwei Textfelder für den ersten und Nachnamen mit Etiketten hinzu. Der "für”Attribut der“Etikett”Tag und die“Ausweis”Attribut der“EingangDas Tag muss gleich sein. Dadurch werden die Bildunterschrift mit der Eingabesteuerung verbunden.
• Fügen Sie eine Taste mit der "hinzu"Typ"Wert festgelegt als"einreichen","Wert" als "einreichen", Und "Ausweis" als "einreichen”.
• Danach verbinden Sie die “Daten hinzufügen()Funktion mit der Schaltfläche Senden, die beim Klicken auf die Schaltfläche ausgelöst wird. Dieses Formular nimmt die Daten vom Benutzer ab und zeigt sie auf derselben Seite an.
• Zuletzt angeben

  Tags, bei denen die eingereichten Daten angezeigt werden müssen. Diese

  Tags haben IDs als "zugewiesen"displayFname" Und "displaylname”Das wird in der JavaScript -Datei verwendet, um darauf zuzugreifen und den weiteren Betrieb auszuführen.

Html

Das Schaltflächentyp "Senden" -attribut

Vorname:



Familienname, Nachname:



Einreichen

Sie haben den Vornamen eingereicht:> __________.

Sie haben Nachnamen eingereicht:> ___________.

Wenden wir einige CSS-Stile auf das oben genannte Div an. Hier das ".myform”Bezieht sich auf den in der HTML -Datei erwähnten Div -Namen:

• Zuweisen Sie die “Hintergrundfarbe"Eigenschaftswert als"#81b29a”.
• “Textausrichtung" als "Center”Richtet den Inhalt der DIV in der Mitte aus.
• Der "Höhe"Eigenschaftswert wird als" festgelegt "300px”.
• “Schriftgröße”Wird als" eingestellt "groß”.

CSS

.myform
Hintergrundfarbe: #81b29a;
Text-Align: Mitte;
Höhe: 300px;
Schriftgröße: groß;

Notiz: Wir haben den JavaScript -Code nicht hinzugefügt. Infolgedessen antwortet die Schaltfläche Senden nicht:

Lassen Sie uns nun die JavaScript -Funktion, die auf der Schaltfläche Klick ausgelöst wird. Erstellen Sie zunächst eine neue Datei mit einer Erweiterung als ".JS”. Definieren Sie dann eine Funktion namens “Daten hinzufügen()”. Diese Funktion holt zuerst den Wert beider Eingabefelder ab, indem sie mithilfe ihrer IDs im Dokument auf sie zugreift.GetElementById () -Methode. Zeigen Sie dann den abgerufenen Wert als innerer Text der hinzugefügten Etiketten an.

JavaScript

Funktion adddata ()
var fname = document.GetElementById ("fname").Wert;
var lname = document.GetElementById ("lname").Wert;
dokumentieren.GetElementById ("DisplayFname").InnerText = fname;
dokumentieren.getElementById ("displaylname").InnerText = lName;

Es kann beobachtet werden, dass nach dem Eintritt in den ersten und Nachnamen, wenn das “EinreichenDie Schaltfläche wird geklickt. Die Namen werden in den Etiketten angezeigt:

Wir haben gelernt, wie die HTML -Sendel -Taste mit praktischer Demonstration funktioniert.

Abschluss

In HTML gibt es Hunderte von Elementen wie Absätze, Eingabefelder, Schaltflächen und mehr. Insbesondere das HTML -Tasteelement mit dem Attributwert “einreichen”Wird verwendet, um die Datenwerte an den Formularhandler zu übermitteln oder die Eingabewerte zu verarbeiten. In diesem Handbuch haben wir die Schaltfläche Senden verwendet, um eine JavaScript -Funktion mit praktischen Beispielen aufzurufen.