id和name属性之间有什么区别？两者似乎都提供标识符的目的相同。

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

评论

在stackoverflow.com/questions/7470268/html-input-name-vs-id
上有关于此主题的很好的主题

#1 楼

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

当然，它还包含更多内容，但是绝对可以使您朝正确的方向思考。 br />

评论

您能否详细说明一下它。当提交时，响应中只有一个值-您选择的单选按钮。

– NoviceToDotNet
13年3月31日在6:56
除了单选按钮以外，还有其他用途吗？我认为除此以外应该有很大的不同？

–普雷西斯·高迪（Prageeth Godage）
13年10月30日在4:23
@Prageeth：区别在于，“名称”从浏览器传输到服务器，并且可以与“ id”不同。人们可能会希望这种差异有很多原因。例如，您的服务器端语言/框架可能需要提交的值具有某些名称，但是您的JavaScript最好与id完全不同的东西一起使用。

–约翰·费舍尔
13年11月1日在22:18
简单地说，id是您的前端（CSS，JS）使用的对象，而name是您的服务器接收并可以处理的对象。这基本上就是Greeso的回答。

–萨拉夫
16 Dec 6'在8:15


最好说：发送数据时需要name属性...，而不是：发送数据时使用name属性...，因为任何缺少name属性的表单数据都不会被发送（或者实际上不会被发送）完全根据HTML规范进行了处理）

– ebyrob
19年5月9日在17:47


#2 楼

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

在需要寻址特定HTML时使用id属性CSS，JavaScript或片段标识符的元素。也可以通过名称查找元素，但是通过ID查找元素更简单，更可靠。

评论

这是非常清楚的。那么，我可以推断一下，“名称”几乎是发送到服务器的参数“标识符”的表示吗？已接受的答案部分回答了该问题，但未用这些术语表示。

–托马斯
2015年2月16日在16:18


@Thomas：名称和ID之间根本没有必要的联系。标识符唯一地标识页面上的特定HTML元素。相比之下，HTML表单元素的name属性不必是唯一的，并且通常不是唯一的，例如单选按钮或具有多个
元素的页面。传统上使用相同的字符串作为name和id，而这两个字符串都用于单个HTML元素，但是没有什么让您执行此操作。

–沃伦·杨（Warren Young）
2015年2月17日在2:31
我正在实现一个可以解释一些html标记的自定义文本区域，我使用了contentEditable div来完成此操作。如果向其添加属性“名称”，其行为是否会如此？

–是的
17/12/22在5:42

#3 楼

以下是一个简短的摘要：id用于通过Document
对象模型（通过JavaScript或CSS样式）识别HTML元素。期望id
在页面中是唯一的。


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



#4 楼

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

有什么区别？简短的答案是，请同时使用两者，不要担心。但是，如果您想了解这种愚蠢的做法，可以使用以下内容：
id =用作目标，例如：<some-element id="XXX"></some-element>以获得类似这样的链接：<a href="#XXX"。


name =还可用于在您以表单形式单击“提交”时，使用HTTP（超文本传输​​协议）GET或POST标记发送到服务器的消息中的字段。
id =标记这些字段以供JavaScript和Java DOM使用（文档对象模型）。
name =中的名称在表单中必须唯一。 id =中的名称在整个文档中必须是唯一的。
有时name =和id =的名称会有所不同，因为服务器期望同一文档中各种形式的名称相同，或者同一名称中的各个单选按钮都具有相同的名称形式如上例所示。 id =必须是唯一的；
JavaScript需要唯一的名称，但是这里已经有太多没有唯一的name =名称的文档，因此W3人们发明了唯一的id标签。不幸的是，较旧的浏览器无法理解。因此，您需要在表单中同时使用两种命名方式。

注意：HTML5中不支持诸如<a>之类的某些标记的属性“名称”。

评论

有点令人困惑...在某些方面，我认为是错误的。不是吗：名称对于提交中的标记很重要，因为HTTP中使用了参数，而id只是唯一标识符

–唐·奇德尔（Don Cheadle）
15年7月22日在15:11
另外，此（未注册）用户正在链接到自己的页面（他的个人资料上的链接为mindprod.com/jgloss）。我不知道这对SO来说不是一个问题，但是鉴于令人困惑的摘要，这感觉是不合适的。

–zb226
18-09-4在11:52


#5 楼

我思考和使用它的方式很简单：
id用于CSS和JavaScript / jQuery（在页面中必须是唯一的）
name用于在表单上在服务器上进行表单处理通过HTML提交（在形式上必须唯一-在某种程度上，请参见下面的Paul评论）

评论

并非完全正确-Name属性不必在表单中唯一，因为它可以将单选按钮链接在一起。

– Paul
15年12月15日在16:39
同样，这可能会让您感到惊讶，但是PHP并不是世界上唯一的服务器语言。

–更清晰
19年1月10日在4:01
@seesharper-真有趣。我什至投票赞成你！好吧，是的，这并不令我惊讶:)

–格里索
19年5月30日在15:12

#6 楼

ID标记-CSS使用的ID标记，定义div，span或其他元素的唯一实例。出现在Javascript DOM模型中，使您可以通过各种函数调用对其进行访问。

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

评论

单选按钮必须共享相同的名称才能正常工作-每个表单不是唯一的。

–nickf
2009年9月9日下午5:14
我的错。尽管需要澄清，但对于文本输入，文本区域等，名称标签用于标识它们。不必唯一。

– Extrakun
09年9月9日在5:23

#7 楼

通常，假定名称总是被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>


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

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

