HTMLinput – 名称与ID
当使用HTML <input>标记时， name和id属性的用法有什么区别，特别是我发现它们有时被命名为相同？
在HTML4.01中：
名称属性
- 仅在
<a>，<form>，<iframe>，<img>，<map>，<input>，<select>，<textarea> - 名称不必是唯一的，可以用来将元素分组在一起，例如单选button和checkbox
- 不能在URL中引用，尽pipeJavaScript和PHP可以看到这个URL，但有一些解决方法
- 在JS中用
getElementsByName()引用 - 与
id属性共享相同的名称空间 - 必须以字母开头
- 根据规格是区分大小写的，但大多数现代浏览器似乎并没有遵循这一点
- 用于表单元素来提交信息。 只有具有
name属性的input标签被提交给服务器
Id属性
- 除
<base>，<html>，<head>，<meta>，<param>，<script>，<style>，<title> - 在浏览器中呈现的每个ID在页面中应该是唯一的，这可能是也可能不是全部在同一个文件中
- 可以在URL中用作锚点引用
- 在CSS或URL中用
#号引用 - 在JS中用
getElementById()引用，而在$(#<id>)引用jQuery - 与名称属性共享相同的名称空间
- 必须包含至less一个字符
- 必须以字母开头
- 不得包含除字母，数字，下划线（
_），破折号（-），冒号（：）或句点（.）以外的任何内容。 - 不区分大小写
在（X）HTML5中，除了：
名称属性
- 无法在
<form>上有效 - XHTML表示它必须全部小写，但大多数浏览器并不遵循这一点
Id属性
- 对任何元素有效
- XHTML表示它必须全部小写，但大多数浏览器并不遵循这一点
这个问题是在HTML4.01是标准的时候编写的，许多浏览器和function都不同于现在。
name属性用于发布到例如web服务器。 该ID主要用于CSS（和JavaScript）。 假设你有这个设置：
<input id="message_id" name="message_name" type="text" />
为了在发布表单时获得PHP的价值，它将使用名称属性，如下所示：
$_POST["message_name"];
该id用于样式，如前所述，当你想使用特定的CSS。
#message_id { background-color: #cccccc; }
当然，你可以使用相同的面额为您的ID和名称属性。 这两个不会互相干扰。
此外，名称可以用于更多的项目，比如当你使用单选button时。 名称然后用于分组您的单选button，因此您只能select其中一个选项。
<input id="button_1" type="radio" name="option" /> <input id="button_2" type="radio" name="option" />
而在这个非常具体的情况下，我可以进一步说如何使用id，因为你可能会需要一个标签与你的单选button。 标签有一个for属性，它使用input的id将这个标签链接到你的input（当你点击标签时，button被选中）。 例子可以在下面find
<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>
我想这就是它。
ID必须是唯一的
…在页面DOM元素树中，所以每个控件都可以通过其在客户端（在浏览器页面内）的id 单独访问
- JavaScript脚本加载在页面中
- 在页面上定义的CSS样式
在您的网页上拥有不唯一的ID仍然会呈现您的网页，但它肯定无效。 浏览器在parsing无效的HTML时相当宽容。 但不要仅仅因为它看起来有效就这么做。
名称通常是唯一的，但可以共享
…在相同types的几个控件之间的页面DOM（想到单选button），所以当数据被发送到服务器时，只有一个特定的值被发送。 因此，当页面上有多个单选button时，即使有多个相同的单选button控件具有相同的name ，也只有选定的value被回送到服务器。
将数据发送到服务器的补充 ：当数据发送到服务器（通常通过HTTP POST请求）时，所有数据都会以名称 – 值对的forms发送，其中name是inputHTML控件的
name， 值是input/select的value由用户。 非Ajax请求总是如此。 在Ajax请求中，名称 – 值对可以独立于页面上的HTMLinput控件，因为开发人员可以将所需的任何内容发送到服务器。 很多时候，值也是从input控件中读取的，但我只是想说这不一定是这种情况。
当名字可以被复制
任何表单inputtypes的控件之间共享名称有时可能是有益的。 但当？ 你没有说明你的服务器平台可能是什么，但是如果你使用了像Asp.net MVC这样的东西，你可以获得自动数据validation（客户端和服务器）的好处，也可以将发送的数据绑定到强types。 这意味着这些名称必须匹配types属性名称。
现在假设你有这种情况：
- 你有一个相同types的项目列表视图
- 用户通常一次只能处理一个项目，因此他们只能将一个项目单独input数据并发送给服务器
所以你的视图的模型（因为它显示一个列表）是IEnumerable<SomeType>types的，但是你的服务器端只接受一个SomeTypetypes的单个项目。
那么名字分享怎么样？
每个项目都包装在自己的FORM元素中，其中的input元素具有相同的名称，所以当数据到达服务器（来自任何元素）时，它将正确绑定到控制器操作期望的stringtypes。
这个特殊的场景可以在我的创意故事迷你网站上看到。 你不会理解这种语言，但你可以查看这些多种forms和共享的名字。 没关系， ID也是重复的（这是违反规则），但可以解决。 在这种情况下，这并不重要。
-
name标识表单域*; 所以它们可以被代表多个可能值的控件共享（单选button，checkbox）。 它们将作为表单值的键提交。 -
id标识DOM元素; 所以他们可以通过CSS或Javascript的目标。
*名称也用于识别本地锚点，但这已被弃用，“id”是现今的首选方法。
name是传递值时使用的名称（在url中或发布的数据中）。 id用于唯一标识CSS样式和JavaScript的元素。
id也可以用作锚点。 在过去， <a name使用了<a name ，但是你也应该使用这个id作为锚点。 name只是发布表单数据。
名称用于DOM （文档对象模型）中的表单提交 。
ID用于DOM中html控件的唯一名称 ，特别适用于Javascript和CSS
表单提交后，名称将定义属性的名称。 因此，如果您想稍后阅读此属性，则可以在POST或GET请求中的“名称”下find它。
而id是用来在javascript或CSS中的字段或元素的地址。
该id用于唯一标识JavaScript或CSS中的元素。
该名称用于表单提交。 当您提交表单时，只会提交具有名称的字段。
input中的name属性由其父HTML <form> ，将该元素作为POST请求中的HTTP表单的成员或GET请求中的查询string。
id应该是唯一的，因为它应该被JavaScript用来selectDOM中的元素进行操作，并在CSSselect器中使用。
添加一些对W3文档的实际引用，权威性地解释表单元素上的“name”属性的作用。 （为了什么值得，我到达这里的时候，一直在探索Stripe.js如何工作来实现与支付网关Stripe的安全交互，尤其是什么导致表单input元素被提交回服务器，或者阻止它被提交？ ）
以下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构造表单数据集。
如其中所解释的，当且仅当浏览器具有有效的“名称”属性时才会提交input元素。
正如其他人所指出的那样，“id”属性唯一标识DOM元素，但不涉及正常的表单提交。 （尽pipe'id'或者其他属性当然可以被javascript用来获取表单值，然后这些javascript可以用于AJAX提交等。）
关于以前的答案/评论者的一个奇怪之处在于关于id的值和name的值在同一个命名空间中。 据我所知，从规格说明，这适用于一些不推荐使用的名称属性（不在表单元素）。 例如https://www.w3.org/TR/html5/obsolete.html ：
“作者不应该在元素上指定name属性，如果该属性存在，它的值不能是空string，也不能等于元素自身ID之外的元素的主子树中任何ID的值，如果有的话，也不等于元素的home子树中元素的任何其他名称属性的值，如果该属性存在且元素有ID，则属性的值必须等于元素的ID。在早期版本的语言中，这个属性是用来指定URL中片段标识符的可能的目标，而应该使用id属性。
显然，在这种特殊情况下，'a'标签的id和name值之间有一些重叠。 但这似乎是处理片段ID的一个特殊性，而不是由于ID和名称的名称空间的普遍共享。
我希望你能find以下简单的例子有用：
<!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>
在代码中，请注意，两个“名称”属性是相同的，以定义“男性”或“女性”之间的select性，但“ID不等于区分他们。
使用相同名称的一个有趣的例子：像这样的checkbox input元素：
<input id="fruit-1" type="checkbox" value="apple" name="myfruit[]"> <input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">
至less如果响应是由PHP处理的，如果您选中了这两个框，那么您的POST数据将显示：
$myfruit[0] == 'apple' && $myfruit[1] == 'orange'
我不知道这种types的数组构造是否会发生在其他服务器端语言中，或者如果name属性的值只被看作是一串字符，而PHP语法就是一个基于0的数组根据POST响应中的数据顺序构build，这只是：
myfruit[] apple myfruit[] orange
不能用ID做这种伎俩。 几个答案什么是HTML中的id属性的有效值？ 似乎引用了HTML 4的规范（虽然他们不提供引用）：
ID和NAME标记必须以字母（[A-Za-z]）开始，后面跟随任意数量的字母，数字（[0-9]），连字符（“ – ”），下划线（“_”） ，冒号（“：”）和句点（“。”）。
因此，字符[和]在HTML4中的ID或名称中都是无效的（HTML5中它们都可以）。 但是，像html这样的东西，只是因为它不是有效的，并不意味着它不会工作，或者是不是非常有用。
如果您使用的是JavaScript / css，那么您必须使用控件的“id”来对其应用任何CSS / JavaScript的东西。
如果您使用名称CSS不会为该控件工作。 作为一个例子，如果你使用JavaScript日历附加到文本框，那么你必须使用文本控件的id来为其分配JavaScript日历。
