HTML输入-名称vs. id

当使用HTML <input>标记时，使用name和id属性之间的区别是什么，特别是我发现它们有时被命名为相同的?

416191 次浏览
小开

id必须唯一

.．.在页面DOM元素树中，因此每个控件在客户端(在浏览器页面内)是单独访问 by它的id by

  • 页面中加载的JavaScript脚本
  • 页面上定义的CSS样式

在页面上使用非唯一id仍然会呈现页面，但肯定是无效的。浏览器在解析无效的HTML时是很宽容的。但不要仅仅因为似乎就这样做。

名字通常是唯一的，但可以共享

.．.在页面DOM中相同类型的几个控件之间(考虑单选按钮)，因此当数据获得发布到服务器时，只有一个特定的值被发送。因此，当你的页面上有几个单选按钮时，即使有几个相关的单选按钮控件具有相同的name，也只有选中的value被发布回服务器。

发送数据到服务器的附录:当数据被发送到服务器(通常是通过HTTP POST请求)，所有数据被发送为名称-值对，其中的名字是输入HTML控件的name， 价值是用户输入/选择的value。对于非ajax请求总是如此。在Ajax请求中，名称-值对可以独立于页面上的HTML输入控件，因为开发人员可以向服务器发送他们想要的任何东西。通常，值也从输入控件中读取，但我只是想说，情况不一定如此。

当名字可以重复的时候

在任何表单输入类型的控件之间共享名称有时可能是有益的。但当吗?您没有说明您的服务器平台可能是什么，但是如果您使用ASP。NET MVC这样的平台，就可以获得自动数据验证(客户端和服务器)的好处，还可以将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配。

现在假设你有这样的场景:

  • 您有一个具有相同类型项列表的视图
  • 用户通常一次处理一个项目，因此他们只会单独输入一个项目的数据并将其发送到服务器

因此，您的视图模型(因为它显示了一个列表)的类型是IEnumerable<SomeType>，但是您的服务器端只接受SomeType类型的单个项。

那改名怎么样?

每个项目都包装在自己的FORM元素中，并且其中的输入元素具有相同的名称，因此当数据到达服务器时(来自任何元素)，它会正确地绑定到控制器操作所期望的字符串类型。

这个特殊的场景可以在我的创意的故事迷你网站上看到。您可能听不懂这种语言，但您可以查看那些多种表单和共享名称。不要介意# eyz0也是重复的(这是违反规则的)，但这是可以解决的。在这种情况下，这无关紧要。

小开

名称定义了表单提交后属性的名称。所以如果你以后想读这个属性，你会发现它在"name"在帖子或得到请求中。

而id在JavaScript或CSS中用于寻址字段或元素。

小开

输入上的name属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串。

id应该是唯一的，因为JavaScript应该使用它来选择DOM中的元素进行操作，并在CSS选择器中使用。

小开

name是传递值时使用的名称(在URL中或在发布的数据中)。id用于独特的标识用于CSS样式和JavaScript的元素。

id也可以用作锚。在过去，<a name被用于锚定，但是你也应该使用id。name仅用于发布表单数据。

小开

在HTML4.01:

# EYZ0属性

  • 仅对<a>， <form>， <iframe>， <img>， <map>， <input>， <select>， <textarea>有效
  • 名称不必是唯一的，可以用来将元素分组在一起，如单选按钮&复选框
  • 不能在URL中引用，虽然JavaScript和PHP可以看到URL有变通办法
  • 在JavaScript中引用getElementsByName()
  • 与id属性共享相同的名称空间
  • 必须以字母开头
  • 根据规范是区分大小写的，但大多数现代浏览器似乎不遵循这一点
  • 用于表单元素以提交信息。只有带有name属性的输入标记才会提交给服务器

