Menggunakan Attribute name() dalam JavaScript

Pengenalan

Dalam JavaScript, atribut name digunakan untuk memberi nama pada elemen HTML, terutama elemen input dalam form. Atribut ini sangat berguna saat kita ingin mengelompokkan elemen, mengaksesnya dengan JavaScript, atau mengirim data dalam formulir.

Properti name sering digunakan dalam elemen seperti <input>, <textarea>, <select>, dan <form>. Dengan memahami cara menggunakannya, kita bisa lebih mudah menangani form, validasi, dan pemrosesan data di aplikasi web.

Cara Kerja Atribut name

Atribut name memungkinkan kita memberikan identitas unik ke elemen HTML dalam satu grup. Properti ini sering digunakan dalam form untuk mengelompokkan elemen dengan fungsi yang sama.

Sintaks Dasar

<input type="text" name="username">

Dalam JavaScript, kita bisa mengakses elemen dengan atribut name menggunakan metode berikut:

document.getElementsByName("username");

Metode ini mengembalikan NodeList, yaitu kumpulan elemen yang memiliki name yang sama.

Contoh Penggunaan name dalam JavaScript

1. Mengambil Elemen dengan getElementsByName()

Jika ada beberapa elemen dengan name yang sama, kita bisa mengaksesnya sebagai koleksi elemen.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

const genderInputs = document.getElementsByName("gender");
console.log(genderInputs.length); // Output: 2

Karena ada dua elemen dengan name="gender", metode ini mengembalikan NodeList dengan dua elemen.

2. Mengambil Nilai dari Elemen dengan name

Saat pengguna memilih opsi dalam radio button atau checkbox, kita bisa mendapatkan nilai yang dipilih.

function getSelectedGender() {
    const genderInputs = document.getElementsByName("gender");
    for (let i = 0; i < genderInputs.length; i++) {
        if (genderInputs[i].checked) {
            console.log("Gender yang dipilih: " + genderInputs[i].value);
        }
    }
}

Jika pengguna memilih "Male", outputnya:

Gender yang dipilih: male

3. Menggunakan name untuk Validasi Form

Atribut name sering digunakan dalam validasi form.

<form id="loginForm">
    <input type="text" name="username" placeholder="Masukkan username">
    <input type="password" name="password" placeholder="Masukkan password">
    <button type="submit">Login</button>
</form>

document.getElementById("loginForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const username = document.getElementsByName("username")[0].value;
    const password = document.getElementsByName("password")[0].value;
    
    if (username === "" || password === "") {
        alert("Username dan password tidak boleh kosong!");
    } else {
        console.log("Login berhasil!");
    }
});

Jika pengguna mencoba mengirim form tanpa mengisi username atau password, akan muncul peringatan.

4. Menggunakan name untuk Menyimpan Data dalam Form

Saat form dikirim ke server, nilai elemen dengan atribut name akan dikirim sebagai pasangan key-value.

<form action="/submit" method="post">
    <input type="text" name="email" placeholder="Masukkan email">
    <button type="submit">Kirim</button>
</form>

Saat form ini dikirim, data yang dikirimkan akan berbentuk seperti:

[email protected]

Perbedaan getElementsByName() dengan getElementById()

Kapan Menggunakan name?

✅ Jika ada beberapa elemen yang perlu dikelompokkan (misalnya radio button, checkbox).
✅ Jika ingin mengambil elemen berdasarkan grup tertentu.
✅ Jika ingin mengakses data yang akan dikirim dalam form submission.

Kesimpulan

• name digunakan untuk memberi identitas elemen dan mempermudah pengelompokan.
• Bisa diakses dalam JavaScript dengan getElementsByName().
• Sangat berguna dalam radio button, checkbox, dan input form.
• Dalam form, atribut name berperan penting dalam mengirim data ke server.
• Jika hanya perlu mengambil satu elemen, lebih baik gunakan getElementById().

Dengan memahami atribut name dan cara menggunakannya, kita bisa lebih mudah mengelola elemen dalam halaman web. Yuk, coba langsung di proyekmu!