it-swarm.cn

HTML输入 - 名称与ID

使用HTML <input>标签时,使用nameid属性之间的区别是什么,特别是我发现它们有时被命名为相同?

496
Simplicity

在HTML4.01中:

名称 属性

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

Id Attribute

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

在(X)HTML5中,除了以下内容之外,一切都是相同的:

名称 属性

  • <form>上无效
  • XHTML表示它必须全部小写,但大多数浏览器都不遵循这一点

Id Attribute

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

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

272
Kumar Akarsh

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使用相同的面额。这两个不会相互干扰。

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

<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>
159
Michiel Standaert

ID必须是唯一的

...在页面DOM元素树中,所以每个控件都是 可单独访问 由客户端(在浏览器页面内)的id

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

在您的网页上拥有非唯一ID仍会呈现您的网页,但它肯定无效。解析无效的HTML时,浏览器非常宽容。但不要仅仅因为看起来它才能起作用。

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

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

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

名称可以复制

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

现在假设您有这种情况:

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

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

那么名字分享怎么样?

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

这个特殊的场景可以在我的 创意故事 迷你网站上看到。您将无法理解该语言,但您可以查看这些多种表单和共享名称。没关系IDs也是重复的(违反规则),但可以解决。在这种情况下,这无关紧要。

68
Robert Koritnik
  • name标识 表格 字段*;因此,它们可以由代表这种字段的多个可能值的控件共享(单选按钮,复选框)。它们将作为表单值的键提交。
  • id标识 _ dom _ elements;所以他们可以成为CSS或Javascript的目标。

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

26
Javarome

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

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

10
GolezTrol

name 用于 表单提交 in _ dom _ (文档对象模型)。

_ id _ 用于 唯一名称 DOM中的html控件专用于 Javascript _ css _

8
Anjan Kant

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

而id用于在javascript或css中添加字段或元素。

8
Matschie

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

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

6
Viyaan Jhiingade

我希望您能找到以下有用的简短示例:

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

3
Clemencio Morales Lucas

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

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

2
StuperUser

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

以下W3文档是相关的:

HTML 4: https://www.w3.org/TR/html401/interact/forms.html#control-name Section 17.2 Controls

HTML 5: https://www.w3.org/TR/html5/forms.html#form-submission-0https://www.w3.org/TR/html5/forms.html #construct-the-form-data-set Section 4.10.22.4构造表单数据集。

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

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

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

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

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

2
gwideman

使用相同名称的一个有趣的例子:类型为inputcheckbox元素,如下所示:

<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

不能用ids做那种伎俩。 HTML中id属性的有效值是什么? 中的几个答案似乎引用了HTML 4的规范(虽然它们没有给出引用):

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

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

1
sootsnoot

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

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

0
Ravi Wadje