当使用HTML <input>标记时，使用名称和id属性之间的区别是什么，特别是我发现它们有时命名相同?
id必须唯一
.．.在页面DOM元素树中，因此每个控件都可以通过其在客户端(浏览器页面内)上的id单独访问
页面中加载的JavaScript脚本 页面上定义的CSS样式
在页面上使用非唯一id仍然会呈现页面，但肯定是无效的。浏览器在解析无效的HTML时是很宽容的。但不要仅仅因为它看起来有效就这么做。
名字通常是唯一的，但可以共享
.．.在页面DOM中相同类型的几个控件之间(想想单选按钮)，所以当数据被post到服务器时，只有一个特定的值被发送。因此，当你的页面上有几个单选按钮时，即使有几个同名的相关单选按钮控件，也只有选中的那个按钮的值会被传回服务器。
Addendum to sending data to server: When data gets sent to server (usually by means of HTTP POST request) all data gets sent as name-value pairs where name is the name of the input HTML control and value is its value as entered/selected by the user. This is always true for non-Ajax requests. In Ajax requests name-value pairs can be independent of HTML input controls on the page, because developers can send whatever they want to the server. Quite often values are also read from input controls, but I'm just trying to say that this is not necessarily the case.
当名字可以重复的时候
在任何表单输入类型的控件之间共享名称有时可能是有益的。但当吗?你没有说明你的服务器平台可能是什么，但如果你使用ASP之类的东西。NET MVC中，您可以获得自动数据验证(客户端和服务器)的好处，还可以将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配。
现在假设你有这样的场景:
您有一个具有相同类型项列表的视图 用户通常一次处理一个项目，因此他们只会单独输入一个项目的数据并将其发送到服务器
因此，您的视图模型(因为它显示了一个列表)的类型是IEnumerable<SomeType>，但是您的服务器端只接受一个SomeType类型的项目。
那改名怎么样?
每个项都包装在自己的FORM元素中，并且其中的输入元素具有相同的名称，因此当数据到达服务器时(来自任何元素)，它会正确地绑定到控制器操作所期望的字符串类型。
这个特殊的场景可以在我的创意故事迷你网站上看到。您可能听不懂这种语言，但您可以查看那些多种表单和共享名称。不用担心id也会重复(这是违反规则的)，但这是可以解决的。在这种情况下，这无关紧要。
名称定义了表单提交后属性的名称。因此，如果您稍后想要读取此属性，您将在POST或GET请求中的“name”下找到它。
而在JavaScript或CSS中，id用于寻址字段或元素。
输入上的name属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串包含在内。
id应该是唯一的，因为JavaScript应该使用它在DOM中选择元素进行操作，并在CSS选择器中使用。
name是传递值时使用的名称(在URL中或在发布的数据中)。id用于唯一标识CSS样式和JavaScript元素。
id也可以用作锚。在过去，它使用<a名称，但您也应该对锚使用id。名称仅用于发布表单数据。
在HTML4.01:
名称属性
Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea> Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds Is referenced in JavaScript with getElementsByName() Shares the same namespace as the id attribute Must begin with a letter According to specifications is case sensitive, but most modern browsers don't seem to follow this Used on form elements to submit information. Only input tags with a name attribute are submitted to the server
Id属性
Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title> Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file Can be used as anchor reference in URL Is referenced in CSS or URL with # sign Is referenced in JavaScript with getElementById(), and jQuery by $(#<id>) Shares same name space as name attribute Must contain at least one character Must begin with a letter Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.) Is case insensitive
在(X)HTML5中，一切都是一样的，除了:
名称属性
在<form>上无效 XHTML规定必须全部小写，但大多数浏览器不遵守这一规定
Id属性
对任何元素都有效 XHTML规定必须全部小写，但大多数浏览器不遵守这一规定
这个问题是在HTML4.01是标准的时候写的，许多浏览器和功能都与今天不同。
name属性用于发布到例如web服务器。id主要用于CSS(和JavaScript)。假设你有这样的设置:
<input id="message_id" name="message_name" type="text" />
为了在发布表单时使用PHP获取该值，它将使用name属性，如下所示:
$_POST["message_name"];
如前所述，当您想使用特定的CSS内容时，id用于样式化。
#message_id
{
background-color: #cccccc;
}
当然，您可以对id和name属性使用相同的名称。这两者不会互相干扰。
此外，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>
名称标识表单字段*;因此，它们可以由表示该字段的多个可能值的控件(单选按钮、复选框)共享。它们将作为表单值的键提交。 id标识DOM元素;所以它们可以被CSS或JavaScript定位。
* name's也用于标识本地锚，但这是不赞成的，'id'是现在这样做的首选方式。
如果你使用JavaScript/CSS，你必须使用控件的“id”来应用任何CSS/JavaScript的东西。
如果使用name, CSS将不能用于该控件。例如，如果使用JavaScript日历附加到文本框，则必须使用文本控件的id为其分配JavaScript日历。
我希望下面的例子对你有帮助:
<!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'不等于以区分它们。
一个使用相同名称的有趣案例: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属性的值只被视为字符串，并且它是PHP语法的侥幸，基于0的数组根据POST响应中的数据顺序构建，这只是:
myfruit[] apple
myfruit[] orange
对身份证可不能耍这种把戏。在HTML中的id属性的有效值是什么?似乎引用了HTML 4的规范(尽管他们没有给出引用):
ID和NAME标记必须以字母([a- za -z])开头，并且可以是 后面跟着任意数量的字母，数字([0-9])，连字符(“-”)， 下划线(“_”),冒号(“:”)和时间(“。”)。
所以字符[和]在HTML4中的id或名称中都是无效的(在HTML5中是可以的)。但与html的许多东西一样，仅仅因为它是无效的并不意味着它不会工作或不是非常有用。
添加一些对W3C文档的实际引用，以权威地解释'name'属性在表单元素上的作用。(不管怎样，我是在探索Stripe.js如何与支付网关Stripe实现安全交互时来到这里的。具体来说，是什么导致表单输入元素被提交回服务器，或者阻止它被提交?)
以下W3C文档是相关的:
Section 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构造表单数据集。
如文中所述，当且仅当输入元素具有有效的'name'属性时，浏览器才会提交输入元素。
正如其他人所注意到的，'id'属性唯一地标识DOM元素，但不涉及正常的表单提交。(虽然JavaScript当然可以使用'id'或其他属性来获取表单值，然后JavaScript可以将其用于Ajax提交等等。)
关于前面的回答/评论，一个奇怪的问题是id的值和name的值在同一个名称空间中。据我所知，从规范中可以看出，这适用于name属性的一些已弃用的用法(不是在表单元素上)。例如https://www.w3.org/TR/html5/obsolete.html:
"Authors should not specify the name attribute on a elements. If the attribute is present, its value must not be the empty string and must neither be equal to the value of any of the IDs in the element's home subtree other than the element's own ID, if any, nor be equal to the value of any of the other name attributes on a elements in the element's home subtree. If this attribute is present and the element has an ID, then the attribute's value must be equal to the element's ID. In earlier versions of the language, this attribute was intended as a way to specify possible targets for fragment identifiers in URLs. The id attribute should be used instead."
显然，在这个特殊情况下，'a'标记的id值和name值之间有一些重叠。但这似乎是片段id处理的一种特性，而不是由于id和名称的命名空间普遍共享。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景
