Heim > Web-Frontend > js-Tutorial > So erstellen Sie dynamisch ein Formular mit JavaScript

So erstellen Sie dynamisch ein Formular mit JavaScript

WBOY
Freigeben: 2023-09-13 23:53:08
nach vorne
893 Leute haben es durchsucht

如何使用 JavaScript 动态创建表单

Übersicht

Um ein vollständig dynamisches HTML-Formular zu erstellen, können Sie einige Document Object Model (DOM)-Methoden wie createElement(), setAttribute(), appendChild() verwenden. Diese DOM-Methoden helfen uns beim Erstellen dynamischer HTML-Formulare. Die Art und Weise, wie wir dieses dynamische Formular erstellen, besteht darin, alle Elemente in Skript-Tags zu erstellen, Eigenschaften festzulegen, um einige Funktionen hinzuzufügen, und schließlich, wenn unser Element zur Bereitstellung bereit ist, hängen wir es an das übergeordnete Element des Elements an. Daher sind alle im übergeordneten Formular-Tag angehängten Elemente untergeordnete Elemente.

Grammatik

In dieser Aufgabe verwendete Syntax -

    Die Methode
  • createElement() wird zum Erstellen eines beliebigen HTML-Elements verwendet. Beispiel: div, button, p, label usw.

document.createElement(elements);
Nach dem Login kopieren
    Die Methode
  • setAttribute() wird verwendet, um Attribute in Elemente einzufügen. Werte innerhalb der setAttribute()-Methode werden als Schlüssel-Wert-Paare übergeben. Zum Beispiel: („Platzhalter“, „Name“), („Typ“, „Senden“), („Wert“, „Senden“) usw.

element.setAttribute(“Key”,“Value”);
Nach dem Login kopieren
    Die Methode
  • appendChild() fügt das Element, das wir mit createElement() erstellt haben, in ein beliebiges Body-Tag ein. Die Elementreferenz des direkten Elements wird als Argument an appendChild() übergeben.

parentElement.appendChild(element);
Nach dem Login kopieren

Algorithmus

Schritt 1 Erstellen Sie einfachen HTML-Boilerplate-Code im Editor. Erstellen Sie außerdem eine Schaltfläche und eine Formularbeschriftung, in die unser dynamisches Formular geladen wird.

Schritt 2 Erstellen Sie eine JavaScript-Pfeilfunktion innerhalb des Skript-Tags.

Schritt 3 Verwenden Sie nun document.getElementById(), um das Formular in der Variablen abzurufen, da das Formular-Tag durch den ID-Namen definiert wird.

Schritt 4 Beginnen Sie hier mit dem Aufbau Ihrer dynamischen Form. Erstellen Sie ein neues Element mit der Methode createElement() des Dokuments.

var userName = document.createElement("input");
Nach dem Login kopieren

Schritt 5 Verwenden Sie nun die Methode setAttribute(), um Attribute im oben erstellten Element festzulegen.

userName.setAttribute("placeholder", "Name");
Nach dem Login kopieren

Schritt 6 Verwenden Sie die Methode appendChild(), um das oben erstellte Element als ID-Namen „dform“ an das übergeordnete Element „form“ anzuhängen.

dform.appendChild(userName);
Nach dem Login kopieren

Schritt 7 Wiederholen Sie die Schritte 4 bis 6 und erstellen Sie alle erforderlichen Felder des Formulars.

Schritt 8Verwenden Sie createElement(), um ein weiteres Element-Div zu erstellen, zwei Schaltflächen zum Senden bzw. Zurücksetzen zu erstellen und diese beiden Schaltflächen daran anzuhängen.

Schritt 9Klicken Sie auf die Schaltfläche „Formular generieren“, um die Funktion „gForm()“ auszulösen und das Formular dynamisch zu generieren.

Beispiel

Im angegebenen Beispiel haben wir ein Formular mit Javascript erstellt. Daher sind alle Elemente innerhalb des Form-Tags nicht so statisch aufgebaut, wie dies bei Elementen innerhalb des Body-Tags der Fall wäre. Dieses Formular enthält bestimmte Felder für die Studentenanmeldung. Die Felder sind Name, E-Mail, Adresse, Geburtsdatum und Telefonnummer, sodass alle diese dynamisch aus Skript-Tags gerendert werden.



   Create form dynamically with js

*Student registration form

<script> gForm = () => { var dform = document.getElementById("dynamicForm"); dform.setAttribute("style", "display:flex;flex-direction:column") // dform.innerHTML="" var userName = document.createElement(&quot;input&quot;); userName.setAttribute(&quot;placeholder&quot;, &quot;Name&quot;); dform.appendChild(userName); var userEmail = document.createElement("input"); userEmail.setAttribute("placeholder", "Email"); userEmail.setAttribute("type", "email"); dform.appendChild(userEmail); var userAdd = document.createElement("input"); userAdd.setAttribute("placeholder", "Address"); dform.appendChild(userAdd); var userDob = document.createElement("input"); userDob.setAttribute("placeholder", "D.O.B"); userDob.setAttribute("type", "date"); dform.appendChild(userDob); var userPhn = document.createElement("input"); userPhn.setAttribute("placeholder", "Phone number"); dform.appendChild(userPhn); var sBtn = document.createElement("input"); sBtn.setAttribute("value", "submit"); sBtn.setAttribute("type", "submit"); var rBtn = document.createElement("input"); rBtn.setAttribute("value", "reset"); rBtn.setAttribute("type", "reset"); var btns = document.createElement("div"); btns.setAttribute("style","margin:0.4rem auto") dform.appendChild(btns); btns.appendChild(sBtn); btns.appendChild(rBtn); } </script>
Nach dem Login kopieren

In der Abbildung unten sehen Sie die Ausgabe des obigen Beispiels, in dem die Schaltfläche zur Generierung des Studentenregistrierungsformulars angezeigt wird. Wenn nicht auf die Schaltfläche „Formular generieren“ geklickt wird, wird eine einfache Seite wie unten gezeigt angezeigt.

Wenn oben auf die Schaltfläche „Formular generieren“ geklickt wird, wird die im Skript-Tag erstellte Pfeilfunktion ausgelöst und das Ergebnis ist ein dynamisch generiertes Formular mit allen erforderlichen Feldern für die Studentenregistrierung.

Fazit

Durch Abschluss dieser Aufgabe können wir jedes dynamische Element auf einer Webseite erstellen. Dynamischer Inhalt auf einer Webseite beschleunigt das Laden der Seite, da der Server beim Laden der Seite nicht auf den gesamten riesigen Code zu Beginn reagieren muss. Dynamische Formulare machen Seiten außerdem interaktiver.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie dynamisch ein Formular mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage