Kembali ke dasar: Apa perbedaan antara atribut HTML "id" dan "name"?

Foto oleh Maria Teneva di Unsplash

Apa peran mereka dan mengapa?

Pertanyaan-pertanyaan ini, meskipun mereka tampaknya mendasar, sangat tepat, dan tujuan dari pesan ini adalah untuk menjawabnya dengan tepat.

Jadi, yang paling sederhana (dan paling kuat) dari kedua elemen ini adalah atribut 'id'.

Atribut 'Id':

Atribut ini dianggap sebagai atribut global yang berisi atribut umum untuk semua elemen HTML - elemen HTML apa pun dapat memiliki atribut id. Menurut definisi, atribut ini dianggap sebagai pengidentifikasi unik dan harus unik di halaman HTML.

Mengapa ini

Atribut id digunakan terutama untuk akses langsung ke elemen dalam JavaScript. Contoh penggunaan:

var myElement = document.getElementById ('myelementid');

Skenario lain yang dapat digunakan (pendekatan yang lebih baik untuk menggunakan kelas yang dapat digunakan kembali, tergantung pada skenario Anda) adalah menggunakan styling CSS, seperti:

#myelementid {warna latar belakang: merah; }

Atribut nama:

Atribut nama, di sisi lain, berlaku untuk elemen HTML tertentu, seperti input, tombol, pemilihan, dan banyak lagi.

Mengapa ini

Atribut nama digunakan untuk mengirim data formulir ke server web. Ketika kami mengirimkan formulir, input, tombol, pemilihan, dll di elemen HTML Anda dikirim menggunakan atribut, bukan nama - yang sangat penting!

Pertimbangkan elemen HTML berikut:

Item ini:

  • itu adalah jenis elemen input teks, yang memungkinkan Anda untuk memasukkan karakter teks
  • Berisi teks 'superuser'
  • Atribut id memiliki nilai "nama pengguna"
  • Atribut nama berisi nilai "nama pengguna"
  • Anda dapat menghubunginya dengan:
document.getElementById ('username'). value = 'megauser';
  • Anda juga dapat berinteraksi dengan pemilih nama (OK, Anda bisa melakukan ini, tetapi disarankan untuk menggunakan atribut id karena lebih efisien):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • Anda dapat menggunakan gaya CSS dengan pemilih id:
#username {ukuran font: 700}
  • Anda juga dapat menggunakan gaya CSS dengan pemilih (Anda dapat melakukan ini, tetapi ini tidak dianjurkan karena dalam kasus ini gaya Anda melekat erat pada dokumen Anda - jika Anda mengganti nama item, gaya akan hilang.):
input [name = 'myusername'] {fill: 20px; }

Namun, ketika formulir dikirimkan ke server, atribut id tidak digunakan dan nilai atribut meningkat. Dalam hal ini, nilai input dikirim dengan nilai "superuser" serta nilai "nama" dari elemen yang sesuai - sehingga informasi yang diberikan adalah sebagai berikut:

myusername = superuser

Bisakah saya mendapatkan elemen HTML yang memiliki dua atribut ini?

Tentu saja, kedua atribut HTML ini saling melengkapi. Anda dapat menggunakan ID untuk mentransfer data ke server untuk berinteraksi dengan JavaScript atau CSS dan nama.

Dalam spesifikasi HTML 3.2 (Januari 1997), Anda dapat menemukan referensi terperinci tentang atribut dan satu-satunya referensi untuk id:

HTML tidak memiliki atribut ID, CLASS dan STYLE dalam versi ini.

Disimpulkan bahwa atribut nama pertama kali dibuat dan kemudian id.

Referensi: