Membuat Daftar Form HTML Menggunakan Forms Collection DOM
Form Collection DOM pada html digunakan untuk mengembalikan nilai koleksi dari semua elemen <form> pada dokumen HTML. Elemen form diurutkan sesuai dengan kemunculannya pada source code.
Sintak: document.forms
Properti: Mengembalikan angka dari form pada elemen koleksi.
Sebelum memahami lebih dalam materi tentang Membuat Daftar Form HTML Menggunakan Forms Collection DOM, terlebih dahulu pelajari materi tentang: Memberikan Perintah Spesifik HTML Menggunakan execCommand DOM, Embed Collection HTML DOM dan Fungsinya, dan Mengetahui Nama Domain HTML Menggunakan Properti Domain DOM.
Properti: Mengembalikan angka dari form pada elemen koleksi.
Method: Forms collection DOM mengandung tiga method yang diperlihatkan sebagai berikut.
Contoh: Ilustrasi penggunaan properti length untuk menghitung jumlah dari elemen form pada collection. Berikut adalah ilustrasi penggunaan properti documents.forms pada HTML.
- [index]: Digunakan untuk mengembalikan elemen <form> dari indeks spesifik yang nilainya dimulai dari angka 0. Nilai NULL akan dikembalikan dari elemen <form>, jika nilai indeks berada diluar dari nilai jangkauan.
- item(index): Digunakan untuk mengembalikan elemen <form> dari indeks spesifik yang nilainya dimulai dari angka 0. Nilai NULL akan dikembalikan dari elemen <form>, jika nilai indeks berada diluar dari nilai jangkauan. Method ini akan menunjukkan performa yang sama dengan method [index].
- namedItem(id): Digunakan untuk mengembalikan elemen <form> dari koleksi yang cocok dengan id yang spesifik. Nilai NULL akan dikembalikan jika nilai id tidak ada.
<!DOCTYPE html>
<html>
<head>
<title>
Properti document.forms() DOM
</title>
</head>
<body>
<h1 style = "color:green">
Blog Elfan
</h1>
<h2>
Properti document.forms DOM
</h2>
<!-- form 1 start -->
<form id="personal-info">
<h3>
Area Informasi Personal
</h3>
Name:
<input type="text">
</form>
<!-- form 1 end -->
<!-- form 2 start -->
<form id="home-info">
<h3>
Area Informasi Alamat Rumah
</h3>
Address:
<input type="text">
</form>
<!-- form 2 end -->
<!-- form 3 start -->
<form id="delivery-info">
<h3>
Area Tipe Pengiriman
</h3>
Kecepatan Pengiriman:
<input type="text">
</form>
<!-- form 3 end -->
<p>
Klik tombol untuk menghitung
jumlah dari form:
</p>
<button onclick = "countForms()">
Hitung forms
</button>
<p>
Total dari jumlah form pada
halaman adalah:
</p>
<div class = "count"></div>
<script>
function countForms()
{
// Hitung form
let collection = document.forms.length;
document.querySelector(".count").innerHTML
= collection;
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti document.forms DOM
Klik tombol untuk menghitung jumlah dari form:
Total dari jumlah form pada halaman adalah:
Contoh:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti document.forms() DOM
</title>
</head>
<body>
<h1 style="color:green">
Blog Elfan
</h1>
<h2>
Properti document.forms DOM
</h2>
<!-- form 1 start -->
<form id = "personal-info">
<h3>
Area Informasi Personal
</h3>
Name:
<input type="text">
</form>
<!-- form 1 end -->
<!-- form 2 start -->
<form id="home-info">
<h3>
Area Informasi Alamat Rumah
</h3>
Address:
<input type="text">
</form>
<!-- form 2 end -->
<!-- form 3 start -->
<form id="delivery-info">
<h3>
Area Tipe Pengiriman
</h3>
Kecepatan Pengiriman:
<input type="text">
</form>
<!-- form 3 end -->
<p>
Klik tombol berikut untuk
menemukan semua ID form:
</p>
<button onclick="findFormIDs()">
Temukan ID form
</button>
<p>
ID dari semua form adalah:
</p>
<div class = "ids"></div>
<script>
function findFormIDs()
{
let final = '';
let collection = document.forms;
// Jalankan looping sampai
// angka dari form pada collection
for (let i = 0; i < collection.length; i++)
{
// Tambahkan setiap id form ke
// list akhir
final += `<li> ${collection[i].id} </li>`;
}
// Ganti bagian inner HTML
// dari ID div untuk
// memperlihatkan daftar
document.querySelector(".ids").innerHTML = final;
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti document.forms DOM
Klik tombol berikut untuk menemukan semua ID form:
ID dari semua form adalah:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti document.forms() DOM
</title>
</head>
<body>
<h1 style="color:green">
Blog Elfan
</h1>
<h2>
Properti document.forms DOM
</h2>
<form id="personal-info">
<h3>
Area Informas Personal
</h3>
Name:
<input type="text">
</form>
<form id="home-info">
<h3>
Area Informasi Alamat Rumah
</h3>
Address:
<input type="text">
</form>
<form id="delivery-info">
<h3>
Area Tipe Pengiriman
</h3>
Kecepatan Pengiriman:
<input type="text">
</form>
<p>
Klik tombol berikut untuk
menemukan nama field
menggunakan form ID:
</p>
<button onclick="returnForm()">
Cara Menggunakan Form ID
</button>
<p>
Teks pada name field adalah:
</p>
<div class="name"></div>
<script>
function returnForm()
{
// temukan menggunakan id dari
// 'personal-info'
let collection =
document.forms.namedItem("personal-info");
// akses elemen pertama pada
// collection dan temukan
// nilai name field-nya
let name = collection[0].value;
document.querySelector(".name").innerHTML = name;
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti document.forms DOM
Klik tombol berikut untuk menemukan nama field menggunakan form ID:
Teks pada name field adalah:
Baca Juga:
Membuat daftar formulir menggunakan koleksi formulir dalam model objek dokumen HTML (DOM) merupakan cara yang efisien untuk menangani elemen formulir dalam halaman web. Formulir di halaman web terdiri dari berbagai elemen seperti input teks, tombol, dan kotak centang yang digunakan untuk mengumpulkan data dari pengguna. Dalam konteks ini, koleksi formulir merupakan bagian penting dari model objek dokumen yang memungkinkan manipulasi dan pengelolaan elemen-elemen formulir yang ada di dalam sebuah dokumen HTML.
Koleksi formulir pada dasarnya adalah objek yang menyediakan akses ke semua elemen formulir dalam sebuah halaman web. Elemen-elemen ini dapat berupa input, area teks, tombol, dan elemen lain yang terkait dengan formulir. Koleksi ini sangat berguna bagi pengembang yang ingin memproses atau memanipulasi data yang dikumpulkan melalui formulir secara dinamis, misalnya untuk validasi, pengolahan data, atau pengiriman data ke server.
Untuk menggunakan koleksi formulir, pertama-tama penting untuk memahami bagaimana elemen formulir diatur dalam halaman HTML. Setiap elemen dalam formulir diberikan nama atau ID, yang memungkinkan pengembang untuk mengidentifikasi dan mengakses elemen tersebut melalui koleksi formulir. Koleksi formulir ini dapat diakses dengan cara merujuk langsung ke formulir yang diinginkan di dalam dokumen HTML. Misalnya, formulir dapat diakses dengan menggunakan nama formulir atau ID formulir yang telah ditetapkan dalam struktur HTML.
Setelah formulir berhasil diakses, koleksi formulir akan memberikan akses ke setiap elemen formulir di dalamnya. Pengembang dapat menggunakan koleksi ini untuk memanipulasi elemen-elemen formulir, baik untuk memperoleh nilai input, mengganti teks dalam elemen, maupun untuk menambahkan atau menghapus elemen-elemen dari formulir tersebut. Misalnya, jika formulir berisi input teks untuk nama pengguna, koleksi formulir dapat digunakan untuk mengambil nilai yang dimasukkan oleh pengguna di dalam kolom tersebut.
Penggunaan koleksi formulir juga memudahkan pengembang dalam mengelola beberapa elemen formulir sekaligus. Dalam formulir yang terdiri dari berbagai input dan tombol, pengembang dapat mengakses setiap elemen tersebut dengan cara yang terstruktur dan terorganisir, tanpa perlu menulis kode berulang kali untuk setiap elemen. Dengan demikian, pengelolaan elemen formulir menjadi lebih efisien dan lebih mudah diatur, terutama pada halaman web yang lebih kompleks dengan banyak elemen formulir.
Selain itu, koleksi formulir juga menyediakan berbagai metode dan properti yang memungkinkan pengembang untuk melakukan berbagai tindakan pada elemen-elemen formulir. Misalnya, pengembang dapat menggunakan metode untuk mengatur nilai default untuk elemen formulir, menyembunyikan atau menampilkan elemen, atau memvalidasi data yang dimasukkan oleh pengguna. Semua tindakan ini dapat dilakukan dengan lebih mudah dan cepat karena koleksi formulir memungkinkan akses langsung dan manipulasi elemen formulir secara dinamis.
Salah satu contoh aplikasi dari koleksi formulir adalah dalam pembuatan formulir pendaftaran online. Dalam formulir ini, biasanya terdapat berbagai elemen formulir, seperti nama lengkap, alamat email, nomor telepon, dan kata sandi. Setiap elemen tersebut dapat diakses dan diproses menggunakan koleksi formulir. Pengembang dapat melakukan validasi untuk memastikan bahwa semua informasi yang dimasukkan oleh pengguna telah benar dan sesuai dengan format yang diinginkan. Misalnya, untuk memastikan bahwa email yang dimasukkan sesuai dengan format email yang valid, pengembang dapat menggunakan koleksi formulir untuk memeriksa nilai input pada kolom email.
Selain itu, koleksi formulir juga memungkinkan pengembang untuk menangani pengiriman formulir secara efisien. Setelah data dikumpulkan dan divalidasi, formulir dapat dikirimkan ke server untuk diproses lebih lanjut. Pengembang dapat menggunakan metode yang disediakan oleh koleksi formulir untuk mengirimkan data formulir melalui protokol yang sesuai, misalnya menggunakan metode pengiriman HTTP. Dengan demikian, koleksi formulir tidak hanya membantu dalam pengolahan data secara lokal di halaman web, tetapi juga memungkinkan pengiriman data ke server untuk diproses lebih lanjut.
Koleksi formulir juga berfungsi dalam menangani kasus-kasus yang lebih kompleks, seperti formulir dinamis yang memungkinkan penambahan atau penghapusan elemen formulir secara langsung tanpa harus memuat ulang halaman. Dalam formulir semacam ini, koleksi formulir memainkan peran penting dengan memberikan pengembang akses untuk menambahkan elemen formulir baru, seperti input teks atau tombol, dan kemudian mengelolanya seperti elemen formulir lainnya. Hal ini memungkinkan pembuatan pengalaman pengguna yang lebih interaktif dan responsif.
Namun, meskipun koleksi formulir memberikan banyak manfaat, pengembang juga harus berhati-hati saat menggunakannya. Salah satu tantangan yang sering dihadapi adalah memastikan bahwa koleksi formulir diperbarui dengan benar setiap kali elemen formulir diubah atau ditambahkan. Ketika elemen formulir baru ditambahkan secara dinamis, koleksi formulir yang sudah ada mungkin tidak mencerminkan perubahan terbaru. Oleh karena itu, pengembang perlu memastikan bahwa koleksi formulir selalu diperbarui agar akses ke elemen formulir yang baru ditambahkan dapat dilakukan dengan benar.
Selain itu, koleksi formulir dapat menjadi sangat besar jika halaman web memiliki banyak formulir atau elemen formulir. Dalam kasus seperti ini, pengembang perlu berhati-hati agar tidak menyebabkan penurunan kinerja, terutama jika pengelolaan koleksi formulir dilakukan dalam jumlah yang besar. Salah satu cara untuk mengatasi masalah ini adalah dengan menggunakan pendekatan pengelolaan yang efisien, seperti hanya memuat dan memanipulasi elemen formulir yang benar-benar diperlukan, bukan seluruh koleksi formulir sekaligus.
Dengan segala manfaat dan tantangan yang ada, penggunaan koleksi formulir dalam pengelolaan elemen formulir pada halaman web memberikan fleksibilitas dan kemudahan dalam pengembangan aplikasi web. Kemampuan untuk mengakses, memanipulasi, dan mengelola elemen formulir secara dinamis memungkinkan pengembang untuk menciptakan pengalaman pengguna yang lebih baik dan lebih responsif. Pengelolaan formulir yang efisien sangat penting dalam pembuatan halaman web interaktif, seperti formulir pendaftaran, pencarian, dan pemesanan online. Oleh karena itu, pemahaman yang baik tentang koleksi formulir dan cara penggunaannya menjadi keterampilan penting bagi setiap pengembang web.
Melanjutkan pembahasan mengenai penggunaan koleksi formulir dalam model objek dokumen HTML, salah satu aspek penting lainnya yang perlu diperhatikan adalah interaksi antar elemen formulir. Dalam banyak kasus, elemen-elemen formulir bekerja sama untuk memberikan pengalaman pengguna yang lebih baik. Sebagai contoh, pada formulir pemesanan, terdapat beberapa elemen yang berhubungan satu sama lain, seperti pilihan produk dan jumlah yang dipesan. Pengguna dapat memilih produk yang ingin dibeli, kemudian mengatur jumlah produk yang dipesan, dan informasi ini akan dikirimkan ke server.
Penggunaan koleksi formulir sangat membantu dalam menangani jenis interaksi semacam ini. Dengan mengakses elemen-elemen formulir melalui koleksi, pengembang dapat membuat logika yang memastikan bahwa data yang dikumpulkan dari berbagai elemen formulir tetap konsisten dan saling terkait. Misalnya, jika pengguna memilih produk tertentu, nilai pada kolom jumlah dapat dihitung secara otomatis untuk memastikan bahwa stok produk tersedia sesuai dengan jumlah yang dipesan. Koleksi formulir memungkinkan pengembang untuk mengakses nilai setiap elemen formulir dan memperbarui data dengan cara yang terstruktur dan efisien.
Selain itu, koleksi formulir juga mempermudah dalam mengelola elemen formulir yang memiliki sifat opsional. Tidak semua elemen formulir selalu diperlukan dalam setiap kasus. Sebagai contoh, pada formulir pendaftaran akun, beberapa kolom seperti alamat pengiriman atau informasi tambahan mungkin bersifat opsional. Dalam hal ini, koleksi formulir memberikan kemampuan untuk memeriksa elemen-elemen tersebut dan menentukan apakah perlu diproses atau tidak berdasarkan interaksi pengguna. Pengembang dapat dengan mudah memverifikasi apakah kolom opsional telah diisi atau tidak dan membuat keputusan lebih lanjut berdasarkan informasi yang tersedia.
Dalam pengelolaan data yang lebih kompleks, seperti formulir yang berisi beberapa bagian atau langkah-langkah, koleksi formulir tetap memudahkan pengelolaan elemen-elemen yang ada. Sebagai contoh, pada formulir dengan beberapa tab atau halaman, pengguna mungkin perlu mengisi informasi dalam urutan tertentu. Pengembang dapat memanfaatkan koleksi formulir untuk memisahkan elemen-elemen formulir berdasarkan bagian atau tab, kemudian memprosesnya sesuai dengan urutan yang diinginkan. Koleksi formulir memberikan akses mudah ke elemen-elemen tersebut, sehingga pengelolaan data antar bagian formulir menjadi lebih terorganisir.
Pada beberapa halaman web yang memiliki formulir dinamis, yaitu formulir yang dapat berubah sesuai dengan kebutuhan pengguna, koleksi formulir juga memungkinkan penyesuaian elemen formulir secara real-time. Misalnya, formulir pendaftaran dapat menambahkan kolom baru berdasarkan pilihan pengguna, seperti menambahkan kolom untuk memilih opsi langganan tambahan jika pengguna memilih produk tertentu. Koleksi formulir memungkinkan elemen formulir baru ini ditambahkan, diperbarui, atau dihapus tanpa memerlukan muat ulang halaman, memberikan pengalaman yang lebih interaktif dan responsif bagi pengguna.
Meskipun begitu, ada kalanya pengelolaan elemen formulir dalam koleksi dapat menimbulkan tantangan, terutama jika halaman web tersebut sangat kompleks dan memuat banyak elemen formulir. Salah satu cara untuk mengatasi tantangan ini adalah dengan membatasi penggunaan koleksi formulir hanya pada elemen-elemen yang benar-benar relevan dengan pengolahan data tertentu. Misalnya, pengembang dapat memilih untuk hanya mengambil koleksi formulir dari bagian formulir yang sedang aktif atau relevan, sehingga tidak perlu mengelola seluruh koleksi formulir sekaligus. Pendekatan ini membantu mengurangi beban pemrosesan dan meningkatkan efisiensi dalam pengelolaan data.
Koleksi formulir juga memberikan keuntungan dalam hal konsistensi data. Dengan mengakses elemen-elemen formulir secara langsung, pengembang dapat memastikan bahwa setiap elemen formulir diisi dengan benar sebelum formulir dikirimkan. Sebagai contoh, pengembang dapat menggunakan koleksi formulir untuk memeriksa setiap kolom input, memastikan bahwa nilai yang dimasukkan sesuai dengan format yang ditentukan. Jika ada kolom yang tidak diisi dengan benar, koleksi formulir memungkinkan pengembang untuk menampilkan pesan kesalahan dan meminta pengguna untuk mengoreksi informasi yang salah.
Dalam proses pengumpulan data formulir, koleksi formulir juga memungkinkan pengembang untuk menambahkan lapisan-lapisan validasi dan pemrosesan tambahan. Sebagai contoh, setelah data dikirimkan melalui formulir, koleksi formulir dapat digunakan untuk memproses data sebelum mengirimkannya ke server. Ini sangat berguna dalam situasi dimana formulir perlu memeriksa kesesuaian data, menghapus informasi yang tidak valid, atau bahkan melakukan perhitungan berdasarkan input yang diberikan. Dalam hal ini, koleksi formulir membantu mengatur dan mengelola alur pengumpulan dan pemrosesan data formulir secara terstruktur.
Tak kalah pentingnya, penggunaan koleksi formulir juga memungkinkan pengembang untuk menyederhanakan alur kerja dengan menyediakan akses langsung ke semua elemen formulir. Tanpa koleksi formulir, pengembang akan memerlukan cara yang lebih rumit untuk mengakses setiap elemen formulir satu per satu. Hal ini dapat mengarah pada kode yang lebih panjang dan lebih rumit, serta meningkatkan risiko kesalahan dalam pengolahan data. Koleksi formulir, dengan struktur yang jelas dan konsisten, memungkinkan pengembang untuk mengelola berbagai elemen formulir dalam cara yang lebih efisien dan mudah dipahami.
Sebagai tambahan, pengembang dapat memanfaatkan koleksi formulir untuk mengelola tampilan dan interaksi elemen formulir secara lebih fleksibel. Misalnya, pengembang dapat menggunakan koleksi formulir untuk menampilkan atau menyembunyikan elemen formulir berdasarkan kondisi tertentu. Dalam situasi tertentu, seperti pengisian formulir secara bertahap atau pengisian formulir berdasarkan pilihan pengguna, koleksi formulir memungkinkan pengaturan tampilan elemen formulir sesuai dengan kebutuhan. Hal ini memberikan kebebasan lebih bagi pengembang untuk merancang formulir yang lebih dinamis dan responsif terhadap interaksi pengguna.
Kesimpulannya, koleksi formulir dalam model objek dokumen HTML menawarkan banyak manfaat bagi pengembang web dalam mengelola elemen formulir secara efisien. Dengan memanfaatkan koleksi formulir, pengembang dapat mengakses, memanipulasi, dan memproses elemen formulir dengan cara yang lebih terorganisir, meningkatkan pengalaman pengguna, serta mempermudah pengelolaan data. Meskipun terdapat beberapa tantangan dalam penggunaannya, seperti pengelolaan koleksi yang besar atau perubahan dinamis dalam elemen formulir, dengan pendekatan yang tepat, koleksi formulir tetap menjadi alat yang sangat berguna dalam pembuatan formulir web yang interaktif dan responsif.
Referensi Tambahan:
- 2 Contoh Penggunaan Method getElementsByName() DOM pada HTML
- 2 Contoh Penggunaan Method getElementsByTagName() DOM pada HTML
- 2 Contoh Penggunaan Method hasFocus() DOM pada HTML
- Cara Penggunaan Properti Head DOM pada HTML
- 3 Contoh Penggunaan Properti Image Collection DOM pada HTML
- 2 Contoh Penggunaan Properti Implementation DOM pada HTML
- 2 Contoh Penggunaan Method importNode() DOM pada HTML
Artikel ini akan dibaca oleh: Annisa Amalia, Annisa Diah Kusuma Piri, Annisa Noor Rahmawati, Antoinette Kirsten Jocelin Sugiarto, dan Arviant Dwi Andhika Gunawan.
6 komentar untuk "Membuat Daftar Form HTML Menggunakan Forms Collection DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan form collection pada dom html?
BalasHapusForm collection berfungsi untuk mengembalikan nilai koleksi dari semua elemen < form > pada dokumen html.
HapusCatatan: elemen dalam collection akan diurutkan sesuai dengan urutan kemunculannya pada kode sumber program.
Tips: gunakan elemen collection dari object form untuk mengembalikan collection dari semua elemen dalam formulir atau form.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan form collection pada dom html?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan form collection pada dom html:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Safari
5. Opera
Apa fungsi form collection pada dom html?
BalasHapusform collection pada dom html digunakan untuk mengembalikan semua elemen formulir yang ada di dalam dokumen html sebagai sebuah koleksi.
Hapus