HTML中id和name属性的区别

时间：2009-09-09 04:53:48

标签： html

id和name属性有什么区别？它们似乎都与提供标识符的目的相同。

我想知道（特别是关于HTML表单）是否有必要或鼓励使用两者。

20 个答案:

答案 0 :(得分：557)

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

当然，除此之外还有更多，但它肯定会让你思考正确的方向。

答案 1 :(得分：309)

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

只要您需要使用CSS，JavaScript或a fragment identifier来处理特定HTML元素，请使用id属性。也可以按名称查找元素，但是simpler and more reliable可以按ID查找元素。

答案 2 :(得分：99)

以下是摘要：

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

  • name对应表单元素，标识发布内容 回到服务器。

答案 3 :(得分：28)

请参阅此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（文档对象模型）使用的字段。   名称中的名称=在表单中必须是唯一的。 id =中的名称在整个文档中必须是唯一的。

     

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

     

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

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

答案 4 :(得分：25)

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

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

当通过HTML提交表单时，

名称用于PHP中的表单处理（在表单中必须是唯一的 - 在某种程度上，请参阅下面的Paul注释）< / p>

答案 5 :(得分：14)

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

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

答案 6 :(得分：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>

答案 7 :(得分：8)

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

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

答案 8 :(得分：8)

name已弃用于链接目标，在HTML5中无效。它至少在最新的Firefox（第13版）中不再适用。将<a name="hello">更改为<a id="hello">

目标不一定是<a>标记，可以是<p id="hello"＆gt;或<h2 id="hello">等通常更清晰的代码。

正如其他帖子所说，name仍然在表格中使用（需要）。它仍然用于META标签。

答案 9 :(得分：8)

通常，假设名称始终被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

一书

答案 10 :(得分：6)

的 name Vs id

命名

  • 元素的名称。例如，服务器用来识别 表格中的字段提交。
  • 支持元素为<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • 名称不必是唯一的。

<强> id

  • 经常与CSS一起使用来设置特定元素的样式。这个的价值 属性必须是唯一的。
  • Id是Global attributes，它们可用于所有元素，但是 属性可能对某些元素没有影响。
  • 整个文档中必须是唯一的。
  • 与此相反，此属性的值不得包含空格 class属性，它允许以空格分隔的值。
  • 使用ASCII字母和数字以外的字符，＆＃39; _＆＃39;，＆＃39; - ＆＃39;和＆＃39;。＆＃39; 可能会导致兼容性问题，因为HTML 4中不允许这样做。 虽然HTML 5中已取消此限制，但应启动ID 带有兼容性的信件。

答案 11 :(得分：4)

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

例如：

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

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

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

答案 12 :(得分：2)

<body>
<form action="">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <button>Submit!</button>
</form>
</body>

正如我们在这里看到的，“id”和“for”元素是相互关联的。如果您点击标签（用户名），则输入字段将突出显示（这对移动用户很有用，被认为是一种很好的做法）。

另一方面，“name”元素在提交表单时很有用。您在输入字段中输入的任何内容都将显示在 URL 上。 image of URL

答案 13 :(得分：2)

如果您没有使用表单自己的提交方法向服务器发送信息（而是使用javascript进行），您可以使用name属性将额外信息附加到输入 - 而不是比如将它与隐藏的输入值配对，但看起来更整洁，因为它已合并到输入中。

这个位目前仍然适用于Firefox，虽然我想将来它可能无法通过。

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

答案 14 :(得分：0)

我： 1）它用于通过文档对象模型（通过Javascript或使用CSS样式）标识HTML元素。 2）预计Id在页面内是唯一的。

Name对应于表单元素，并标识发回服务器的内容。 示例：

CRIMAF37550BFE ERROR: Error during "post-install configure" phase:
  CRIMAF37550BFE ERROR: Error executing "/bin/extattr" operation (status=2).
  See agent output log for more information: /InstallationManager/appdata/logs/native/20151011_1615.log
CRIMAD7EDE31W WARNING: com.ibm.ws.execute.iscdeploy.PostSessionActionISCDeployExecutor - getISCDeployCommand(): /usr/lpp/zWebSphere/V8R0/bin/iscdeploy.sh does not exist.
CRIMAD7EDE31W com.ibm.ws.execute.iscdeploy.PostSessionActionISCDeployExecutor - getISCDeployCommand(): /usr/lpp/zWebSphere/V8R0/bin/iscdeploy.sh does not exist.                                                                           
The 20151011_1615.log content is:

FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbo3mvs: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboboa: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbocomm: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbocorba: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbolrt: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboorb: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbooxpxy: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboras: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bborzls: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbosec: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbotots: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboujfu: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboujuu: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bbouph: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-31/bboutil: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390-common/bboacall: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbg3mvs: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgadapt: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgboa: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgcf: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgcomm: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgcorba: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbglrt: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgorb: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgoxpxy: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgras: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgrzls: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgsec: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgtots: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbguds: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgujuu: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x-64/bbgutil: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbg3mvs: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgadapt: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgboa: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgcf: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgcomm: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgcorba: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbglrt: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgorb: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgoxpxy: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgras: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgrzls: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgsec: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgtots: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbguds: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgujuu: chattr() error: rv=-1, errno=8B, rsn=092404C7
FOMF0303I /Z113/usr/lpp/zWebSphere/V8R0/lib/s390x9-64/bbgutil: chattr() error: rv=-1, errno=8B, rsn=092404C7

答案 15 :(得分：0)

以下是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">

答案 16 :(得分：0)

我曾经用于唯一标识元素的ID。

名称用于表单。甚至你提交表格的时候。如果你不提供任何名字，将不会提交任何内容。 而只有name属性的那些会出去。

答案 17 :(得分：0)

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

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

name是一个对HTML中的特定元素（如表单元素等）有用的属性。它的值主要发送到后端进行处理。

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

答案 18 :(得分：0)

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

名称是标识符，在浏览器发送到服务器的http请求中用作与元素的value属性中包含的数据相关联的变量名称。

另一方面，id是浏览器，客户端和JavaScript的唯一标识符。因此表单需要一个id，而其元素需要一个名称。

id专门用于向唯一元素添加属性。在DOM方法中，Java脚本中使用ID来引用要对其执行操作的特定元素。

例如：

<html>
<body>

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

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

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

答案 19 :(得分：0)

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.

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

相关问题
最新问题