HTML 中 id 和 name 属性的区别

Difference between id and name attributes in HTML

提问by yogibear

What is the difference between the idand nameattributes? They both seem to serve the same purpose of providing an identifier.

id和name属性和有什么不一样？它们似乎都用于提供标识符的相同目的。

I would like to know (specifically with regards to HTML forms) whether or not using both is necessary or encouraged for any reasons.

我想知道（特别是关于 HTML 表单）出于任何原因是否需要或鼓励同时使用两者。

采纳答案by John Fisher

The nameattribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different idattributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

name在表单提交中发送数据时使用该属性。不同的控件响应不同。例如，您可能有多个具有不同id属性的单选按钮，但相同的name. 提交后，响应中只有一个值 - 您选择的单选按钮。

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

当然，还有更多的东西，但它肯定会让你朝着正确的方向思考。

回答by Warren Young

Use nameattributes for form controls (such as <input>and <select>), as that's the identifier used in the POSTor GETcall that happens on form submission.

将name属性用于表单控件（例如<input>和<select>），因为这是在表单提交时发生的POSTorGET调用中使用的标识符。

Use idattributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier. It's possible to look up elements by name, too, but it's simpler and more reliableto look them up by ID.

id每当您需要使用 CSS、JavaScript 或片段标识符处理特定 HTML 元素时，请使用属性。也可以按名称查找元素，但按 ID 查找更简单、更可靠。

回答by Mike Buckbee

Here is a brief summary:

这里是一个简短的总结：

• idis used to identify the HTML element through the Document Object Model(via JavaScript or styled with CSS). idis expected to be unique within the page.

• namecorresponds to the formelement and identifies what is posted back to the server.

• id用于通过文档对象模型（通过 JavaScript 或使用 CSS 设置样式）识别 HTML 元素。id预计在页面内是唯一的。

• name对应于表单元素并标识回发到服务器的内容。

回答by Roedy Green

See this http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

看到这个http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

What's the difference? The short answer is, use both and don't worry about it. But if you want to understand this goofiness, here's the skinny:

id= is for use as a target like this: <some-element id="XXX"></some-element>for links like this: <a href="#XXX".

name= is also used to label the fields in the message send to a server with an HTTP (HyperText Transfer Protocol) GET or POST when you hit submit in a form.

id= labels the fields for use by JavaScript and Java DOM (Document Object Model). The names in name= must be unique within a form. The names in id= must be unique within the entire document.

Sometimes the the name= and id= names will differ, because the server is expecting the same name from various forms in the same document or various radio buttons in the same form as in the example above. The id= must be unique; the name= must not be.

JavaScript needed unique names, but there were too many documents already out here without unique name= names, so the W3 people invented the id tag that was required to be unique. Unfortunately older browsers did not understand it. So you need both naming schemes in your forms.

有什么不同？简短的回答是，同时使用两者，不要担心。但如果你想了解这种愚蠢，这里是瘦：

id= 用作这样的目标：<some-element id="XXX"></some-element>对于这样的链接：<a href="#XXX"。

当您在表单中点击提交时，name= 还用于标记通过 HTTP（超文本传输​​协议）GET 或 POST 发送到服务器的消息中的字段。

id= 标记供 JavaScript 和 Java DOM（文档对象模型）使用的字段。name= 中的名称在表单中必须是唯一的。id= 中的名称在整个文档中必须是唯一的。

有时 name= 和 id= 名称会有所不同，因为服务器期望同一文档中的各种表单或各种单选按钮的名称相同，如上例所示。id= 必须是唯一的；name= 不能是。

JavaScript 需要唯一名称，但是这里已经有太多文档没有唯一名称=名称，因此 W3 人发明了要求唯一的 id 标签。不幸的是，旧的浏览器不理解它。因此，您的表单中需要两种命名方案。

NOTE: attribute "name" for some tags like <a>is not supported in HTML5.

注意：<a>HTML5 不支持某些标签的“名称”属性。

回答by Greeso

The way I think about it and use it is simple:

我思考和使用它的方式很简单：

idis used for CSS and JavaScript/jQuery (has to be unique in a page)

id用于 CSS 和 JavaScript/jQuery（在页面中必须是唯一的）

