Apa perbedaan antara atribut iddan name? Keduanya tampaknya memiliki tujuan yang sama untuk menyediakan pengidentifikasi.

Saya ingin tahu (khususnya berkaitan dengan formulir HTML) apakah perlu atau tidak menggunakan keduanya karena alasan apa pun.

The nameatribut digunakan saat mengirim data dalam pengiriman formulir. Kontrol yang berbeda merespons secara berbeda. Misalnya, Anda mungkin memiliki beberapa tombol radio dengan idatribut yang berbeda , tetapi sama name. Saat dikirimkan, hanya ada satu nilai dalam respons - tombol radio yang Anda pilih.

Tentu saja, ada lebih dari itu, tetapi pasti akan membuat Anda berpikir ke arah yang benar.

Gunakan nameatribut untuk kontrol formulir (seperti <input>dan <select>), karena itulah pengidentifikasi yang digunakan dalam POSTatau GETpanggilan yang terjadi pada pengiriman formulir.

Gunakan idatribut setiap kali Anda perlu mengatasi elemen HTML tertentu dengan CSS, JavaScript atau pengidentifikasi fragmen . Dimungkinkan juga untuk mencari elemen berdasarkan nama, tetapi lebih mudah dan lebih dapat diandalkan untuk mencarinya berdasarkan ID.

Berikut ini ringkasan singkatnya:

• iddigunakan untuk mengidentifikasi elemen HTML melalui Document Object Model (via JavaScript atau ditata dengan CSS). iddiharapkan menjadi unik di dalam halaman.

• namesesuai dengan elemen formulir dan mengidentifikasi apa yang diposting kembali ke server .

Lihat http://mindprod.com/jgloss/htmlforms.html#IDVSNAME ini

Apa bedanya? Jawaban singkatnya adalah, gunakan keduanya dan jangan khawatir. Tetapi jika Anda ingin memahami kekonyolan ini, inilah yang kurus:

id = adalah untuk digunakan sebagai target seperti ini: <some-element id="XXX"></some-element>untuk link seperti ini: <a href="#XXX".

name = juga digunakan untuk memberi label pada bidang-bidang dalam pesan yang dikirim ke server dengan HTTP (HyperText Transfer Protocol) GET atau POST ketika Anda menekan kirim dalam formulir.

id = memberi label pada bidang yang digunakan oleh JavaScript dan Java DOM (Document Object Model). Nama-nama dalam nama = harus unik dalam suatu formulir. Nama-nama dalam id = harus unik dalam seluruh dokumen.

Terkadang nama = dan id = nama akan berbeda, karena server mengharapkan nama yang sama dari berbagai bentuk dalam dokumen yang sama atau berbagai tombol radio dalam bentuk yang sama seperti pada contoh di atas. Id = harus unik; nama = tidak boleh.

JavaScript membutuhkan nama unik, tetapi sudah terlalu banyak dokumen di sini tanpa nama unik = nama, sehingga orang-orang W3 menemukan tag id yang harus unik. Sayangnya browser lama tidak memahaminya. Jadi, Anda membutuhkan skema penamaan di formulir Anda.

CATATAN: atribut "nama" untuk beberapa tag seperti <a>tidak didukung dalam HTML5.

Cara saya memikirkannya dan menggunakannya sederhana:

id digunakan untuk CSS dan JavaScript / jQuery (harus unik dalam satu halaman)

nama digunakan untuk penanganan formulir di PHP ketika formulir dikirimkan melalui HTML (harus unik dalam bentuk - sampai batas tertentu, lihat komentar Paul di bawah)

Tag ID - digunakan oleh CSS, tentukan instance unik dari div, span, atau elemen lainnya. Muncul dalam model DOM Javascript, memungkinkan Anda untuk mengaksesnya dengan berbagai panggilan fungsi.

Tag nama untuk bidang - Ini unik per formulir - kecuali jika Anda melakukan larik yang ingin Anda sampaikan ke pemrosesan PHP / sisi server. Anda dapat mengaksesnya melalui Javascript dengan nama, tetapi saya pikir itu tidak muncul sebagai simpul di DOM atau beberapa batasan mungkin berlaku (Anda tidak dapat menggunakan .innerHTML, misalnya, jika saya ingat dengan benar).

