Membuat Form Dinamis dengan HTML & Javascript.

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Form Dinamis dengan HTML & Javascript."

Hamdani Tanuwidjaja
7 tahun lalu
Tontonan:

2 Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element wajib ada pada setiap website. Form umumnya digunakan agar website dapat berinteraksi dengan user/pengunjung, misalnya untuk login, pencarian dan lain sebagainya. Saya yakin k... Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element wajib ada pada setiap website. Form umumnya digunakan agar website dapat berinteraksi dengan user/pengunjung, misalnya untuk login, pencarian dan lain sebagainya. Saya yakin kita semua sebagai web developer pasti cukup sering membuat form, akan tetapi form yang kita buat kadang statis, nah Pada kesempatan kali ini saya akan menulis tutorial tentang pembuatan form dinamis, apa itu dinamis? Dinamis ya brarti tidak statis hehe, maksudnya gini, form dinamis adalah form yang bisa berubah-ubah jumlahnya, Ok langsung saja ke tutorial, buat formnya terlebih dahulu. <html> <head> <title> Form Dinamis </title> </head> <body> <form method="post" action=""> // kita masukkan dalam tag table agar tampilannya rapi <table id="formku"> <tr><td><input type="text" name="inputan[]"></td></tr> </table> <input type="submit" name="ok" value="submit"> </form> </body> </html> Berikut hasilnya. Bisa dilihat pada form diatas terdapat link Add dan Remove, tetapi link diatas tidak digunakan

3 untuk berpindah ke halaman lain, melainkan hanya digunakan untuk menjalankan function javascript.   jadi apabila kita mengklik link Add maka form inputan akan bertambah dan apabila mengklik link remove maka form inputan akan berkurang. disini kita menggunakan JavaScript untuk memanipulasi form, berikut codenya function tambah_form(){ //mencari element dengan id "formku" (yaitu table) // membuat element <tr> var tabel_row=document.createelement("tr"); // membuat element <td> var tabel_col=document.createelement("td"); // membuat element input untuk menambah form inputan var tambah=document.createelement("input"); // menambahkan element <tr> pada tag table target.appendchild(tabel_row); // menambahkan element <td> pada tag <tr> tabel_row.appendchild(tabel_col); // menambahkan element input pada tag <td> tabel_col.appendchild(tambah); // kemudian memberikan attribute type="text" untuk form inputan tambah.setattribute('type','text'); // lalu memberikan attribute name="inputan[]" untuk form inputan tambah.setattribute('name','inputan[]'); yups sudah selesai untuk function tambah_form()-nya, mari kita coba. selanjutnya membuat function kurangi_form(), berikut codenya. function kurangi_form(){ // mencari element dengan id="formku" yaitu table

4 // mendapatkan element terakhir dari <table> yaitu <tr> terakhir var akhir=target.lastchild; // menghapus <tr> terakhir beserta element2 didalamnya target.removechild(akhir); kemudian kita coba. yups... berhasil. berikut full codenya. <html> <head> <title> Form Dinamis </title> </head> <body> <form method="post" action=""> <table id="formku"> <tr><td><input type="text" name="inputan[]"></td></tr> </table> <input type="submit" name="ok" value="submit"> </form> function tambah_form(){ var tabel_row=document.createelement("tr"); var tabel_col=document.createelement("td"); var tambah=document.createelement("input"); target.appendchild(tabel_row); tabel_row.appendchild(tabel_col); tabel_col.appendchild(tambah); tambah.setattribute('type','text'); tambah.setattribute('name','inputan[]'); function kurangi_form(){ var akhir=target.lastchild; target.removechild(akhir); </body>

5 </html> ok sekian tutorial kali ini, semoga bermanfaat, sampai jumpa dan terima kasih. Wassalamualaikum wr. wb. Tentang Penulis d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding, ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi

dokumen-dokumen yang mirip

Limitasi Text Input dengan Javascript

Limitasi Text Input dengan Javascript Oleh: d-newbie Assalamualaikum. wr.wb.sampai jumpa kembali pada kesempatan kali ini saya akan menulis tutorial tentang limitasi inputan dengan menggunakan javascript,