Form dinamis dalam bentuk tabel adalah jenis formulir dinamis di mana entri-entri formulir ditampilkan dalam bentuk baris-baris tabel. Setiap baris tabel akan memiliki elemen-elemen formulir seperti input teks, pilihan, atau elemen formulir lainnya.
Form dalam bentuk tabel memudahkan pengguna untuk melihat dan mengelola entri-entri formulir secara terstruktur. Pengguna dapat menambahkan atau menghapus baris-baris formulir sesuai kebutuhan mereka. Bentuk ini umumnya digunakan ketika ada kumpulan data yang terorganisir dalam baris-baris dan pengguna perlu mengisi atau memodifikasi entri-entri tersebut.
Baca Juga: Form Dinamis dengan jQuery: Solusi Praktis untuk Kebutuhanmu!
Penjelasan Form Dinamis
Form dinamis adalah jenis formulir yang memungkinkan pengguna menambahkan atau menghapus entri/formulir secara dinamis. Hal ini berguna ketika Anda ingin mengumpulkan atau memproses data yang bervariasi atau jumlahnya tidak terbatas. Dengan formulir dinamis, pengguna dapat menambahkan entri baru sesuai kebutuhan mereka.
Form dinamis biasanya terdiri dari elemen-elemen formulir seperti input teks, pilihan, textarea, atau bahkan formulir yang lebih kompleks. Pengguna dapat menambahkan entri baru dengan mengklik tombol “Tambah” atau menghapus entri yang tidak diinginkan dengan tombol “Hapus”.
Pada umumnya, formulir dinamis menggunakan JavaScript untuk memanipulasi tampilan dan struktur formulir secara dinamis. Hal ini dapat dilakukan dengan menambahkan atau menghapus elemen HTML melalui manipulasi DOM menggunakan metode seperti appendChild() atau removeChild(). Selain itu, JavaScript juga digunakan untuk mengelola logika dan validasi data pada formulir dinamis.
Pada sisi server, data yang dikirim dari formulir dinamis biasanya diolah dengan menggunakan array atau struktur data yang sesuai untuk menangani entri-entri yang berubah jumlahnya.
Baca Juga: Menambahkan Efek Pada Elemen HTML Menggunakan jQuery
Formulir dinamis sangat berguna dalam situasi seperti pengisian formulir dengan entri multiple (misalnya, entri produk dalam keranjang belanja), pengisian formulir yang membutuhkan input tambahan (misalnya, tambah anggota keluarga), atau pengumpulan data yang membutuhkan input berulang (misalnya, survei dengan pertanyaan yang dinamis).
Dengan menggunakan formulir dinamis, Anda dapat memberikan pengalaman pengguna yang lebih fleksibel dan intuitif, sambil memudahkan pengumpulan dan pemrosesan data yang bervariasi.
Contoh Kode
Untuk membuat form dinamis di dalam tabel, Anda dapat menggunakan JavaScript dan HTML. Berikut adalah contoh implementasinya:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form in Table</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="dynamicTable">
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="field1[]"></td>
<td><input type="text" name="field2[]"></td>
<td><input type="text" name="field3[]"></td>
<td><button type="button" class="removeRow">Remove</button></td>
</tr>
</tbody>
</table>
<button type="button" id="addRow">Add Row</button>
<script>
$(document).ready(function() {
// Tambahkan baris formulir dinamis
$('#addRow').click(function() {
var newRow = '<tr>' +
'<td><input type="text" name="field1[]"></td>' +
'<td><input type="text" name="field2[]"></td>' +
'<td><input type="text" name="field3[]"></td>' +
'<td><button type="button" class="removeRow">Remove</button></td>' +
'</tr>';
$('#dynamicTable tbody').append(newRow);
});
// Hapus baris formulir dinamis
$(document).on('click', '.removeRow', function() {
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
Dalam contoh di atas, kita menggunakan jQuery untuk memudahkan manipulasi DOM. Pada awalnya, tabel memiliki satu baris dengan input field dan tombol “Remove”. Jika Anda mengklik tombol “Add Row”, maka akan ditambahkan satu baris baru dengan input field kosong. Anda dapat menambahkan sebanyak baris yang diperlukan. Setiap baris memiliki tombol “Remove” yang memungkinkan pengguna menghapus baris tersebut.
Baca Juga: Membuat Animasi Dengan jQuery
Formulir ini menggunakan input field dengan atribut name yang berakhiran [] untuk mengumpulkan nilai-nilai formulir dinamis menjadi array di sisi server saat data dikirimkan.
Anda dapat menyesuaikan tampilan dan struktur tabel sesuai kebutuhan Anda. Pastikan juga Anda telah menyertakan library jQuery melalui CDN atau sumber lainnya.
