HTML 输入 - 名称与 id [重复]答案

【问题标题】：HTML input - name vs. id [duplicate]HTML 输入 - 名称与 id [重复]
【发布时间】：2011-11-20 04:19:35
【问题描述】：

在使用 HTML <input> 标签时，name 和 id 属性的使用有什么区别，尤其是我发现它们有时命名相同？

【问题讨论】：

【解决方案1】：

添加一些对W3C 文档的实际引用，这些引用权威地解释了表单元素上的“名称”属性的作用。（对于它的价值，我来到这里是在探索 Stripe.js 如何实现与支付网关Stripe 的安全交互时。特别是，是什么导致表单输入元素被提交回服务器，还是阻止它被提交？）

以下 W3C 文档是相关的：

HTML 4：https://www.w3.org/TR/html401/interact/forms.html#control-name 第 17.2 节控件

HTML 5：https://www.w3.org/TR/html5/forms.html#form-submission-0 和 https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set 第 4.10.22.4 节构造表单数据集。

正如其中所解释的，当且仅当输入元素具有有效的“名称”属性时，浏览器才会提交输入元素。

正如其他人所指出的，“id”属性唯一标识 DOM 元素，但不涉及正常的表单提交。（虽然 JavaScript 当然可以使用 'id' 或其他属性来获取表单值，然后 JavaScript 可以将其用于Ajax 提交等。）

关于以前的答案/评论者的一个奇怪之处在于 id 的值和 name 的值在同一个命名空间中。据我从规范中可以看出，这适用于 name 属性的一些不推荐使用（不适用于表单元素）。例如https://www.w3.org/TR/html5/obsolete.html:

"作者不应在元素上指定 name 属性。如果该属性存在，则其值不得为空字符串，并且不得等于元素主子树中除元素自己的 ID（如果有），也不等于元素的主子树中元素上的任何其他 name 属性的值。如果此属性存在且元素具有 ID，则该属性的值必须等于元素的 ID。在该语言的早期版本中，此属性旨在为 URL 中的片段标识符指定可能的目标。应使用 id 属性。"

显然，在这种特殊情况下，“a”标签的 id 和 name 值之间存在一些重叠。但这似乎是片段 id 处理的特殊性，而不是由于 id 和名称的命名空间的一般共享。

【讨论】：

【解决方案2】：

name 用于DOM（文档对象模型）中的表单提交。

ID 用于 DOM 中 HTML 控件的唯一名称，尤其是 JavaScript 和 CSS。

【讨论】：

【解决方案3】：

如果您使用的是 JavaScript/CSS，则必须使用控件的“id”在其上应用任何 CSS/JavaScript 内容。

如果您使用 name，CSS 将不适用于该控件。例如，如果您使用附加到文本框的 JavaScript 日历，则必须使用文本控件的 id 为其分配 JavaScript 日历。

【讨论】：

在 CSS 中，您可以按属性选择 <input name="mytext" /> 可以由 input[name="mytext"] 选择。你也可以在 jQuery 中使用这个选择器。

【解决方案4】：

name 标识form字段^*；因此它们可以由代表此类字段（单选按钮、复选框）的多个可能值的控件共享。它们将作为表单值的键提交。
id 标识 DOM 元素；因此它们可以被 CSS 或 JavaScript 定位。

_{* name 也用于标识本地锚点，但这已被弃用，'id' 是当今这样做的首选方式。}

【讨论】：

【解决方案5】：

名称属性用于发布到例如网络服务器。 id 主要用于 CSS（和 JavaScript）。假设你有这样的设置：

<input id="message_id" name="message_name" type="text" />

为了在发布表单时使用 PHP 获取值，它将使用 name 属性，如下所示：

$_POST["message_name"];

id 用于样式，如前所述，当您想要使用特定的 CSS 内容时。

#message_id
{
    background-color: #cccccc;
}

当然，您可以为 id 和 name 属性使用相同的面额。这两者不会互相干扰。

此外，name 可用于更多项目，例如当您使用单选按钮时。然后使用名称对您的单选按钮进行分组，因此您只能选择其中一个选项。

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

在这个非常具体的情况下，我可以进一步说明 id 是如何使用的，因为您可能需要一个带有单选按钮的标签。 Label 有一个 for 属性，它使用您输入的 id 将此标签链接到您的输入（当您单击标签时，该按钮被选中）。可以在下面找到一个示例

<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label>
<input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>

【讨论】：

