Cara membuat borang secara dinamik menggunakan JavaScript

Gambaran Keseluruhan

Untuk mencipta borang HTML yang dinamik sepenuhnya, anda boleh menggunakan beberapa kaedah Model Objek Dokumen (DOM) seperti createElement(), setAttribute(), appendChild(). Kaedah DOM ini akan membantu kami membina borang HTML dinamik. Cara kami membina borang dinamik ini ialah dengan mencipta semua elemen dalam teg skrip, menetapkan sifat untuk menambah beberapa fungsi, dan akhirnya apabila elemen kami sedia untuk dihidangkan, kami menambahkannya pada elemen induk elemen. Oleh itu, semua elemen yang dilampirkan dalam teg borang induk ialah elemen anak.

Tatabahasa

Sintaks yang digunakan dalam tugasan ini -

Kaedah

• createElement() digunakan untuk mencipta sebarang elemen HTML. Contoh: div, butang, p, label, dll.

document.createElement(elements);

Kaedah

• setAttribute() digunakan untuk memasukkan atribut ke dalam elemen. Nilai dalam kaedah setAttribute() diluluskan sebagai pasangan nilai kunci. Contohnya: ("Pemegang Tempat", "Nama"), ("Jenis", "Serah"), ("Nilai", "Serah"), dsb.

element.setAttribute(“Key”,“Value”);

Kaedah

• appendChild() memasukkan elemen yang kami cipta menggunakan createElement() ke dalam mana-mana teg badan. Rujukan elemen elemen langsung dihantar sebagai hujah kepada appendChild().

parentElement.appendChild(element);

Algoritma

Langkah 1 −Buat kod boilerplate HTML yang mudah dalam editor. Buat juga butang dan label borang di mana borang dinamik kami akan dimuatkan.

Langkah 2 − Buat fungsi anak panah JavaScript di dalam teg skrip.

Langkah 3− Sekarang gunakan document.getElementById() untuk mendapatkan borang dalam pembolehubah kerana teg borang ditakrifkan oleh nama ID.

Langkah 4 − Mula membina bentuk dinamik anda di sini. Cipta elemen baharu menggunakan kaedah createElement() dokumen.

var userName = document.createElement("input");

Langkah 5 − Sekarang gunakan kaedah setAttribute() untuk menetapkan atribut dalam elemen yang dicipta di atas.

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

Langkah 6 − Gunakan kaedah appendChild() untuk menambahkan elemen yang dicipta di atas pada elemen induk "borang" sebagai nama id "dform".

dform.appendChild(userName);

Langkah 7 − Ulang langkah 4 hingga 6 dan buat semua medan borang yang diperlukan.

Langkah 8− Gunakan createElement() untuk mencipta div elemen lain, buat dua butang untuk serah dan set semula masing-masing, dan lampirkan dua butang ini padanya.

Langkah 9−Klik butang "Jana Borang", yang akan mencetuskan fungsi "gForm()" dan menjana borang secara dinamik.

Contoh

Dalam contoh yang diberikan, kami telah membina borang menggunakan Javascript. Oleh itu, semua elemen dalam teg borang tidak dibina sebagai statik seperti yang akan dilakukan dengan elemen dalam teg badan. Borang ini mengandungi medan tertentu untuk pendaftaran pelajar. Medan ialah nama, e-mel, alamat, tarikh lahir, nombor telefon, jadi semua ini dipaparkan secara dinamik daripada teg skrip.

   

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

Dalam imej yang diberikan di bawah, ia menunjukkan output contoh di atas, di mana butang penjanaan borang pendaftaran pelajar ditunjukkan. Apabila butang jana borang tidak diklik, ia memaparkan halaman mudah seperti yang ditunjukkan di bawah.

Apabila butang "Jana Borang" di atas diklik, fungsi anak panah yang dibuat dalam teg skrip akan dicetuskan dan hasilnya ialah borang yang dijana secara dinamik dengan semua medan yang diperlukan untuk pendaftaran pelajar.

Kesimpulan

Dengan menyelesaikan tugasan ini, kami boleh mencipta sebarang elemen dinamik dalam halaman web. Kandungan dinamik dalam halaman web menjadikan halaman dimuatkan lebih cepat kerana pelayan tidak perlu bertindak balas terhadap keseluruhan kod besar pada permulaan apabila halaman dimuatkan. Bentuk dinamik juga menjadikan halaman lebih interaktif.

Atas ialah kandungan terperinci Cara membuat borang secara dinamik menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!