id和name之间有明显的区别。通常，当名称继续出现时，我们可以将值设置为相同。但是，id必须是唯一的，在某些情况下，名称应该不是唯一的，例如单选按钮。令人遗憾的是，虽然id值的唯一性虽然受到标记验证的约束，但却没有达到应有的一致性。浏览器中的CSS实现将为共享id值的对象设置样式；因此，直到运行时，我们才可能捕获可能影响JavaScript的标记或样式错误。

这摘自JavaScript- The Complete Reference by Thomas-Powell

评论

不要养成仅使ID匹配名称的习惯的另一个原因：您的页面上可能有两种形式需要提交相同的数据（例如，两个搜索字段）。在这种情况下，名称应相同（服务器端代码不在乎提交的是哪个），但ID必须不同（因为它在整个页面中必须是唯一的）。

–IMSoP
16-2-2在13:22


#8 楼

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


#9 楼

name已被链接目标弃用，并且在HTML5中无效。它至少在最新的Firefox（v13）中不再起作用。将<a name="hello">更改为<a id="hello">

目标不必是<a>标签，可以是<p id="hello">或<h2 id="hello">等，这通常是更干净的代码。

其他文章说显然，name仍以形式（需要）使用。它还在META标签中使用。

评论

您是说“链接标记不推荐使用名称”，而是“链接目标不推荐使用名称”吗？实际上，链接目标可以是iframe。如果您没有为该iframe指定name属性，则目标属性不适用于该链接。这种行为仍然适用于所有浏览器，并且兼容HTML5。

–yucer
2015年3月23日在11:42


我在这里试图弄清楚如何制作链接锚点，如URL的结尾以“ #something”结尾的标记。据我所知，在HTML之前的4，它必须是。在html 4中，它是（匹配），在html 5中，它是，尽管id可以是任何对象的“全局属性”。我无法弄清楚的是，HTML 5中的是否允许除ID之外的其他名称。

–FutureNerd
4月1日4:22

#10 楼

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

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

#11 楼

表单输入元素的ID与该元素中包含的数据无关。 ID用于将元素与JavaScript和CSS挂钩。但是，名称属性在浏览器发送到服务器的HTTP请求中用作与值属性中包含的数据相关联的变量名称。

例如：

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


提交表单时，表单数据将包含在HTTP标头中，如下所示：

如果添加ID属性，它将不会更改任何内容在HTTP标头中。它将使它更容易与CSS和JavaScript挂钩。

#12 楼

name Vs id

名称


元素的名称。例如，服务器用于标识表单提交中的
字段。
支持元素是<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>

名称不必唯一。

id


通常与CSS一起使用以设置特定元素的样式。此
属性的值必须唯一。
Id是全局属性，尽管
属性可能对某些元素没有影响，但它们可以在所有元素上使用。在整个文档中是唯一的。
与
类属性不同，该属性的值不能包含空格。
类属性允许使用空格分隔值。
使用除ASCII字母和数字之外的字符， '_'，'-'和'。'
可能会引起兼容性问题，因为HTML 4中不允许使用它们。
尽管HTML 5中取消了此限制，但ID应该以开头
/>，并附上字母以表示兼容性。


评论

我看到样式元素中使用了名称属性。我认为这是无效的？

– Synetech
16年1月13日，在1:22

#13 楼

如果您不使用表单本身的Submit方法将信息发送到服务器（而是使用javascript来完成），则可以使用name属性将额外的信息附加到输入中-就像将其与隐藏的输入值配对一样，但是看起来很整洁，因为它已合并到输入中。

尽管我认为将来可能不允许通过此位，但该位目前仍在Firefox中有效。

只要您不打算提交老式的方法，就可以使用多个具有相同名称值的输入字段。

#14 楼

Id：
1）它用于通过文档对象模型（通过Javascript或CSS样式）识别HTML元素。
2）ID在页面中应该是唯一的。

名称与表单元素相对应，并标识发布回服务器的内容。
示例：

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


#15 楼

根据个人经验，并根据W3学校对属性的描述：

ID是全局属性，几乎适用于HTML中的所有元素。它用于唯一地标识网页上的元素，并且其值通常是从前端访问的（通常是通过JavaScript或jQuery）。

name是对特定元素（例如，表单元素等）。它的值主要发送到后端进行处理。

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

#16 楼

ID用于唯一标识元素。

名称用于表格。尽管您提交了表格，但是如果您不提供任何名称，则不会提交任何内容。因此，表单元素需要使用“ get或push”之类的表单方法来标识名称。

仅具有name属性的那些元素就会消失。

#17 楼

以下是id属性的有趣用法。它在标记内使用，用于标识边界外元素的形式，以便它们将与表单中的其他字段一起包括。 

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


#18 楼

id将为元素提供一个ID，因此一旦您编写了真实的代码（如JavaScript），您就可以使用ID来读取元素。我猜name只是一个名称，因此用户可以看到元素的名称。

示例：

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


有帮助吗？
让我知道是否有问题。

#19 楼

id和名称之间没有字面差异。

名称是标识符，在浏览器发送到服务器的http请求中用作与元素的value属性中包含的数据关联的变量名称。 />
另一方面，id是浏览器，客户端和JavaScript的唯一标识符。因此表单需要一个id而其元素需要一个名称。

id更专门用于为唯一的元素添加属性。在DOM方法中，Id在Javascript中用于引用要对其执行操作的特定元素。

例如：

<html>
<body>

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

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


可以通过name属性实现相同的功能，但最好在表单和名称中使用id来输入小尺寸元素，例如输入标签或选择标签。