我知道它将数据发送到网络服务器，您可以将其存储在数据库中。（只是提供一些你可以做什么的例子）请原谅我在这件事上的疏忽，我已经编辑了我的答案:)
+1 用于提及 <label for> 点击聚焦功能。这仅适用于 ID 而不是名称属性。
感谢您编辑您的答案以确保正确性，我想知道将“数据库”替换为“网络服务器”而不是这样冗长的解释是否会节省您的时间。跨度>
我通常不编辑我的答案，但是当我这样做时，我选择保留原来的答案并添加脚注 :) 但是是的，它可能会节省 3 秒如果我改变了你的生活 :) 另外，像这样留下它，清楚地表明我犯的错误，这样它（希望）就不会再犯了 :)
也许你可以像这样修改它 d̶a̶t̶a̶b̶a̶s̶e̶ 网络服务器 :) 使用 <s>database</s> 标签 :)，这样人们在答案结束之前不会被误解 ;)

【解决方案6】：

在 HTML4.01 中：

名称属性

仅对<a>、<form>、<iframe>、<img>、<map>、<input>、<select>、<textarea>有效
名称不必是唯一的，可用于将元素组合在一起，例如单选按钮和复选框
无法在 URL 中引用，尽管 JavaScript 和 PHP 可以看到 URL，但有解决方法
在 JavaScript 中用 getElementsByName() 引用
与id 属性共享相同的命名空间
必须以字母开头
根据规范区分大小写，但大多数现代浏览器似乎不遵循这一点
用于表单元素以提交信息。只有带有name 属性的输入标签才会提交给服务器

Id属性

