HTML输入 - 名称与ID

问题描述 投票：496回答：13

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

html html-input
13个回答
275
投票

在HTML 4.01中：

名称属性

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

Id属性

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

在（X）HTML5中，除了以下内容之外，一切都是相同的：

名称属性

  • 不再适用于<form>
  • XHTML表示它必须全部小写，但大多数浏览器都不遵循这一点

Id属性

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

这个问题是在HTML4.01成为常态时编写的，许多浏览器和功能都与今天不同。

2
投票

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

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

2
投票

添加对W3文档的一些实际引用，这些文档权威地解释了'name'属性在表单元素上的作用。 （为了它的价值，我来到这里，同时探究Stripe.js如何实现与支付网关Stripe的安全交互。特别是，什么原因导致表单输入元素被提交回服务器，或阻止它被提交？ ）

以下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节构造表单数据集。

如其中所解释的，当且仅当它具有有效的“名称”属性时，浏览器将提交输入元素。

正如其他人所指出的，'id'属性唯一地标识DOM元素，但不参与正常的表单提交。 （虽然'id'或其他属性当然可以通过javascript使用来获取表单值，然后javascript可以用于AJAX提交等等。）

关于先前的答案/评论者的一个奇怪的问题是关于id的值和名称的值在同一名称空间中。到目前为止，我从规范中可以看出，这适用于某些已弃用的name属性（不是表单元素）。例如https://www.w3.org/TR/html5/obsolete.html：

“作者不应该在元素上指定name属性。如果属性存在，则其值不能是空字符串，并且不能等于元素的主子树中除元素自己的ID之外的任何ID的值，如果有的话，也不等于元素主子树中元素的任何其他名称属性的值。如果该属性存在且元素有ID，则属性的值必须等于元素的ID。在该语言的早期版本中，此属性旨在指定URL中片段标识符的可能目标。应使用id属性。“

很明显，在这种特殊情况下，'a'标签的id和name值之间存在一些重叠。但这似乎是处理片段ID的一个特点，而不是由于id和名称的命名空间的一般共享。

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

不能用ids做那种伎俩。 What are valid values for the id attribute in HTML?中的几个答案似乎引用了HTML 4的规范（尽管它们没有给出引用）：

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”） ，冒号（“：”）和句号（“。”）。

所以字符[和]在HTML4中的id或名称中都无效（它们在HTML5中可以正常使用）。但是就像html这么多东西一样，仅仅因为它无效并不意味着它不起作用或者不是非常有用。

0
投票

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

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

165
投票

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

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

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

$_POST["message_name"];

如前所述，id用于样式，用于何时使用特定的css。

#message_id
{
    background-color: #cccccc;
}

当然，您可以对id和name-attribute使用相同的面额。这两个不会相互干扰。

此外，名称可用于更多项目，例如当您使用单选按钮时。然后使用名称对单选按钮进行分组，因此您只能选择其中一个选项。

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

在这个非常具体的案例中，我可以进一步说明如何使用id，因为你可能想要一个带有radiobutton的标签。 Label有一个for-attribute，它使用输入的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>
68
投票

ID必须是唯一的

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

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

在您的网页上拥有非唯一ID仍会呈现您的网页，但它肯定无效。解析无效的HTML时，浏览器非常宽容。但不要因为看起来它有效而不这样做。

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

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

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

名称可以复制

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

现在假设您有这种情况：

  • 你有一个视图与一个相同类型的项目列表
  • 用户通常一次使用一个项目，因此他们只能输入一个项目的数据并将其发送到服务器

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

How about name sharing then?

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

这个特殊情况可以在我的Creative stories迷你网站上看到。您将无法理解该语言，但您可以查看这些多种表单和共享名称。没关系IDs也是重复的（这是一个规则违规），但这可以解决。在这种情况下，这无关紧要。

27
投票
  • name识别表格字段*;因此，它们可以由代表这种字段的多个可能值的控件共享（单选按钮，复选框）。它们将作为表单值的键提交。
  • id识别DOM元素;所以他们可以成为CSS或Javascript的目标。

*名称也用于标识本地锚点，但这已被弃用，“id”是目前这样做的首选方式。

10
投票

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

id也可以用作锚。在过去，<a name被用于此，但你也应该使用id作为锚点。 name只发布表格数据。

8
投票

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

而id用于解决javascript或css中的字段或元素。

8
投票

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

ID用于DOM中html控件的唯一名称，专门用于Javascript和CSS

6
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.