HTML中id和name属性的区别

yog*_*ear 670 html attributes

idname属性有什么区别?它们似乎都与提供标识符的目的相同.

我想知道(特别是关于HTML表单)是否有必要或鼓励使用两者都是出于任何原因.

Joh*_*her 585

name在表单提交中发送数据时使用该属性.不同控制的反应不同.例如,您可能有几个具有不同id属性的单选按钮,但相同name.提交时,响应中只有一个值 - 您选择的单选按钮.

当然,除此之外还有更多,但它肯定会让你思考正确的方向.

  • @Prageeth:区别在于"名称"从浏览器传输到服务器,可能与"id"不同.人们可能想要这种差异的原因有很多.例如,您的服务器端语言/框架可能需要提交的值具有某些名称,但您的javascript最适合使用ids中完全不同的内容. (25认同)
  • 非常非正式地说,`id`是你的前端(CSS,JS)使用的,而`name`是你的服务器接收然后可以处理的.这基本上是Greeso的答案所说的. (20认同)
  • 我也在寻找答案,但很难从你的帖子中理解.. (17认同)
  • 最好说:*发送数据时**需要**名称属性......而不是:*发送数据时**使用**名称属性......*因为任何表单数据都缺少**name** 属性将不会被传输(或者实际上根本不会根据 HTML 规范进行处理) (5认同)
  • 除了单选按钮之外还有什么用途吗?我认为除此之外应该还有很大的区别??? (3认同)

War*_*ung 317

使用name表单控件的属性(例如<input><select>),因为这是在表单提交时使用的标识符POSTGET调用.

id只要需要使用CSS,JavaScript或片段标识符来处理特定HTML元素,就可以使用属性.也可以按名称查找元素,但通过ID查找它们更简单,更可靠.

  • @Thomas:`name`和`id`之间没有必要的联系.标识符唯一地标识页面上的特定HTML元素.相反,HTML表单元素的`name`属性不必是唯一的,通常也不是唯一的,例如单选按钮或具有多个`<form>`元素的页面.对于`name`和`id`使用相同的字符串是传统的,其中两者都用于单个HTML元素,但没有任何东西可以让你这样做. (5认同)
  • 这非常明确.那么,我可以推断,"名称"几乎是发送到服务器的参数"标识符"的表示吗?这个问题部分由接受的答案回答,但没有用这些术语表达. (2认同)

Mik*_*bee 107

这是一个简短的总结:

  • id用于通过文档对象模型(通过JavaScript或使用CSS样式)标识HTML元素.id预计在页面内是唯一的.

  • name对应于表单元素,并标识发回服务器的内容.


小智 27

请参阅此http://mindprod.com/jgloss/htmlforms.html#IDVSNAME

有什么不同?简短的回答是,使用两者并且不用担心它.但是如果你想要理解这种愚蠢,这就是瘦的:

id =用作这样的目标:<some-element id="XXX"></some-element>对于这样的链接:<a href="#XXX".

name =还用于标记当您在表单中按提交时,使用HTTP(超文本传输​​协议)GET或POST发送到服务器的消息中的字段.

id =标记JavaScript和Java DOM(文档对象模型)使用的字段.名称中的名称=在表单中必须是唯一的.id =中的名称在整个文档中必须是唯一的.

有时,name =和id = names会有所不同,因为服务器期望同一文档中的各种表单中的相同名称或与上例中相同形式的各种单选按钮.id =必须是唯一的; 名字=一定不能.

JavaScript需要唯一的名称,但是这里有太多的文档而没有唯一的name = names,因此W3人发明了必须是唯一的id标记.不幸的是旧浏览器不理解它.因此,您需要在表单中使用两种命名方案.

注意:<a>HTML5中不支持某些标签的属性"name" .

  • 有点令人困惑......我认为在某些方面有误.不是这样的:`name`对于`<form>`提交中的`<input>`标签很重要,因为参数在HTTP中使用,而`id`只是一个唯一的标识符 (2认同)

Gre*_*eso 24

我对它的思考和使用方式很简单:

id用于CSS和JavaScript/jQuery(在页面中必须是唯一的)

当表单通过HTML提交时,name用于PHP中的表单处理(必须在表单中是唯一的 - 在某种程度上,请参阅下面的Paul的评论)

  • 同样,这可能会让您感到惊讶,但是PHP并不是世界上唯一的服务器语言。 (4认同)
  • 不完全正确 - **Name**属性不必在表单中是唯一的,因为它可以将单选按钮链接在一起. (2认同)

Ext*_*kun 14

ID标记 - 由CSS使用,定义div,span或其他元素的唯一实例.出现在Javascript DOM模型中,允许您使用各种函数调用来访问它们.

字段的名称标记 - 这对于每个表单都是唯一的- 除非您正在执行要传递给PHP /服务器端处理的数组.您可以通过Javascript按名称访问它,但我认为它不会显示为DOM中的节点或某些限制可能适用(例如,如果我没记错的话,您不能使用.innerHTML).

  • 单选按钮*必须*共享相同的名称才能正常运行 - 每个表单不是唯一的. (9认同)

