HTML输入-名称与id
当使用HTMLHTML输入-名称与id,html,html-input,Html,Html Input,当使用HTML标记时，使用名称和id属性之间有什么区别，特别是我发现它们有时命名相同？id必须是唯一的 …在页面DOM元素树中，因此每个控件都可以通过客户端（浏览器页面内）的id单独访问 页面中加载的Javascript脚本 页面上定义的CSS样式 在页面上使用非唯一ID仍将呈现页面，但它肯定无效。浏览器在解析无效HTML时非常宽容。但不要仅仅因为它看起来有效就这么做 名称通常是唯一的，但可以共享 …在页面DOM中，在同一类型的多个控件之间（想想单选按钮），因此当数据发布到服务器时，只发送一
名称idid- 页面中加载的Javascript脚本
- 页面上定义的CSS样式
值发布回服务器
向服务器发送数据的附录：当数据发送到服务器（通常通过HTTP POST请求）时，所有数据都以名称-值对的形式发送，其中名称是输入HTML控件的名称
，值是用户输入/选择的值。对于非Ajax请求，这总是正确的。在Ajax请求中，名称-值对可以独立于页面上的HTML输入控件，因为开发人员可以向服务器发送他们想要的任何内容。通常也会从输入控件读取值，但我只是想说，情况并非如此
当名称可以重复时
有时，在任何表单输入类型的控件之间共享名称可能是有益的。但是什么时候？您没有说明您的服务器平台可能是什么，但是如果您使用Asp.net MVC之类的工具，您可以获得自动数据验证（客户端和服务器）的好处，还可以将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配
现在假设您有这样的场景：
- 您有一个具有相同类型项列表的视图
- 用户通常一次只处理一个项目，所以他们将只输入一个项目的数据并将其发送到服务器
因此，视图的模型（因为它显示一个列表）是IEnumerable
类型，但服务器端只接受一个SomeType
类型的项
那么分享姓名呢？
每个项都被包装在自己的表单
元素中，其中的输入元素具有相同的名称，因此当数据（从任何元素）到达服务器时，它会正确绑定到控制器操作所期望的字符串类型
这个特殊的场景可以在我的迷你网站上看到。您可能不懂这种语言，但您可以查看这些多个表单和共享名称。不要介意ID
s也会重复（这违反了规则），但这是可以解决的。在这种情况下，这无关紧要。名称定义了表单提交后属性的名称。因此，如果您想稍后阅读此属性，您将在POST或GET请求中的“name”下找到它
而id用于在javascript或css中寻址字段或元素。输入上的名称
属性由其父HTML
s使用，以将该元素作为HTTP表单的成员包含在POST
请求中，或将查询字符串包含在GET
请求中
id
应该是唯一的，因为JavaScript应该使用它来选择DOM中的元素进行操作，并在CSS选择器中使用。name
是传递值时使用的名称（在url或发布的数据中）id
用于唯一标识CSS样式和JavaScript的元素
id
也可以用作锚点。在过去，HTML4.01中的：
名称属性
- 仅在以下情况下有效：
，
，
，
，
，
，
- 名称不必是唯一的，可以用于将单选按钮和复选框等元素组合在一起
- 无法在URL中引用，尽管JavaScript和PHP可以看到URL，但有一些解决方法
- 在JS中用
getElementsByName（）引用
- 与
id
属性共享相同的命名空间
- 必须以字母开头
- 根据规范，它是区分大小写的，但大多数现代浏览器似乎并不遵循这一点
- 用于表单元素以提交信息。只有带有
名称
属性的输入标记才会提交到服务器
Id属性
- 对除
，
，
，
，
，
，
以外的任何元素有效
- 在浏览器中呈现的页面中，每个Id都应该是唯一的，可能在同一个文件中，也可能不在同一个文件中
- 可以用作URL中的锚引用
- 在CSS或URL中用
#
符号引用
- 在JS中引用的是
getElementById（）
，而jQuery中引用的是$（#）
- 与名称属性共享相同的名称空间
- 必须至少包含一个字符
- 必须以字母开头
- 不得包含字母、数字、下划线（
）、破折号（-
）、冒号（：
）或句点（）以外的任何内容
- 不区分大小写
在（X）HTML5中，所有内容都是一样的，除了：
名称属性
- 在
上不再有效
- XHTML就是这么说的
<input id="message_id" name="message_name" type="text" />
$_POST["message_name"];
#message_id
{
background-color: #cccccc;
}
<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />
<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>
<!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>
<input id="fruit-1" type="checkbox" value="apple" name="myfruit[]">
<input id="fruit-2" type="checkbox" value="orange" name="myfruit[]">
$myfruit[0] == 'apple' && $myfruit[1] == 'orange'
myfruit[] apple
myfruit[] orange