Sự khác biệt giữa các thuộc tính id và name trong HTML


718

Sự khác biệt giữa các thuộc tính idnamelà gì? Cả hai dường như phục vụ cùng một mục đích cung cấp một định danh.

Tôi muốn biết (cụ thể liên quan đến các biểu mẫu HTML) cho dù việc sử dụng cả hai là cần thiết hay được khuyến khích vì bất kỳ lý do nào.


9
Có chủ đề rất hay về chủ đề này tại stackoverflow.com/questions/7470268/html-input-name-vs-id
Richard Logwood

Câu trả lời:


626

Các namethuộc tính được sử dụng khi gửi dữ liệu trong một trình đơn. Kiểm soát khác nhau đáp ứng khác nhau. Ví dụ: bạn có thể có một số nút radio với các idthuộc tính khác nhau , nhưng giống nhau name. Khi được gửi, chỉ có một giá trị trong phản hồi - nút radio bạn đã chọn.

Tất nhiên, có nhiều điều hơn thế, nhưng nó chắc chắn sẽ khiến bạn suy nghĩ đúng hướng.


bạn vui lòng mô tả một số ít hơn về nó..Khi được gửi, chỉ có một giá trị trong phản hồi - nút radio bạn đã chọn.
NoviceToDotNet

ngoài nút radio có sử dụng không ?? Tôi nghĩ nó nên có sự khác biệt lớn hơn thế ???
Ca ngợi thần linh

28
@Prageeth: Sự khác biệt là "tên" chuyển từ trình duyệt đến máy chủ và có thể khác với "id". Có nhiều lý do mọi người có thể muốn sự khác biệt đó. Ví dụ: ngôn ngữ / khung phía máy chủ của bạn có thể cần các giá trị được gửi để có một số tên nhất định, nhưng javascript của bạn hoạt động tốt nhất với một cái gì đó hoàn toàn khác trong id.
John Fisher

29
Nói một cách không chính thức, đó idlà những gì frontend (CSS, JS) của bạn hoạt động, trong khi đó namelà những gì máy chủ của bạn nhận được và sau đó có thể xử lý. Đây là những gì câu trả lời của Greeso nói.
Saraph

2
Có thể tốt hơn để nói: Thuộc tính name được yêu cầu khi gửi dữ liệu ... thay vì: Thuộc tính name được sử dụng khi gửi dữ liệu ... vì bất kỳ dữ liệu biểu mẫu nào thiếu thuộc tính name sẽ không được truyền đi (hoặc thực sự sẽ không được truyền được xử lý hoàn toàn theo thông số HTML)
ebyrob

332

Sử dụng namecác thuộc tính cho các điều khiển biểu mẫu (như <input><select>), vì đó là định danh được sử dụng trong POSThoặc GETcuộc gọi xảy ra khi gửi biểu mẫu.

Sử dụng idcác thuộc tính bất cứ khi nào bạn cần giải quyết một yếu tố HTML cụ thể bằng CSS, JavaScript hoặc mã định danh phân đoạn . Cũng có thể tra cứu các yếu tố theo tên, nhưng đơn giản và đáng tin cậy hơn để tìm kiếm chúng bằng ID.


2
Điều này đã được làm rõ. Vì vậy, tôi có thể suy ra, sau đó, "tên" đó gần như là một đại diện của "định danh" tham số được gửi qua máy chủ không? Câu hỏi này được trả lời một phần bởi câu trả lời được chấp nhận nhưng không được đặt trong các điều khoản đó.
Thomas

5
@Thomas: Không có sự ràng buộc cần thiết giữa nameidtất cả. Mã định danh xác định duy nhất một yếu tố HTML cụ thể trên trang. Các namethuộc tính của một phần tử dưới dạng HTML, ngược lại, không phải là duy nhất, và thường không phải là, chẳng hạn như với nút radio hoặc các trang với nhiều <form>yếu tố. Đó là truyền thống để sử dụng cùng một chuỗi cho nameidnơi cả hai được sử dụng trên một thành phần HTML duy nhất, nhưng không có gì khiến bạn làm điều này.
Warren Young

