Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

3 Contoh Utama Penggunaan forms collection DOM pada HTML
Ilustrasi Forms Collection DOM HTML

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 [klik], Embed Collection HTML DOM dan Fungsinya [klik], dan Mengetahui Nama Domain HTML Menggunakan Properti Domain DOM [klik].

Sintak:
document.forms

Properti: mengembalikan angka dari form pada elemen koleksi.

Baca Juga:

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.

Contoh: ilustrasi penggunaan properti length untuk menghitung jumlah dari elemen form pada collection.

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

Area Informasi Personal

Name:

Area Informasi Alamat Rumah

Address:

Area Tipe Pengiriman

Kecepatan Pengiriman:

Klik tombol untuk menghitung jumlah dari form:

Total dari jumlah form pada halaman 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 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

Area Informasi Personal

Name:

Area Informasi Alamat Rumah

Address:

Area Tipe Pengiriman

Kecepatan Pengiriman:

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

Area Informas Personal

Name:

Area Informasi Alamat Rumah

Address:

Area Tipe Pengiriman

Kecepatan Pengiriman:

Klik tombol berikut untuk menemukan nama field menggunakan form ID:

Teks pada name field adalah:


Artikel ini didedikasikan kepada: 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"

  1. Apa yang dimaksud dengan form collection pada dom html?

    BalasHapus
    Balasan
    1. Form collection berfungsi untuk mengembalikan nilai koleksi dari semua elemen < form > pada dokumen html.

      Catatan: 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.

      Hapus
  2. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan form collection pada dom html?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan form collection pada dom html:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Safari
      5. Opera

      Hapus
  3. Apa fungsi form collection pada dom html?

    BalasHapus
    Balasan
    1. form collection pada dom html digunakan untuk mengembalikan semua elemen formulir yang ada di dalam dokumen html sebagai sebuah koleksi.

      Hapus

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 -