nameis used for form handling in PHP when a form is submitted via HTML (has to be unique in a form - to some extent, see Paul's comment below)

当表单通过 HTML 提交时，名称用于 PHP 中的表单处理（在表单中必须是唯一的 - 在某种程度上，请参阅下面的Paul评论）

回答by Extrakun

ID tag - used by CSS, define a uniqueinstance of a div, span or other elements. Appears within the Javascript DOM model, allowing you to access them with various function calls.

ID 标签 - 由 CSS 使用，定义div、span 或其他元素的唯一实例。出现在 Javascript DOM 模型中，允许您通过各种函数调用访问它们。

Name tag for fields - This is unique per form-- unless you are doing an array which you want to pass to PHP/server-side processing. You can access it via Javascript by name, but I think that it does not appear as a node in the DOM or some restrictions may apply (you cannot use .innerHTML, for example, if I recall correctly).

字段的名称标签 - 每个表单都是唯一的- 除非您正在执行要传递给 PHP/服务器端处理的数组。您可以通过 Javascript 按名称访问它，但我认为它不会作为 DOM 中的节点出现，或者可能存在一些限制（例如，如果我没记错的话，您不能使用 .innerHTML）。

回答by Shirgill Farhan

Generally, it is assumed that name is always superseded by id. This is true, to some extent, but not for form fields and frame names, practically speaking. For example, with form elements the nameattribute is used to determine the name-value pairs to be sent to a server-side programand should not be eliminated. Browsers do not use id in that manner. To be on the safe side, you could use name and id attributes on form elements. So, we would write the following:

通常，假设name 总是被 id 取代。这在某种程度上是正确的，但实际上不适用于表单字段和框架名称。例如，对于表单元素，该name属性用于确定要发送到服务器端程序的名称-值对，不应将其删除。Browsers do not use id in that manner. 为了安全起见，您可以在表单元素上使用 name 和 id 属性。因此，我们将编写以下内容：

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

To ensure compatibility, having matching name and id attribute values when both are defined is a good idea. However, be careful—some tags, particularly radio buttons, must have nonunique name values, but require unique id values.Once again, this should reference that id is not simply a replacement for name; they are different in purpose. Furthermore, do not discount the old-style approach, a deep look at modern libraries shows such syntax style used for performance and ease purposes at times. Your goal should always be in favor of compatibility.

为了确保兼容性，在定义 name 和 id 属性值时具有匹配的属性值是一个好主意。但是，要小心——某些标签，尤其是单选按钮，必须具有非唯一的名称值，但需要唯一的 id 值。再一次，这应该引用 id 不仅仅是 name 的替代；他们的目的不同。此外，不要忽视旧式方法，深入研究现代库会发现这种有时用于性能和易用性目的的语法样式。您的目标应该始终是支持兼容性。

Now in most elements, the name attribute has been deprecated in favor of the more ubiquitous id attribute. However, in some cases, particularly form fields (<button>, <input>, <select>, and <textarea>), the name attribute lives on because it continues to be required to set the name-value pair for form submission. Also, we find that some elements, notably frames and links, may continue to use the name attribute because it is often useful for retrieving these elements by name.

现在在大多数元素中，名称属性已被弃用，取而代之的是更普遍的 id 属性。但是，在某些情况下，尤其是表单字段（<button>、<input>、<select>和<textarea>），名称属性仍然存在，因为它仍然需要为表单提交设置名称-值对。此外，我们发现某些元素，尤其是框架和链接，可能会继续使用 name 属性，因为它通常对于按名称检索这些元素很有用。

There is a clear distinction between id and name. Very often when name continues on, we can set the values the same. However, id must be unique, and name in some cases shouldn't—think radio buttons. Sadly, the uniqueness of id values, while caught by markup validation, is not as consistent as it should be. CSS implementation in browsers will style objects that share an id value; thus, we may not catch markup or style errors that could affect our JavaScript until runtime.

id 和 name 之间有明显的区别。通常，当 name 继续时，我们可以将值设置为相同。但是，id 必须是唯一的，而名称在某些情况下不应该是唯一的——想想单选按钮。可悲的是，id 值的唯一性虽然被标记验证捕获，但并不像它应该的那样一致。浏览器中的 CSS 实现将设置共享 id 值的对象的样式；因此，在运行之前，我们可能无法捕获可能影响 JavaScript 的标记或样式错误。

This is taken from the book JavaScript- The Complete Reference by Thomas-Powell

这是取自这本书 JavaScript- The Complete Reference by Thomas-Powell

回答by user1454923

nameis deprecated for link targets, and invalid in HTML5. It no longer works at least in latest Firefox (v13). Change <a name="hello">to<a id="hello">

name不推荐用于链接目标，在 HTML5 中无效。它至少在最新的 Firefox (v13) 中不再有效。更改<a name="hello">为<a id="hello">

The target does not need to be an <a>tag, it can be <p id="hello"> or <h2 id="hello">etc. which is often cleaner code.

目标不需要是<a>标签，它可以是<p id="hello"> 或<h2 id="hello">等等，这通常是更清晰的代码。

As other posts say clearly, nameis still used (needed) in forms. It is also still used in META tags.

正如其他帖子清楚地说明的那样，name仍然在表单中使用（需要）。它也仍然用于 META 标签。

回答by Hongtao

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

回答by James Black

This link has answers to the same basic question, but basically, id is used for scripting identification and name is for server-side.

此链接对相同的基本问题有答案，但基本上，id 用于脚本识别，而 name 用于服务器端。

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

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