Tôi đang triển khai một textarea tùy chỉnh có thể diễn giải một số đánh dấu html, tôi đã sử dụng div nội dung có thể chỉnh sửa để thực hiện điều này. Nếu thêm một thuộc tính 'tên' cho nó, nó sẽ hành xử như vậy?
yev

125

Dưới đây là một bản tóm tắt ngắn gọn:

  • idđược sử dụng để xác định thành phần HTML thông qua Mô hình Đối tượng Tài liệu (thông qua JavaScript hoặc được tạo kiểu bằng CSS). iddự kiến ​​là duy nhất trong trang.

  • nametương ứng với phần tử biểu mẫuxác định những gì được đăng lại cho máy chủ .


27

Xem http://mindprod.com/jgloss/htmlforms.html#IDVSNAME này

Có gì khác biệt? Câu trả lời ngắn gọn là, sử dụng cả hai và đừng lo lắng về nó. Nhưng nếu bạn muốn hiểu sự ngu ngốc này, thì đây là người gầy:

id = được sử dụng làm mục tiêu như thế này: <some-element id="XXX"></some-element>cho các liên kết như thế này : <a href="#XXX".

name = cũng được sử dụng để gắn nhãn các trường trong thông báo gửi đến máy chủ có HTTP (Giao thức truyền siêu văn bản) GET hoặc POST khi bạn nhấn gửi trong một biểu mẫu.

id = nhãn các trường được sử dụng bởi JavaScript và Java DOM (Mô hình đối tượng tài liệu). Tên trong name = phải là duy nhất trong một biểu mẫu. Tên trong id = phải là duy nhất trong toàn bộ tài liệu.

Đôi khi, tên = và id = name sẽ khác nhau, bởi vì máy chủ đang mong đợi cùng tên từ các dạng khác nhau trong cùng một tài liệu hoặc các nút radio khác nhau trong cùng một hình thức như trong ví dụ trên. Id = phải là duy nhất; tên = không được.

JavaScript cần tên duy nhất, nhưng đã có quá nhiều tài liệu ở đây mà không có tên duy nhất = tên, vì vậy người W3 đã phát minh ra thẻ id được yêu cầu là duy nhất. Thật không may, các trình duyệt cũ hơn không hiểu nó. Vì vậy, bạn cần cả hai chương trình đặt tên trong các hình thức của bạn.

LƯU Ý: "tên" thuộc tính cho một số thẻ như <a>không được hỗ trợ trong HTML5.


2
Một chút bối rối ... và tôi nghĩ sai ở một số điểm. Không phải thế này: namerất quan trọng đối với <input>các thẻ trong quá <form>trình gửi vì các tham số được sử dụng trong HTTP và idchỉ đơn thuần là một định danh duy nhất
Don Cheadle

Ngoài ra, người dùng này (chưa đăng ký) đang liên kết đến trang của chính anh ấy (liên kết trên hồ sơ của anh ấy nói mindprod.com/jgloss ). Tôi không biết nếu đó là một vấn đề đối với SO nhưng với đoạn trích khá khó hiểu, nó cảm thấy không phù hợp.
zb226

23

Cách tôi nghĩ về nó và sử dụng nó rất đơn giản:

id được sử dụng cho CSS và JavaScript / jQuery (phải là duy nhất trong một trang)

Tên được sử dụng để xử lý biểu mẫu trong PHP khi một biểu mẫu được gửi qua HTML (phải là duy nhất trong một biểu mẫu - ở một mức độ nào đó, xem nhận xét của Paul bên dưới)


2
Không hoàn toàn đúng - thuộc tính Name không phải là duy nhất trong một biểu mẫu, vì nó có thể liên kết các nút radio với nhau.
Paul

4
Ngoài ra, nó có thể làm bạn ngạc nhiên, nhưng PHP không phải là ngôn ngữ máy chủ duy nhất trên thế giới.
xem sắc nét hơn

@seesharper - Thật buồn cười. Tôi thậm chí đã bình chọn cho bạn lên! Chà, vâng, điều đó không làm tôi ngạc nhiên :)
Greeso

14