适用于除<base>、<html>、<head>、<meta>、<param>、<script>、<style>、<title> 之外的任何元素
每个 Id 在浏览器中呈现的页面中应该是唯一的，它们可能都在也可能不在同一个 文件中
可用作 URL 中的锚参考
在 CSS 或 URL 中使用 # 符号引用
在 JavaScript 中用 getElementById() 引用，在 jQuery 中被 $(#<id>) 引用
与名称属性共享相同的名称空间
必须至少包含一个字符
必须以字母开头
不得包含除字母、数字、下划线 (_)、破折号 (-)、冒号 (:) 或句点 (.) 以外的任何内容
不区分大小写

在 (X)HTML5 中，一切都一样，除了：

名称属性

在<form> 上不再有效
XHTML 规定必须全部小写，但大多数浏览器不遵循这一点

Id属性

对任何元素都有效
XHTML 规定必须全部小写，但大多数浏览器不遵循这一点

这个问题是在HTML4.01是规范的时候写的，很多浏览器和功能都和现在不一样了。

【讨论】：

请注意，此答案中的几个要点要么已过时，要么根本不正确，因此其当前形式具有误导性。
批评者指定哪些点“过时或根本不正确”以及他们的 cmets 适用于哪个 HTML 版本会很有帮助。
我希望 SO 答案包含一些关于 id 和 name 之间的区别、何时使用每个等的语义信息。
“与id 属性共享相同的命名空间”是真的吗？？
"Shares the same namespace" ...这是什么意思？ id 可能与name 属性具有相同的值（尽管要求id 是唯一的）。每个属性都照常工作，没有冲突。这表明id 和name 属性具有单独的命名空间。

【解决方案7】：

name 是传递值时使用的名称（在 URL 中或在发布的数据中）。 id 用于唯一识别 CSS 样式和 JavaScript 的元素。

id 也可以用作锚点。在过去，<a name 用于此目的，但您也应该将 id 用于锚点。 name 仅用于发布表单数据。

【讨论】：

【解决方案8】：

名称定义了表单提交后属性的名称。因此，如果您以后想阅读此属性，您将在POST 或GET 请求中的“名称”下找到它。

而 id 用于处理 JavaScript 或 CSS 中的字段或元素。

【讨论】：

【解决方案9】：

ID 必须是唯一的

...在页面 DOM 元素树内，因此每个控件都可以通过其id 在客户端（浏览器页面内）单独访问

页面中加载的 JavaScript 脚本
页面上定义的 CSS 样式

在您的网页上使用非唯一 ID 仍会呈现您的网页，但它肯定是无效的。解析无效 HTML 时，浏览器非常宽容。但不要仅仅因为看起来它有效。

名称通常是唯一的，但可以共享

...在同一类型的多个控件之间的页面 DOM 内（想想单选按钮），因此当数据将POSTed 发送到服务器时，只会发送特定值。因此，当您的页面上有多个单选按钮时，即使有多个具有相同 name 的相关单选按钮控件，也只有选定的 value 会被发送回服务器。

向服务器发送数据的附录：当数据被发送到服务器时（通常通过 HTTP POST 请求），所有数据都以 名称-值对的形式发送，其中 name 是输入 HTML 控件的 name，value 是用户输入/选择的 value。这对于非 Ajax 请求总是正确的。在 Ajax 请求中，名称-值对可以独立于页面上的 HTML 输入控件，因为开发人员可以向服务器发送他们想要的任何内容。很多时候，值也是从输入控件中读取的，但我只是想说这不一定是这种情况。

当名字可以重复时

在任何表单输入类型的控件之间共享名称有时可能是有益的。但当？您没有说明您的服务器平台可能是什么，但如果您使用 ASP.NET MVC 之类的东西，您将受益于自动数据验证（客户端和服务器）并将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配。

现在假设你有这样的场景：

您有一个包含相同类型项目列表的视图
用户通常一次只处理一项，因此他们只会单独输入一项数据并将其发送到服务器

因此，您的视图模型（因为它显示一个列表）的类型为 IEnumerable<SomeType>，但您的服务器端只接受一个类型为 SomeType 的项目。

那么名称共享怎么样？

每个项目都包含在其自己的FORM 元素中，并且其中的输入元素具有相同的名称，因此当数据（从任何元素）到达服务器时，它会正确绑定到控制器操作所期望的字符串类型。

这个特殊的场景可以在我的Creative stories 迷你网站上看到。您不会理解该语言，但您可以查看这些多种形式和共享名称。没关系IDs 也被重复（这是违反规则的），但这可以解决。在这种情况下，这无关紧要。

【讨论】：

【解决方案10】：

id 用于唯一标识 JavaScript 或 CSS 中的元素。

该名称用于表单提交。当您提交表单时，只会提交带有名称的字段。

【讨论】：

【解决方案11】：

希望以下简短示例对您有所帮助：

<!DOCTYPE html>
<html>
<head>
  <script>
    function checkGender(){
      if(document.getElementById('male').checked) {
         alert("Selected gender: "+document.getElementById('male').value)
      }else if(document.getElementById('female').checked) {
         alert("Selected gender: "+document.getElementById('female').value)
      }
      else{
         alert("Please choose your gender")
      }
    }
  </script>
</head>
<body>
<h1>Select your gender:</h1>

<form>
  <input type="radio" id="male" name="gender" value="male">Male<br>
  <input type="radio" id="female" name="gender" value="female">Female<br>
  <button onclick="checkGender()">Check gender</button> 
</form> 
</body>
</html>

在代码中，请注意，两个 'name' 属性是相同的，以定义 'male' 或 'female' 之间的可选性，但 'id' 不等于来区分它们。

【讨论】：

【解决方案12】：

使用相同名称的一个有趣案例：input 类型的元素 checkbox 像这样：

<input id="fruit-1" type="checkbox" value="apple"  name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">

至少如果响应是由 PHP 处理的，如果您同时选中两个框，您的 POST 数据将显示：

$myfruit[0] == 'apple' && $myfruit[1] == 'orange'

我不知道这种数组构造是否会在其他服务器端语言中发生，或者name 属性的值是否仅被视为字符串，这是 PHP 语法的侥幸根据 POST 响应中数据的顺序构建一个从 0 开始的数组，即：

myfruit[]       apple
myfruit[]       orange

不能用 id 做那种把戏。 What are valid values for the id attribute in HTML? 中的几个答案似乎引用了 HTML 4 的规范（尽管他们没有给出引用）：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线（“_”）、冒号（“:”）和句点（“.”）。

因此，[ 和 ] 字符在 HTML4 中的 id 或名称中均无效（它们在 HTML5 中是可以的）。但与 html 的许多东西一样，仅仅因为它无效并不意味着它不会工作或不是非常有用。

【讨论】：

【解决方案13】：

输入的 name 属性被其父 HTML <form>s 用来将该元素作为 HTTP 表单的成员包含在 POST 请求或 GET 请求中的查询字符串中。

id 应该是唯一的，因为 JavaScript 应该使用它来选择 DOM 中的元素进行操作并在 CSS 选择器中使用。

【讨论】：

s/should/MUST - 如果不是，它可能会破坏事物；至少在使用 JavaScript 时
我同意你的观点，但浏览器仍会解析页面。这是非常糟糕的做法，但不会破坏互联网。
但是页面上的interweb脚本;)
它不会中断，它会产生意想不到的后果，因为一旦找到匹配的元素，JS 就会停止搜索具有 id 的元素（参见jsfiddle.net/KED6T）
我觉得您的回答有点令人困惑，因为您将 input 元素称为表单。不懂这个概念的人可能会混淆哪些名称，哪些控件等。