使用HTML <input> 标签时，使用 name 和 id 属性有什么区别，特别是我发现它们有时被命名为相同？
<input>
name
id
在HTML4.01中：
Name 属性
仅对 <a> ， <form> ， <iframe> ， <img> ， <map> ， <input> ， <select> ， <textarea> 有效
<a>
<form>
<iframe>
<img>
<map>
<select>
<textarea>
名称不必是唯一的，可用于将元素组合在一起，例如单选按钮和复选框
无法在URL中引用，尽管JavaScript和PHP可以看到URL有解决方法
在JS中用 getElementsByName() 引用
getElementsByName()
与 id 属性共享相同的命名空间
必须以字母开头
根据规格区分大小写，但大多数现代浏览器似乎都不遵循这一点
用于表单元素以提交信息 . 仅将具有 name 属性的输入标记提交给服务器
Id 属性
对除 <base> ， <html> ， <head> ， <meta> ， <param> ， <script> ， <style> ， <title> 之外的任何元素均有效
<base>
<html>
<head>
<meta>
<param>
<script>
<style>
<title>
每个Id在浏览器中呈现的页面中应该是唯一的，这可能是也可能不是全部在同一个文件中
可用作URL中的锚点引用
在带有 # 符号的CSS或URL中引用
#
在JS中用 getElementById() 引用，jQuery由 $(#<id>) 引用
getElementById()
$(#<id>)
与name属性共享相同的名称空间
必须至少包含一个字符
不得包含除字母，数字，下划线（ _ ），短划线（ - ），冒号（ : ）或句点（ . ）以外的任何内容
_
-
:
.
不区分大小写
在（X）HTML5中，一切都是相同的，除了：
在 <form> 上无效
XHTML表示它必须全部小写，但大多数浏览器都不遵循这一点
对任何元素都有效
这个问题是在HTML4.01成为常态时编写的，许多浏览器和功能与今天不同 .
name属性用于发布到例如一个网络服务器 . id主要用于css（和javascript） . 假设你有这个设置：
<input id="message_id" name="message_name" type="text" />
为了在发布表单时使用PHP获取值，它将使用name-attribute，如下所示：
$_POST["message_name"];
如前所述，id用于样式，用于何时使用特定的css .
#message_id { background-color: #cccccc; }
当然，您可以对id和name-attribute使用相同的面额 . 这两个不会相互干扰 .
此外，名称可用于更多项目，例如当您使用radiobuttons时 . 然后使用名称对radiobuttons进行分组，因此您只能选择其中一个选项 .
<input id="button_1" type="radio" name="option" /> <input id="button_2" type="radio" name="option" />
在这个非常具体的案例中，我可以进一步说明如何使用id，因为你可能想要一个带有radiobutton的标签 . Label有一个for-attribute，它使用输入的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>
我想这就是它 .
...在页面DOM元素树中，因此每个控件在客户端（在浏览器页面中）由 id 999917
页面中加载了Javascript脚本
页面上定义的CSS样式
在您的页面上拥有非唯一ID仍会呈现您的页面，但它肯定无效 . 解析无效的HTML时，浏览器非常宽容 . 但不要因为看起来它有效而不这样做 .
...在同一类型的几个控件之间的页面DOM内（想想单选按钮），所以当数据被POST到服务器时，只发送一个特定的值 . 因此，当您的页面上有多个单选按钮时，即使有多个相关的单选按钮控件具有相同的 name ，也只会将所选的一个 value 发回服务器 .
value
向服务器发送数据的附录：当数据发送到服务器时（通常通过HTTP POST请求），所有数据都作为名称 - 值对发送，其中name是输入HTML控件的名称，值是输入的值/由用户选择 . 对于非Ajax请求，这始终是正确的 . 在Ajax请求中，名称 - 值对可以独立于页面上的HTML输入控件，因为开发人员可以将任何他们想要的内容发送到服务器 . 通常也会从输入控件中读取值，但我只想说这不一定是这种情况 .
在任何表单输入类型的控件之间共享名称有时可能是有益的 . 但当？您没有说明您的服务器平台可能是什么，但如果您使用像Asp.net MVC这样的东西，您将获得自动数据验证（客户端和服务器）以及将发送数据绑定到强类型的好处 . 这意味着这些名称必须匹配type属性名 .
现在假设您有这种情况：
您有一个包含相同类型项目列表的视图
用户通常一次只使用一个项目，因此他们只会输入一个项目的数据并将其发送到服务器
因此，您的视图模型（因为它显示列表）的类型为 IEnumerable<SomeType> ，但您的服务器端只接受一个类型为 SomeType 的项目 .
IEnumerable<SomeType>
SomeType
每个项目都包含在自己的 FORM 元素中，并且其中的输入元素具有相同的名称，因此当数据到达服务器（来自任何元素）时，它会正确绑定到控制器操作所期望的字符串类型 .
FORM
这个特殊情况可以在我的Creative stories迷你网站上看到 . 您将无法理解该语言，但您可以查看这些多种表单和共享名称 . 没关系 ID 也是重复的（这是一个规则违规），但这可以解决 . 在这种情况下，这无关紧要 .
ID
name 标识 form 个字段*;所以它们可以由代表这种字段的多个可能值的控件共享（单选按钮，复选框） . 它们将作为表单值的键提交 .
id 标识 DOM 个元素;所以他们可以成为CSS或Javascript的目标 .
*名称也用于标识本地锚点，但这已被弃用，'id'是目前这样做的首选方式 .
name 是传递值时使用的名称（在URL或发布的数据中） . id 用于唯一标识CSS样式和JavaScript的元素 .
id 也可以用作锚点 . 在过去， <a name 用于此，但您也应该使用 id 作为锚点 . name 仅用于发布表单数据 .
<a name
name 用于 DOM （文档对象模型）中的 form submission .
ID 专门用于 unique name 的DOM中的html控件 Javascript ＆ CSS
一旦提交表单，名称就会定义属性的名称 . 因此，如果您想稍后阅读此属性，您将在POST或GET请求中的“名称”下找到它 .
而id用于在javascript或css中添加字段或元素 .
id用于唯一标识JavaScript或CSS中的元素 .
该名称用于表单提交 . 提交表单时，只会提交带有名称的字段 .
输入的 name 属性由其父HTML <form> 用于将该元素包含为 POST 请求中HTTP表单的成员或 GET 请求中的查询字符串 .
POST
GET
id 应该是唯一的，因为JavaScript应该使用它来选择DOM中的元素进行操作并在CSS选择器中使用 .
添加对W3文档的一些实际引用，这些文档权威地解释了'name'属性在表单元素上的作用 . （对于它的 Value ，我来到这里，同时探究Stripe.js如何实现与支付网关Stripe的安全交互 . 特别是，什么原因导致表单输入元素被提交回服务器，或阻止它被提交？ ）
以下W3文档是相关的：
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元素，但不参与正常的表单提交 . （虽然'id'或其他属性当然可以被javascript用来获取表单值，然后javascript可以用于AJAX提交等等 . ）
关于以前的答案/评论者的一个奇怪的问题是关于id 's values and name'的值在同一名称空间中 . 到目前为止，我从规范中可以看出，这适用于name属性的一些弃用（不在表单元素上） . 例如https://www.w3.org/TR/html5/obsolete.html：
“作者不应该在元素上指定name属性 . 如果属性存在，则其值不能是空字符串，并且不能等于元素的主子树中除元素自身之外的任何ID的值ID，如果有的话，也不等于元素的主子树中元素的任何其他名称属性的值 . 如果该属性存在且元素有ID，则属性的值必须等于元素的ID在该语言的早期版本中，该属性旨在为URL中的片段标识符指定可能的目标 . 应该使用id属性 . “
显然，在这种特殊情况下，'a'标签的id和name值之间存在一些重叠 . 但这似乎是片段ID处理的一个特点，而不是由于id和名称的命名空间的一般共享 .
我希望您能找到以下有用的简短示例：
<!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>
在代码中，请注意两个'名称'属性是相同的，以定义'男性'或'女性'之间的选择性，但'id'不等于区分它们 .
使用相同名称的一个有趣的例子：类型为 checkbox 的 input 元素如下：
checkbox
input
<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 属性的值只被视为一串字符，而且这是一种基于0的数组的PHP语法侥幸根据POST响应中的数据顺序构建，这只是：
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这么多东西一样，只是因为它意味着它赢得了非常有用的东西 .
[
]
如果您使用的是JavaScript / CSS，则必须使用控件的“id”来应用任何CSS / JavaScript内容 .
如果使用名称，CSS将不适用于该控件 . 例如，如果您使用附加到文本框的JavaScript日历，则必须使用文本控件的id为其分配JavaScript日历 .
13 回答
在HTML4.01中：
Name 属性
仅对
<a>，<form>，<iframe>，<img>，<map>，<input>，<select>，<textarea>有效名称不必是唯一的，可用于将元素组合在一起，例如单选按钮和复选框
无法在URL中引用，尽管JavaScript和PHP可以看到URL有解决方法
在JS中用
getElementsByName()引用与
id属性共享相同的命名空间必须以字母开头
根据规格区分大小写，但大多数现代浏览器似乎都不遵循这一点
用于表单元素以提交信息 . 仅将具有
name属性的输入标记提交给服务器Id 属性
对除
<base>，<html>，<head>，<meta>，<param>，<script>，<style>，<title>之外的任何元素均有效每个Id在浏览器中呈现的页面中应该是唯一的，这可能是也可能不是全部在同一个文件中
可用作URL中的锚点引用
在带有
#符号的CSS或URL中引用在JS中用
getElementById()引用，jQuery由$(#<id>)引用与name属性共享相同的名称空间
必须至少包含一个字符
必须以字母开头
不得包含除字母，数字，下划线（
_），短划线（-），冒号（:）或句点（.）以外的任何内容不区分大小写
在（X）HTML5中，一切都是相同的，除了：
Name 属性
在
<form>上无效XHTML表示它必须全部小写，但大多数浏览器都不遵循这一点
Id 属性
对任何元素都有效
XHTML表示它必须全部小写，但大多数浏览器都不遵循这一点
这个问题是在HTML4.01成为常态时编写的，许多浏览器和功能与今天不同 .
name属性用于发布到例如一个网络服务器 . id主要用于css（和javascript） . 假设你有这个设置：
为了在发布表单时使用PHP获取值，它将使用name-attribute，如下所示：
如前所述，id用于样式，用于何时使用特定的css .
当然，您可以对id和name-attribute使用相同的面额 . 这两个不会相互干扰 .
此外，名称可用于更多项目，例如当您使用radiobuttons时 . 然后使用名称对radiobuttons进行分组，因此您只能选择其中一个选项 .
在这个非常具体的案例中，我可以进一步说明如何使用id，因为你可能想要一个带有radiobutton的标签 . Label有一个for-attribute，它使用输入的id将此标签链接到您的输入（当您单击标签时，选中该按钮） . 示例可以在下面找到
我想这就是它 .
ID必须是唯一的
...在页面DOM元素树中，因此每个控件在客户端（在浏览器页面中）由
id999917页面中加载了Javascript脚本
页面上定义的CSS样式
名称通常是唯一的，但可以共享
...在同一类型的几个控件之间的页面DOM内（想想单选按钮），所以当数据被POST到服务器时，只发送一个特定的值 . 因此，当您的页面上有多个单选按钮时，即使有多个相关的单选按钮控件具有相同的
name，也只会将所选的一个value发回服务器 .何时可以复制名称
在任何表单输入类型的控件之间共享名称有时可能是有益的 . 但当？您没有说明您的服务器平台可能是什么，但如果您使用像Asp.net MVC这样的东西，您将获得自动数据验证（客户端和服务器）以及将发送数据绑定到强类型的好处 . 这意味着这些名称必须匹配type属性名 .
现在假设您有这种情况：
您有一个包含相同类型项目列表的视图
用户通常一次只使用一个项目，因此他们只会输入一个项目的数据并将其发送到服务器
因此，您的视图模型（因为它显示列表）的类型为
IEnumerable<SomeType>，但您的服务器端只接受一个类型为SomeType的项目 .如何分享名称呢？
每个项目都包含在自己的
FORM元素中，并且其中的输入元素具有相同的名称，因此当数据到达服务器（来自任何元素）时，它会正确绑定到控制器操作所期望的字符串类型 .这个特殊情况可以在我的Creative stories迷你网站上看到 . 您将无法理解该语言，但您可以查看这些多种表单和共享名称 . 没关系
ID也是重复的（这是一个规则违规），但这可以解决 . 在这种情况下，这无关紧要 .name标识 form 个字段*;所以它们可以由代表这种字段的多个可能值的控件共享（单选按钮，复选框） . 它们将作为表单值的键提交 .id标识 DOM 个元素;所以他们可以成为CSS或Javascript的目标 .*名称也用于标识本地锚点，但这已被弃用，'id'是目前这样做的首选方式 .
name是传递值时使用的名称（在URL或发布的数据中） .id用于唯一标识CSS样式和JavaScript的元素 .id也可以用作锚点 . 在过去，<a name用于此，但您也应该使用id作为锚点 .name仅用于发布表单数据 .name 用于 DOM （文档对象模型）中的 form submission .
ID 专门用于 unique name 的DOM中的html控件 Javascript ＆ CSS
一旦提交表单，名称就会定义属性的名称 . 因此，如果您想稍后阅读此属性，您将在POST或GET请求中的“名称”下找到它 .
而id用于在javascript或css中添加字段或元素 .
id用于唯一标识JavaScript或CSS中的元素 .
该名称用于表单提交 . 提交表单时，只会提交带有名称的字段 .
输入的
name属性由其父HTML<form>用于将该元素包含为POST请求中HTTP表单的成员或GET请求中的查询字符串 .id应该是唯一的，因为JavaScript应该使用它来选择DOM中的元素进行操作并在CSS选择器中使用 .添加对W3文档的一些实际引用，这些文档权威地解释了'name'属性在表单元素上的作用 . （对于它的 Value ，我来到这里，同时探究Stripe.js如何实现与支付网关Stripe的安全交互 . 特别是，什么原因导致表单输入元素被提交回服务器，或阻止它被提交？ ）
以下W3文档是相关的：
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元素，但不参与正常的表单提交 . （虽然'id'或其他属性当然可以被javascript用来获取表单值，然后javascript可以用于AJAX提交等等 . ）
关于以前的答案/评论者的一个奇怪的问题是关于id 's values and name'的值在同一名称空间中 . 到目前为止，我从规范中可以看出，这适用于name属性的一些弃用（不在表单元素上） . 例如https://www.w3.org/TR/html5/obsolete.html：
显然，在这种特殊情况下，'a'标签的id和name值之间存在一些重叠 . 但这似乎是片段ID处理的一个特点，而不是由于id和名称的命名空间的一般共享 .
我希望您能找到以下有用的简短示例：
在代码中，请注意两个'名称'属性是相同的，以定义'男性'或'女性'之间的选择性，但'id'不等于区分它们 .
使用相同名称的一个有趣的例子：类型为
checkbox的input元素如下：至少如果PHP处理了响应，如果同时选中这两个框，则POST数据将显示：
我不知道这种数组结构是否会与其他服务器端语言一起发生，或者
name属性的值只被视为一串字符，而且这是一种基于0的数组的PHP语法侥幸根据POST响应中的数据顺序构建，这只是：不能用ID做那种技巧 . What are valid values for the id attribute in HTML?中的几个答案似乎引用了HTML 4的规范（虽然他们没有给出引用）：
所以字符
[和]在HTML4中的id或名称中都无效（它们在HTML5中可以正常使用） . 但是就像html这么多东西一样，只是因为它意味着它赢得了非常有用的东西 .如果您使用的是JavaScript / CSS，则必须使用控件的“id”来应用任何CSS / JavaScript内容 .
如果使用名称，CSS将不适用于该控件 . 例如，如果您使用附加到文本框的JavaScript日历，则必须使用文本控件的id为其分配JavaScript日历 .