Thẻ ID - được CSS sử dụng, xác định một thể hiện duy nhất của div, span hoặc các thành phần khác. Xuất hiện trong mô hình DOM DOM, cho phép bạn truy cập chúng bằng nhiều lệnh gọi chức năng khác nhau.

Thẻ tên cho các trường - Đây là duy nhất cho mỗi biểu mẫu - trừ khi bạn đang thực hiện một mảng mà bạn muốn chuyển sang xử lý phía PHP / máy chủ. Bạn có thể truy cập nó qua Javascript theo tên, nhưng tôi nghĩ rằng nó không xuất hiện dưới dạng nút trong DOM hoặc một số hạn chế có thể áp dụng (ví dụ: bạn không thể sử dụng .innerHTML, nếu tôi nhớ chính xác).


9
các nút radio phải chia sẻ cùng tên để hành xử đúng - nó không phải là duy nhất cho mỗi hình thức.
nickf

Lỗi của tôi. Mặc dù để làm rõ, đối với các kiểu nhập văn bản, vùng văn bản, v.v., thẻ tên được sử dụng để xác định chúng. Không cần thiết độc đáo.
Extrakun

12

Nói chung, người ta cho rằng tên luôn được thay thế bởi id . Điều này đúng, ở một mức độ nào đó, nhưng không phải đối với các trường mẫu và tên khung , thực tế mà nói. Ví dụ, với các phần tử biểu mẫu, namethuộc tính được sử dụng để xác định các cặp giá trị tên được gửi đến chương trình phía máy chủ và không nên loại bỏ. Browsers do not use id in that manner. Để an toàn, bạn có thể sử dụng các thuộc tính tên và id trên các thành phần của biểu mẫu. Vì vậy, chúng tôi sẽ viết như sau:

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

Để đảm bảo tính tương thích, có các giá trị thuộc tính tên và id phù hợp khi cả hai được xác định là một ý tưởng tốt. Tuy nhiên, hãy cẩn thận với một số thẻ, đặc biệt là các nút radio, phải có các giá trị tên không trùng lặp, nhưng yêu cầu các giá trị id duy nhất.Một lần nữa, điều này nên tham chiếu rằng id không chỉ đơn giản là một sự thay thế cho tên; chúng khác nhau về mục đích Hơn nữa, không giảm giá cách tiếp cận kiểu cũ, nhìn sâu vào các thư viện hiện đại cho thấy kiểu cú pháp như vậy được sử dụng cho hiệu suất và mục đích dễ dàng đôi khi. Mục tiêu của bạn phải luôn luôn ủng hộ sự tương thích.

Bây giờ trong hầu hết các yếu tố, thuộc tính name đã bị từ chối ủng hộ thuộc tính id phổ biến hơn. Tuy nhiên, trong một số trường hợp, đặc biệt là hình thành các lĩnh vực ( <button>, <input>, <select>, và <textarea>), cuộc sống tên thuộc tính trên vì nó tiếp tục được yêu cầu để thiết lập các cặp tên-giá trị nộp mẫu đơn. Ngoài ra, chúng tôi thấy rằng một số thành phần, đáng chú ý là khung và liên kết, có thể tiếp tục sử dụng thuộc tính name vì nó thường hữu ích cho việc truy xuất các thành phần này theo tên.

Có một sự phân biệt rõ ràng giữa id và tên. Rất thường khi tên tiếp tục, chúng ta có thể đặt các giá trị giống nhau. Tuy nhiên, id phải là duy nhất và tên trong một số trường hợp không nên nghĩ các nút radio. Đáng buồn thay, tính duy nhất của các giá trị id, trong khi bị bắt bởi xác thực đánh dấu, không nhất quán như mong muốn. Việc triển khai CSS trong các trình duyệt sẽ tạo kiểu cho các đối tượng có chung giá trị id; do đó, chúng tôi không thể bắt lỗi đánh dấu hoặc lỗi kiểu có thể ảnh hưởng đến JavaScript của chúng tôi cho đến khi chạy.

Điều này được lấy từ cuốn sách JavaScript- The Complete Reference by Thomas-Powell