Secara umum, diasumsikan bahwa nama selalu digantikan oleh id . Ini benar, sampai batas tertentu, tetapi tidak untuk bidang formulir dan nama bingkai , secara praktis. Misalnya, dengan elemen formulir nameatribut digunakan untuk menentukan pasangan nama-nilai yang akan dikirim ke program sisi server dan tidak boleh dihilangkan. Browsers do not use id in that manner. Agar aman, Anda bisa menggunakan atribut nama dan id pada elemen formulir. Jadi, kami akan menulis yang berikut ini:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

Untuk memastikan kompatibilitas, memiliki nilai atribut nama dan id yang cocok ketika keduanya ditentukan adalah ide yang bagus. Namun, berhati-hatilah — beberapa tag, terutama tombol radio, harus memiliki nilai nama yang tidak unik, tetapi memerlukan nilai id yang unik. Sekali lagi, ini harus merujuk bahwa id bukan hanya pengganti nama; mereka berbeda dalam tujuannya. Selain itu, jangan mengabaikan pendekatan gaya lama, pandangan mendalam pada perpustakaan modern menunjukkan gaya sintaksis yang digunakan untuk kinerja dan kemudahan tujuan di kali. Tujuan Anda harus selalu mendukung kompatibilitas.

Sekarang di sebagian besar elemen, atribut nama telah ditinggalkan demi atribut id yang lebih umum. Namun, dalam beberapa kasus, terutama membentuk bidang ( <button>, <input>, <select>, dan <textarea>), kehidupan nama atribut pada karena terus diminta untuk mengatur pasangan nama-nilai untuk pengiriman formulir. Selain itu, kami menemukan bahwa beberapa elemen, terutama bingkai dan tautan, dapat terus menggunakan atribut nama karena sering berguna untuk mengambil elemen-elemen ini dengan nama.

Ada perbedaan yang jelas antara id dan nama. Sangat sering ketika nama berlanjut, kita dapat mengatur nilainya sama. Namun, id harus unik, dan nama dalam beberapa kasus tidak boleh — pikirkan tombol radio. Sedihnya, keunikan nilai-nilai id, walaupun tertangkap oleh validasi markup, tidak konsisten seperti yang seharusnya. Implementasi CSS di browser akan memberi style pada objek yang berbagi nilai id; dengan demikian, kami mungkin tidak menangkap kesalahan markup atau gaya yang dapat mempengaruhi JavaScript kami sampai runtime.

Ini diambil dari buku JavaScript- The Complete Reference by Thomas-Powell

nametidak digunakan lagi untuk target tautan, dan tidak valid dalam HTML5. Tidak lagi berfungsi setidaknya di Firefox terbaru (v13). Ubah <a name="hello">ke<a id="hello">

Target tidak perlu berupa <a>tag, itu bisa <p id="hello"> atau <h2 id="hello">dll. Yang sering merupakan kode yang lebih bersih.

Seperti tulisan lainnya katakan dengan jelas, namemasih digunakan (dibutuhkan) dalam bentuk. Itu juga masih digunakan dalam tag META.

<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>

Tautan ini memiliki jawaban untuk pertanyaan dasar yang sama, tetapi pada dasarnya, id digunakan untuk identifikasi skrip dan nama untuk sisi server.

http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html

name Vs id

nama

• Nama elemen. Misalnya digunakan oleh server untuk mengidentifikasi bidang dalam pengiriman formulir.
• Elemen pendukungnya adalah <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
• Nama tidak harus unik.

Indo

• Sering digunakan dengan CSS untuk menata elemen tertentu. Nilai dari atribut ini harus unik.
• Id adalah atribut Global , mereka dapat digunakan pada semua elemen, meskipun atribut mungkin tidak berpengaruh pada beberapa elemen.
• Harus unik di seluruh dokumen.
• Nilai atribut ini tidak boleh mengandung spasi putih, berbeda dengan atribut kelas, yang memungkinkan nilai yang dipisahkan ruang.
• Menggunakan karakter kecuali huruf dan angka ASCII, '_', '-' dan '.' dapat menyebabkan masalah kompatibilitas, karena mereka tidak diizinkan dalam HTML 4. Meskipun pembatasan ini telah dicabut dalam HTML 5, ID harus dimulai dengan huruf untuk kompatibilitas.