Shi*_*han 11

通常,假设名称始终被id取代.实际上,这在某种程度上是正确的,但实际上并非形式字段和框架名称.例如,对于表单元素,该name属性用于确定要发送到服务器端程序名称 - 值对,不应该被删除.Browsers do not use id in that manner.为了安全起见,您可以在表单元素上使用name和id属性.所以,我们写下以下内容:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>
Run Code Online (Sandbox Code Playgroud)

为了确保兼容性,在定义两者时具有匹配的名称和id属性值是个好主意.但是,请注意 - 某些标记(尤其是单选按钮)必须具有非唯一的名称值,但需要唯一的ID值.再次,这应该引用id不仅仅是名称的替代; 它们的目的不同.此外,不要忽视旧式方法,深入了解现代图书馆有时会显示出用于表现和轻松目的的语法风格.您的目标应始终是支持兼容性.

现在在大多数元素中,不推荐使用name属性,而是支持更普遍的id属性.然而,在某些情况下,特别是形成字段(<button>,<input>,<select><textarea>),name属性住在,因为它仍然需要设定表单提交的名称-值对.此外,我们发现一些元素,特别是框架和链接,可能会继续使用name属性,因为它通常用于按名称检索这些元素.

id和name之间有明显的区别.通常,当名称继续时,我们可以设置相同的值.但是,id必须是唯一的,并且在某些情况下名称不应该 - 认为单选按钮.遗憾的是,id值的唯一性虽然被标记验证所捕获,但并不像它应该的那样一致.浏览器中的CSS实现将设置共享id值的对象的样式; 因此,我们可能无法捕获可能影响我们的JavaScript直到运行时的标记或样式错误.

这取自JavaScript- The Complete Reference by Thomas-Powell

  • 另一个不习惯只是创建id匹配名称的原因:你可能在页面上有两个需要提交相同数据的表单(例如两个搜索字段).在这种情况下,`name`应该是相同的(服务器端代码不关心提交的是什么),但`id`必须是不同的(因为它在整个页面中必须是唯一的). (4认同)

小智 9

name已弃用链接目标,在HTML5中无效.它至少在最新的Firefox(第13版)中不再适用.更改<a name="hello"><a id="hello">

目标不需要是<a>标记,它可以是<p id="hello">或<h2 id="hello">等等,这通常是更清晰的代码.

正如其他帖子所说的那样,name仍然在表格中使用(需要).它仍然用于META标签.


小智 9

<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Run Code Online (Sandbox Code Playgroud)

  • 应该有一个解释。例如,想法/要点是什么?问题是“id 和 name 属性有什么区别?”*。你能详细说明一下吗?请通过[编辑(更改)您的答案](https://stackoverflow.com/posts/23203151/edit) 进行回复,而不是在评论中回复(***没有***“编辑:”、“更新:”或类似 - 答案应该看起来像今天写的一样)。 (3认同)

小智 9

<body>
<form action="">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <button>Submit!</button>
</form>
</body>
Run Code Online (Sandbox Code Playgroud)

正如我们在这里看到的,“id”和“for”元素是相互关联的。如果您单击标签(用户名),则输入字段将突出显示(这对于移动用户很有用,并且被认为是一个很好的做法)。

另一方面,“名称”元素在提交表单时很有用。无论您在输入字段中输入什么内容,它都会显示在 URL 上。请参阅附图。

网址图片


Jam*_*ack 8

此链接具有相同基本问题的答案,但基本上,id用于脚本标识,名称用于服务器端.

http://www.velocityreviews.com/forums/t115115-id-vs-name-attribute-for-html-controls.html


Sub*_*axe 6

name Vs id

名称

  • 元素的名称.例如,服务器用于标识表单提交中的字段.
  • 支持元素是 <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
  • 名称不必是唯一的.

ID

  • 通常与CSS一起使用来设置特定元素的样式.该属性的值必须是唯一的.
  • Id是全局属性,它们可用于所有元素,但属性可能对某些元素没有影响.
  • 在整个文档中必须是唯一的.
  • 与class属性相比,此属性的值不得包含空格,后者允许以空格分隔的值.
  • 使用ASCII字母和数字以外的字符,'_',' - '和'.' 可能会导致兼容性问题,因为它们在HTML 4中是不允许的.尽管HTML 5中已经解除了这个限制,但ID应该以兼容字母开头.


orb*_*bit 5

表单输入元素的ID与该元素中包含的数据无关。ID用于将元素与JavaScript和CSS挂钩。但是,名称属性在浏览器发送到服务器的HTTP请求中用作与值属性中包含的数据关联的变量名称。

例如:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>
Run Code Online (Sandbox Code Playgroud)

提交表单后,表单数据将包含在HTTP标头中,如下所示:

如果添加ID属性,它将不会更改HTTP标头中的任何内容。它将使其更容易与CSS和JavaScript挂钩。