564

使用 HTML标签时，使用和属性<input>有什么区别，尤其是我发现它们有时命名相同？nameid

4

13 回答 13

294

在 HTML4.01 中：

名称属性

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

标识属性

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

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

名称属性

  • <form>不再有效
  • XHTML 说它必须全部小写，但大多数浏览器不遵循这一点

标识属性

  • 适用于任何元素
  • XHTML 说它必须全部小写，但大多数浏览器不遵循这一点

这个问题是在 HTML4.01 是规范的时候写的，很多浏览器和功能都和现在不一样。

于 2011-09-19T11:38:16.483 回答
191

name 属性用于发布到例如网络服务器。id主要用于 CSS（和 JavaScript）。假设你有这个设置：

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

为了在发布表单时使用 PHP 获取值，它将使用name属性，如下所示：

$_POST["message_name"];

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

#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 有一个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>
于 2011-09-19T11:45:56.153 回答
72

ID 必须是唯一的

...在页面 DOM 元素树内，因此每个控件都可以通过其id在客户端（在浏览器页面内）单独访问

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

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

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

...在同一类型的多个控件之间的页面 DOM 中（想想单选按钮），因此当数据被POST到服务器时，只会发送一个特定的值。因此，当您的页面上有多个单选按钮时，value即使有几个相关的单选按钮控件具有相同的name.

将数据发送到服务器的附录：当数据被发送到服务器时（通常通过 HTTP POST 请求），所有数据都作为名称-值对发送，其中名称是name输入 HTML 控件的，值是其value输入/选择的用户。这对于非 Ajax 请求总是正确的。在 Ajax 请求中，名称-值对可以独立于页面上的 HTML 输入控件，因为开发人员可以向服务器发送他们想要的任何内容。很多时候，值也是从输入控件中读取的，但我只是想说这不一定是这种情况。

当名字可以重复时

有时在任何表单输入类型的控件之间共享名称可能是有益的。但当？您没有说明您的服务器平台可能是什么，但如果您使用ASP.NET MVC之类的东西，您将受益于自动数据验证（客户端和服务器）并将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配。

现在假设您有这种情况：

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

所以你的视图模型（因为它显示一个列表）是 type IEnumerable<SomeType>，但你的服务器端只接受一个 type 的项目SomeType。

那么名称共享呢？

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

这个特殊的场景可以在我的创意故事迷你网站上看到。您不会理解该语言，但您可以查看这些多种形式和共享名称。没关系，IDs 也被重复（这是违反规则的），但这可以解决。在这种情况下，这无关紧要。

于 2011-09-19T11:35:56.767 回答
35
  • name标识表单域* ; 因此它们可以由代表此类字段的多个可能值的控件（单选按钮、复选框）共享。它们将作为表单值的键提交。
  • id标识DOM元素；因此它们可以被 CSS 或 JavaScript 定位。

* name也用于标识本地锚点，但这已被弃用，'id' 是当今这样做的首选方式。

于 2013-01-22T16:56:38.273 回答
13

name是传递值时使用的名称（在 URL 中或在发布的数据中）。id用于唯一标识 CSS 样式和 JavaScript 的元素。

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

于 2011-09-19T11:36:27.573 回答
10

name用于DOM（文档对象模型）中的表单提交。

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

于 2016-05-03T10:12:40.023 回答
9

名称定义了提交表单后属性的名称。因此，如果您想稍后阅读此属性，您将在POST或GET请求的“名称”下找到它。

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

于 2011-09-19T11:36:14.397 回答
7

id 用于唯一标识 JavaScript 或 CSS 中的元素。

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

于 2017-09-24T06:16:31.263 回答
3

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

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

于 2011-09-19T11:36:17.900 回答
3

我希望您能发现以下简短示例对您有所帮助：

<!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' 不等于来区分它们。

于 2014-09-29T14:09:47.230 回答
2

添加一些对W3C文档的实际参考，这些参考权威性地解释了表单元素上的“名称”属性的作用。（对于它的价值，我来到这里是在探索Stripe.js是如何实现与支付网关Stripe的安全交互时到达这里的。特别是，是什么导致表单输入元素被提交回服务器，或者阻止它被提交?)

以下 W3C 文档是相关的：

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 元素，但不涉及正常的表单提交。（虽然 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 和名称的命名空间的一般共享。

于 2016-10-21T02:24:18.930 回答
1

使用相同名称的一个有趣案例：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属性的值是否仅被视为字符串，并且基于 0 的数组得到的 PHP 语法是侥幸基于 POST 响应中数据的顺序构建，即：

myfruit[]       apple
myfruit[]       orange

不能用 id 做那种把戏。HTML 中 id 属性的有效值是什么？似乎引用了 HTML 4 的规范（尽管他们没有给出引用）：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

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

于 2015-01-10T15:47:31.577 回答
-1

如果您使用 JavaScript/CSS，则必须使用控件的“id”在其上应用任何 CSS/JavaScript 内容。

如果您使用name，CSS 将不适用于该控件。例如，如果您使用附加到文本框的 JavaScript 日历，则必须使用文本控件的id为其分配 JavaScript 日历。

于 2014-06-19T13:20:56.160 回答