So erstellen Sie dynamisch ein Formular mit 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);

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”);

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);

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");

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

userName.setAttribute("placeholder", "Name");

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);

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

Schritt 8− Verwenden 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 9−Klicken 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.

   

   
   
*Student registration form
    Generate 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>

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!