Perbedaan antara atribut id dan nama dalam HTML


Jawaban:


626

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.


tolong jelaskan sedikit littel tentang hal itu .. Ketika dikirimkan, hanya ada satu nilai dalam respons - tombol radio yang Anda pilih.
NoviceToDotNet

selain tombol radio apakah ada penggunaannya ?? Saya pikir itu harus memiliki perbedaan besar selain itu ???
Prageeth godage

28
@Prageeth: Perbedaannya adalah "nama" ditransfer dari browser ke server dan bisa berbeda dari "id". Ada banyak alasan mengapa orang menginginkan perbedaan itu. Misalnya, bahasa / kerangka kerja sisi server Anda mungkin memerlukan nilai yang dikirimkan untuk memiliki nama tertentu, tetapi javascript Anda berfungsi paling baik dengan sesuatu yang sama sekali berbeda di id.
John Fisher

29
Sederhananya, idapa yang digunakan oleh frontend Anda (CSS, JS), sementara nameapa yang diterima server Anda dan kemudian dapat diproses. Ini pada dasarnya apa yang dikatakan jawaban Greeso.
Saraph

2
Mungkin lebih baik untuk mengatakan: Atribut nama diperlukan saat mengirim data ... daripada: Atribut nama digunakan saat mengirim data ... karena data formulir apa pun yang hilang atribut nama tidak akan dikirim (atau memang tidak akan diproses sama sekali sesuai dengan spesifikasi HTML)
ebyrob

332

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.


2
Ini sangat mengklarifikasi. Jadi, dapatkah saya menyimpulkan, bahwa, "nama" hampir merupakan representasi dari parameter "pengidentifikasi" yang dikirim ke server? Pertanyaan ini sebagian dijawab oleh jawaban yang diterima tetapi tidak dimasukkan ke dalam istilah-istilah itu.
Thomas

5
@ Thomas: Tidak ada ikatan yang diperlukan antara namedan idsama sekali. Pengidentifikasi secara unik mengidentifikasi elemen HTML tertentu pada halaman. The nameatribut bentuk elemen HTML, sebaliknya, tidak harus unik, dan sering tidak, seperti dengan tombol radio atau halaman dengan beberapa <form>elemen. Biasanya menggunakan string yang sama untuk namedan di idmana keduanya digunakan pada elemen HTML tunggal, tetapi tidak ada yang membuat Anda melakukan ini.
Warren Young

Saya menerapkan textarea khusus yang dapat menafsirkan beberapa markup html, saya menggunakan div contentEditable untuk menyelesaikan ini. Jika menambahkan atribut 'nama' ke sana, apakah akan berperilaku seperti itu?
Tahun

125

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 .


27

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.


2
Agak membingungkan ... dan saya pikir salah dalam beberapa hal. Bukankah ini: namepenting untuk <input>tag dalam <form>kiriman karena parameter digunakan dalam HTTP, dan idhanya pengidentifikasi unik
Don Cheadle

Juga, pengguna (tidak terdaftar) ini menautkan ke halamannya sendiri (tautan pada profilnya mengatakan mindprod.com/jgloss ). Saya tidak tahu apakah itu masalah bagi SO tetapi mengingat potongan yang agak membingungkan itu terasa tidak pantas.
zb226

23

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)


2
Tidak sepenuhnya benar - atribut Name tidak harus unik dalam bentuk, karena dapat menghubungkan tombol radio bersama.
Paul

4
Juga, ini mungkin mengejutkan Anda, tetapi PHP bukan satu-satunya bahasa server di dunia.
Lihat lebih tajam

@ Seesharper - Itu lucu. Aku bahkan memilihmu! Ya, itu tidak mengejutkan saya :)
Greeso

14

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).


9
tombol radio harus memiliki nama yang sama untuk berperilaku dengan benar - itu tidak unik per formulir.
nickf

Kesalahanku. Meskipun untuk memperjelas, untuk input teks, area teks dan lain-lain, tag nama digunakan untuk mengidentifikasi mereka. Tidak perlu unik.
Extrakun

12

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


4
Alasan lain untuk tidak terbiasa membuat nama kecocokan id: Anda mungkin memiliki dua formulir pada halaman yang perlu mengirimkan data yang sama (misalnya dua bidang pencarian). Dalam hal ini, nameharus sama (kode sisi server tidak peduli yang diajukan), tetapi idharus berbeda (karena harus unik di seluruh halaman).
IMSoP

10

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.


Apakah maksud Anda "nama tidak digunakan untuk tag tautan" alih-alih "nama tidak digunakan untuk target tautan"? Faktanya, target tautan bisa berupa iframe. Jika Anda tidak menentukan atribut nama untuk iframe itu, atribut target tidak berfungsi untuk tautan tersebut. Itu behaivor masih tetap untuk semua browser dan HTML5 compliant.
Yucer

Saya di sini mencoba untuk mencari tahu bagaimana membuat link anchor , seperti dalam penanda untuk di mana Anda pergi ke ketika Anda memiliki URL yang berakhir di "#something". yang terbaik yang bisa saya katakan, dalam html sebelum 4, itu harus <a name="something">. Dalam html 4, ini adalah <a name="something" id="something"> (cocok), dan dalam html 5, <a id="something">, meskipun id dapat menjadi "atribut global" pada apa pun. Yang tidak bisa saya
pahami

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


6

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.

Saya telah melihat nameatribut yang digunakan dalam elemen gaya. Saya menganggap ini tidak valid?
Synetech

5

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.


2

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.


1

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


0

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

0

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

0

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.


0

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.


0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.