Membuat Daftar Form HTML Menggunakan Forms Collection DOM
Properti: mengembalikan angka dari form pada elemen koleksi.
Method: forms collection DOM mengandung tiga method yang diperlihatkan sebagai berikut.
- [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.
Berikut adalah ilustrasi penggunaan properti documents.forms pada HTML.
<!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>
Blog Elfan
Properti document.forms DOM
Klik tombol untuk menghitung jumlah dari form:
Total dari jumlah form pada halaman adalah:
<!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>
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>
Blog Elfan
Properti document.forms DOM
Klik tombol berikut untuk menemukan nama field menggunakan form ID:
Teks pada name field adalah:
- 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
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 -
- Big things start from small things -
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