HTML输入 - 名称与ID

Sim*_*ity 515 html html-input

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

Kum*_*rsh 277

在HTML4.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成为常态时编写的,许多浏览器和功能都与今天不同.

  • 批评者指定哪些点"过时或完全不正确"以及他们的评论适用于哪个版本的HTML将会有所帮助. (121认同)
  • 请注意,这个答案中的几个要点已经过时或者只是不正确,因此它的当前形式具有误导性. (19认同)
  • 我希望SO答案包含一些关于id和name之间差异的语义信息,何时使用每个,等等. (9认同)
  • "共享相同的命名空间"......这应该是什么意思?`id`可以与`name`属性具有相同的值(尽管要求`id`是唯一的).每个属性照常工作而不会发生冲突.这表明`id`和`name`属性具有单独的名称空间. (7认同)
  • "与`id`属性共享相同的命名空间"是真的吗? (4认同)
  • 请注意,可以使用属性选择器在CSS中引用它. (3认同)
  • 在 CSS 和 JavaScript 之外,ID 很重要的一个地方是 &lt;label&gt; 标签的 _for_ 属性指的是关联(通常是 &lt;input&gt;)元素的 _id_(而不是 _name_)。 (2认同)

Mic*_*ert 166

name属性用于发布到例如web服务器.id主要用于css(和javascript).假设你有这个设置:

<input id="message_id" name="message_name" type="text" />
Run Code Online (Sandbox Code Playgroud)

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

$_POST["message_name"];
Run Code Online (Sandbox Code Playgroud)

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

#message_id
{
    background-color: #cccccc;
}
Run Code Online (Sandbox Code Playgroud)

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

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

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />
Run Code Online (Sandbox Code Playgroud)

在这个非常具体的案例中,我可以进一步说明如何使用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>
Run Code Online (Sandbox Code Playgroud)

  • +1提及`<label for>`点击聚焦功能.这仅适用于ID而非名称属性. (13认同)
  • 我通常不会编辑我的答案,但是当我这样做时,我选择保留原来的答案,并添加脚注:)但是,如果我改变它可能会节省3秒的生命:)另外,像这样离开它,显示我清楚地犯了错误,所以它(希望)不会再次制作:) (8认同)
  • 尽管我很感谢你编辑你的答案是正确的,但我想知道它是否会节省你用"webserver"代替"数据库"的时间而不是如此详细的解释. (7认同)
  • 也许你可以使用`<s>数据库</ s>`标签:)来修改它像dthisa̶t̶a̶b̶a̶s̶e̶webserver:),这样人们就不会被误解,直到答案结束;) (5认同)

Rob*_*nik 69

ID必须是唯一的

页面的DOM元素树中...所以每个控制是单独访问id通过在客户端(浏览器内页)

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

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

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

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

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

名称可以复制

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

现在假设您有这种情况:

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

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

那么名字分享怎么样?

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

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


Jav*_*ome 27

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

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


Gol*_*rol 10

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

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


Mat*_*hie 8

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

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


Anj*_*ant 8

名称被用于表单提交DOM(文档对象模型).

ID用于DOM中html控件的唯一名称,专门用于JavascriptCSS


VIJ*_*VIJ 6

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

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