4
Một lý do khác để không có thói quen chỉ tạo tên trùng khớp id: bạn có thể có hai biểu mẫu trên một trang cần gửi cùng một dữ liệu (ví dụ: hai trường tìm kiếm). Trong trường hợp này, namenên giống nhau (mã phía máy chủ không quan tâm đã được gửi), nhưng idphải khác nhau (vì nó phải là duy nhất trong toàn bộ trang).
IMSoP 2/2/2016

10

namekhông được dùng cho các mục tiêu liên kết và không hợp lệ trong HTML5. Nó không còn hoạt động ít nhất trong Firefox mới nhất (v13). Thay đổi <a name="hello">thành<a id="hello">

Mục tiêu không cần phải là <a>thẻ, nó có thể <p id="hello"> hoặc <h2 id="hello">vv mà thường là mã sạch hơn.

Như các bài viết khác nói rõ ràng, namevẫn được sử dụng (cần thiết) trong các hình thức. Nó cũng vẫn được sử dụng trong các thẻ META.


Bạn có nghĩa là "tên không được dùng cho thẻ liên kết" thay vì "tên không được dùng cho mục tiêu liên kết"? Trên thực tế, mục tiêu liên kết có thể là iframe. Nếu bạn không chỉ định thuộc tính tên cho iframe đó, thuộc tính đích không hoạt động cho liên kết. Hành vi đó vẫn còn cho tất cả các trình duyệt và tuân thủ HTML5.
yucer

Tôi ở đây đang cố gắng tìm ra cách tạo liên kết neo , như trong điểm đánh dấu nơi bạn đến khi bạn có một URL kết thúc bằng "#s Something". điều tốt nhất tôi có thể nói, trong html trước 4, nó phải là <a name="s Something">. Trong html 4, đó là <a name="s Something" id="s Something"> (khớp) và trong html 5, <a id="s Something">, mặc dù id có thể là "thuộc tính toàn cầu" trên mọi thứ. Điều tôi không thể tìm ra là liệu tên ngoài id có được dung thứ trong <a> trong html 5. ok thử nghiệm với bất kỳ thiết lập nào tôi có ...
FutureNerd

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

Tên

  • Tên của nguyên tố. Ví dụ được sử dụng bởi máy chủ để xác định các trường trong biểu mẫu gửi.
  • Các yếu tố hỗ trợ là <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • Tên không phải là duy nhất.

Tôi

  • Thường được sử dụng với CSS để tạo kiểu cho một phần tử cụ thể. Giá trị của thuộc tính này phải là duy nhất.
  • Id là thuộc tính toàn cầu , chúng có thể được sử dụng trên tất cả các yếu tố, mặc dù các thuộc tính có thể không có tác dụng đối với một số yếu tố.
  • Phải là duy nhất trong toàn bộ tài liệu.
  • Giá trị của thuộc tính này không được chứa khoảng trắng, ngược lại với thuộc tính lớp, cho phép các giá trị được phân tách bằng dấu cách.
  • Sử dụng các ký tự ngoại trừ các chữ cái và chữ số ASCII, '_', '-' và '.' có thể gây ra sự cố tương thích, vì chúng không được phép trong HTML 4. Mặc dù hạn chế này đã được gỡ bỏ trong HTML 5, một ID nên bắt đầu bằng một chữ cái để tương thích.

Tôi đã thấy namecác thuộc tính được sử dụng trong các yếu tố phong cách. Tôi cho rằng điều này là không hợp lệ?
Synetech

5

ID của phần tử đầu vào biểu mẫu không liên quan gì đến dữ liệu chứa trong phần tử. ID là để nối phần tử với JavaScript và CSS. Tuy nhiên, thuộc tính name được sử dụng trong yêu cầu HTTP được trình duyệt của bạn gửi đến máy chủ dưới dạng tên biến được liên kết với dữ liệu chứa trong thuộc tính value.

Ví dụ:

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

Khi biểu mẫu được gửi, dữ liệu biểu mẫu sẽ được bao gồm trong tiêu đề HTTP như thế này:

