this → Artikel Baru – ( Atrikel Lama ↓ )

3 Contoh Utama Penggunaan forms collection DOM pada HTML

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.

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.

Pahami pula, tentang semua konsep desain Web untuk tingkat pemula melalui materi lengkap HTML [klik].


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:



Baca juga, tentang materi bahasa pemrograman lainnya melalui Materi Lengkap 

Bahasa Pemrograman [klik].


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:

Komentar

  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

Posting Komentar

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

10 Aturan Utama Penggunaan Overriding pada Java

5 Cara Konversi Tipe Data pada Java

Perbedaan Antara int main() dan int main(void) pada Bahasa C

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java

6 Aturan Penting Switch Statement pada Java