ID elemen input formulir tidak ada hubungannya dengan data yang terkandung dalam elemen. ID adalah untuk mengaitkan elemen dengan JavaScript dan CSS. Atribut nama, bagaimanapun, digunakan dalam permintaan HTTP yang dikirim oleh browser Anda ke server sebagai nama variabel yang terkait dengan data yang terkandung dalam atribut nilai.

Contohnya:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

Saat formulir dikirimkan, data formulir akan disertakan dalam tajuk HTTP seperti ini:

Jika Anda menambahkan atribut ID, itu tidak akan mengubah apa pun di header HTTP. Itu hanya akan membuatnya lebih mudah untuk menghubungkannya dengan CSS dan JavaScript.

Jika Anda tidak menggunakan metode pengiriman formulir sendiri untuk mengirim informasi ke server (dan sebaliknya melakukannya menggunakan javascript), Anda dapat menggunakan atribut nama untuk melampirkan informasi tambahan ke input - lebih tepatnya memasangkannya dengan nilai input tersembunyi, tetapi terlihat lebih rapi karena dimasukkan ke dalam input.

Bit ini saat ini masih berfungsi di Firefox meskipun saya kira di masa depan itu mungkin tidak diizinkan.

Anda dapat memiliki beberapa bidang input dengan nilai nama yang sama, selama Anda tidak berencana mengirimkan cara lama.

Berdasarkan pengalaman pribadi dan menurut deskripsi Sekolah W3 untuk atribut:

ID adalah Atribut Global dan berlaku untuk hampir semua elemen dalam HTML. Ini digunakan untuk mengidentifikasi elemen secara unik pada halaman Web, dan nilainya sebagian besar diakses dari frontend (biasanya melalui JavaScript atau jQuery).

name adalah atribut yang berguna untuk elemen tertentu (seperti elemen formulir, dll) dalam HTML. Nilainya sebagian besar dikirim ke backend untuk diproses.

https://www.w3schools.com/tags/ref_attributes.asp

Di bawah ini adalah penggunaan atribut id yang menarik. Ini digunakan di dalam tag dan digunakan untuk mengidentifikasi formulir untuk elemen di luar batas sehingga mereka akan disertakan dengan bidang lain di dalam formulir.

 <form action="action_page.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">

ID: 1) Digunakan untuk mengidentifikasi elemen HTML melalui Document Object Model (via Javascript atau ditata dengan CSS). 2) Id diharapkan unik di dalam halaman.

Nama sesuai dengan elemen formulir dan mengidentifikasi apa yang diposting kembali ke server. Contoh:

<form action="action_page.php" id="Myform">
 First name: <input type="text" name="FirstName"><br>
 <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="LastName" form="Myform">

ID digunakan untuk mengidentifikasi elemen secara unik.

Nama digunakan dalam formulir. Meskipun Anda mengirim formulir, jika Anda tidak memberikan nama apa pun, tidak ada yang akan dikirimkan. Karenanya elemen form memerlukan nama untuk diidentifikasi dengan metode form seperti "get or push".

Dan yang hanya dengan atribut nama akan keluar.

The idakan memberikan elemen id, jadi setelah Anda menulis kode nyata, (seperti JavaScript) Anda dapat menggunakan id untuk membaca elemen. Itu namehanya sebuah nama sehingga pengguna dapat melihat nama elemen, saya kira.

Contoh:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); //Reads the element that has the id "heading".
</script>

//You can also use something like this:
document.getElementById("heading").value; //Reads the value of the selected element.

Apakah ini membantu? Beri tahu saya jika ada beberapa masalah.

Tidak ada perbedaan literal antara id dan nama.

nama adalah pengidentifikasi dan digunakan dalam permintaan http yang dikirim oleh browser ke server sebagai nama variabel yang terkait dengan data yang terkandung dalam atribut nilai elemen.

Id di sisi lain adalah pengidentifikasi unik untuk browser, sisi klien dan JavaScript. Formulir karenanya membutuhkan id sementara elemen-elemennya membutuhkan nama.

id lebih khusus digunakan dalam menambahkan atribut ke elemen unik. Dalam metode DOM, Id digunakan dalam Javascript untuk mereferensikan elemen spesifik tempat Anda ingin mengambil tindakan.

Sebagai contoh:

<html>
<body>

<h1 id="demo"></h1>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

Hal yang sama dapat dicapai dengan atribut nama, tetapi lebih disukai untuk menggunakan id dalam bentuk dan nama untuk elemen bentuk kecil seperti tag input atau tag pilih.