Nếu bạn thêm một thuộc tính ID, nó sẽ không thay đổi bất cứ điều gì trong tiêu đề HTTP. Nó sẽ giúp việc kết nối nó với CSS và JavaScript dễ dàng hơn.


2

Nếu bạn không sử dụng phương thức gửi riêng của biểu mẫu để gửi thông tin đến máy chủ (và thay vào đó là sử dụng javascript), bạn có thể sử dụng thuộc tính name để đính kèm thông tin bổ sung vào đầu vào - thay vì ghép nó với giá trị đầu vào bị ẩn, nhưng trông gọn gàng hơn vì nó được tích hợp vào đầu vào.

Bit này hiện vẫn hoạt động trong Firefox mặc dù tôi cho rằng trong tương lai nó có thể không được phép thông qua.

Bạn có thể có nhiều trường nhập liệu có cùng giá trị tên, miễn là bạn không định gửi theo cách cũ.


1

Dựa trên kinh nghiệm cá nhân và theo mô tả của Trường W3 cho các thuộc tính:

ID là một thuộc tính toàn cầu và áp dụng cho hầu như tất cả các yếu tố trong HTML. Nó được sử dụng để xác định duy nhất các thành phần trên trang Web và giá trị của nó chủ yếu được truy cập từ frontend (thường thông qua JavaScript hoặc jQuery).

Tên là một thuộc tính hữu ích cho các thành phần cụ thể (chẳng hạn như các thành phần biểu mẫu, v.v.) trong HTML. Giá trị của nó chủ yếu được gửi đến phụ trợ để xử lý.

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


0

Dưới đây là một cách sử dụng thú vị của thuộc tính id. Nó được sử dụng trong thẻ và được sử dụng để xác định biểu mẫu cho các thành phần bên ngoài ranh giới để chúng sẽ được bao gồm với các trường khác trong biểu mẫu.

 <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) Nó được sử dụng để xác định thành phần HTML thông qua Mô hình Đối tượng Tài liệu (thông qua Javascript hoặc được tạo kiểu bằng CSS). 2) Id dự kiến ​​là duy nhất trong trang.

Tên tương ứng với thành phần biểu mẫu và xác định những gì được đăng lại cho máy chủ. Thí dụ :

<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 được sử dụng để xác định duy nhất một yếu tố.

Tên được sử dụng trong các biểu mẫu. Mặc dù bạn gửi biểu mẫu, nếu bạn không cung cấp bất kỳ tên nào, sẽ không có gì được gửi. Do đó, các phần tử biểu mẫu cần một tên để được xác định bằng các phương thức biểu mẫu như "lấy hoặc đẩy".

Và những người chỉ có thuộc tính tên sẽ đi ra ngoài.


0

Ý idchí sẽ cung cấp cho một phần tử một id, vì vậy một khi bạn viết mã thực, (như JavaScript), bạn có thể sử dụng id để đọc các phần tử. Đây namechỉ là một cái tên để người dùng có thể thấy tên của thành phần, tôi đoán vậy.

Thí dụ:

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

Nó có hữu ích không Hãy cho tôi biết nếu có một số vấn đề.


0

Không có sự khác biệt theo nghĩa đen giữa một id và tên.

Tên là định danh và được sử dụng trong yêu cầu http được gửi bởi trình duyệt đến máy chủ dưới dạng tên biến được liên kết với dữ liệu chứa trong thuộc tính giá trị của phần tử.

Mặt khác, id là một mã định danh duy nhất cho trình duyệt, phía máy khách và dạng JavaScript. Biểu mẫu cần một id trong khi các thành phần của nó cần một tên.

id được sử dụng cụ thể hơn trong việc thêm thuộc tính vào các thành phần duy nhất. Trong các phương thức DOM, Id được sử dụng trong Javascript để tham chiếu phần tử cụ thể mà bạn muốn hành động của mình diễn ra.

Ví dụ:

<html>
<body>

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

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

Có thể đạt được điều tương tự theo thuộc tính name, nhưng nên sử dụng id ở dạng và tên cho các thành phần dạng nhỏ như thẻ đầu vào hoặc thẻ chọn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.