HTML 输入 - 名称与 id [重复]
Posted
技术标签:
【中文标题】HTML 输入 - 名称与 id [重复]【英文标题】：HTML input - name vs. id [duplicate] 【发布时间】：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 在客户端（浏览器页面内）单独访问
在您的网页上使用非唯一 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 元素称为表单。不懂这个概念的人可能会混淆哪些名称，哪些控件等。以上是关于HTML 输入 - 名称与 id [重复]的主要内容，如果未能解决你的问题，请参考以下文章