# EYZ0属性

  • 有效的任何元素除了<base>， <html>， <head>， <meta>， <param>， <script>， <style>， <title>
  • 在浏览器中呈现的页面中，每个Id都应该是唯一的，这些Id可能都在同一个文件中，也可能不是
  • 可以在URL中作为锚引用吗
  • 是引用在CSS或URL与#标志
  • 是引用在JavaScript与getElementById()，和jQuery由$(#<id>)
  • 与name属性共享相同的名称空间
  • 必须包含至少一个字符
  • 必须以字母开头
  • 不能包含字母、数字、下划线(_)、破折号(-)、冒号(:)或句号(.)以外的任何内容。
  • 不区分大小写

在(X)HTML5中，一切都是一样的，除了:

# EYZ0属性

  • 在<form>上无效
  • XHTML规定必须全部小写，但大多数浏览器不遵守这一规定

# EYZ0属性

  • 对任何元素都有效
  • XHTML规定必须全部小写，但大多数浏览器不遵守这一规定

这个问题是在HTML4.01是标准的时候写的，许多浏览器和功能都与今天不同。

小开

name属性用于发布到例如web服务器。id主要用于CSS(和JavaScript)。假设你有这样的设置:

<input id="message_id" name="message_name" type="text" />

为了在发布表单时使用PHP获取值，它将使用的名字属性，如下所示:

$_POST["message_name"];

如前所述，当您想使用特定的CSS内容时，id用于样式化。

#message_id
{
background-color: #cccccc;
}

当然，您可以对id和的名字属性使用相同的名称。这两者不会互相干扰。

此外，的名字可以用于更多项目，比如当你使用单选按钮时。然后使用Name对单选按钮进行分组，因此只能选择其中一个选项。

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

在这个非常具体的例子中，我可以进一步说明如何使用id，因为您可能需要一个带有单选按钮的标签。Label有一个为属性，它使用输入的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>
小开
  • name标识形式字段＊;因此，它们可以由表示该字段的多个可能值的控件(单选按钮、复选框)共享。它们将作为表单值的键提交。
  • id标识DOM元素;所以它们可以被CSS或JavaScript定位。

* name也是用于标识本地锚，但这是不赞成的，'id'是现在这样做的首选方式。

小开

如果你使用JavaScript/CSS，你必须使用控件的“id”来应用任何CSS/JavaScript的东西。

如果使用的名字, 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类型的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语法的侥幸，基于0的数组根据POST响应中的数据顺序构建，这只是:

myfruit[]       apple
myfruit[]       orange

对身份证可不能耍这种把戏。在HTML中id属性的有效值是什么?中的几个答案似乎引用了HTML 4的规范(尽管他们没有给出引用):

ID和NAME标记必须以字母([a- za -z])开头，并且可以为 后面跟着任意数量的字母，数字([0-9])，连字符(“-”)， 下划线(“_”),冒号(“:”)和时间(“。”)。< / p >

因此字符[和]在HTML4中的id或名称中都无效(它们在HTML5中是可以的)。但与html的许多东西一样，仅仅因为它是无效的并不意味着它不会工作或不是非常有用。

小开

的名字用于DOM(文档对象模型)中的表单提交。

ID用于DOM中HTML控件的唯一的名称，特别是JavaScript和CSS控件。

小开

在W3C文档中添加一些实际引用，权威性地解释了'name'属性在表单元素中的作用。(无论如何，我来到这里是为了探索Stripe.js如何实现与支付网关条纹的安全交互。具体来说，是什么导致表单输入元素被提交回服务器，或者阻止它被提交?)

以下W3C文档是相关的:

https://www.w3.org/TR/html401/interact/forms.html#control-name Section 17.2控件

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0和 构造表单数据集。

如文中所述，当且仅当输入元素具有有效的'name'属性时，浏览器才会提交输入元素。

正如其他人所注意到的，'id'属性唯一地标识DOM元素，但不涉及正常的表单提交。(虽然JavaScript当然可以使用'id'或其他属性来获取表单值，然后JavaScript可以使用这些值来提交Ajax等等。)

关于前面的回答/评论，一个奇怪的问题是id的值和name的值在同一个名称空间中。据我所知，从规范中可以看出，这适用于name属性的一些已弃用的用法(不是在表单元素上)。例如https://www.w3.org/TR/html5/obsolete.html:

作者不应该在元素上指定name属性。如果该属性存在，它的值不能为空字符串，并且不能等于元素的主子树中除元素自身ID以外的任何ID的值(如果有的话)，也不能等于元素的主子树中元素的任何其他name属性的值。如果该属性存在并且元素有ID，那么该属性的值必须等于元素的ID。在该语言的早期版本中，此属性用于指定url中片段标识符的可能目标。应该使用id属性来代替。

显然，在这个特殊情况下，'a'标记的id值和name值之间有一些重叠。但这似乎是片段id处理的一种特性，而不是由于id和名称的命名空间普遍共享。

小开

id用于在JavaScript或CSS中唯一地标识一个元素。

该名称用于表单提交。当您提交表单时，只有带有名称的字段将被提交。


提交答案