id和name属性之间有什么区别?它们似乎都具有提供标识符的相同目的。

我想知道(特别是关于HTML表单)是否出于任何原因需要或鼓励同时使用两者。


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

当然,这还不止于此,但它肯定会让你朝着正确的方向思考。


使用表单控件的名称属性(如<input>和<select>),因为这是表单提交时POST或GET调用中使用的标识符。

每当需要使用CSS、JavaScript或片段标识符来处理特定的HTML元素时,请使用id属性。也可以按名称查找元素,但按ID查找更简单、更可靠。


以下是一个简短的总结:

id用于标识文档中的HTML元素对象模型(通过JavaScript或CSS样式)。需要id在页面中是唯一的。name对应于表单元素并标识发布的内容返回到服务器。


下面的论坛主题有相同基本问题的答案,但基本上,id用于脚本标识,name用于服务器端。

HTML控件的id与name属性


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

字段的Name标记(每个表单都是唯一的),除非您正在执行要传递给PHP/服务器端处理的数组。您可以通过JavaScript按名称访问它,但我认为它不会在DOM中显示为节点,或者可能会受到一些限制(例如,如果我回忆正确,您不能使用.innerHTML)。


参见id=vs name=:

有什么不同?简单的答案是,两者都用,不用担心。但如果你想了解这种愚蠢,这里有一个小问题:id=用作如下目标:<some element id=“XXX”></some element>用于以下链接:<a href=“#XXX”。

name=还用于在表单中点击提交时,使用HTTP(超文本传输协议)GET或POST标记发送到服务器的消息中的字段。id=标记JavaScript和Java DOM(文档对象模型)使用的字段。name=中的名称在表单中必须唯一。id=中的名称必须在整个文档中唯一。有时,名称=和id=名称会有所不同,因为服务器希望同一文档中的不同表单或同一表单中的不同单选按钮具有相同的名称。id=必须唯一;名称=不能为。JavaScript需要唯一的名称,但是这里已经有太多的文档没有唯一的name=name,所以W3的人发明了需要唯一的id标签。不幸的是,较旧的浏览器不理解它。因此,您需要在表单中使用这两种命名方案。

注意:HTML5中不支持某些标签(如<a>)的属性“name”。


链接目标的名称已弃用,在HTML5中无效。至少在最新的Firefox(v13)中,它不再有效。将<a name=“hello”>更改为<a id=“hello“>。

目标不需要是<a>标记。它可以是<p id=“hello”>或<h2 id=“hello>等,这通常是更干净的代码。

正如其他帖子所明确指出的,名称仍然在表单中使用(需要)。它仍然在META标签中使用。


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

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

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


如果您没有使用表单自己的提交方法将信息发送到服务器(而是使用JavaScript),则可以使用name属性将额外的信息附加到输入中,就像将其与隐藏的输入值配对一样,但它看起来更整洁,因为它包含在输入中。

虽然我认为在未来它可能不会被允许通过,但这一点目前在Firefox中仍然有效。

您可以有多个具有相同名称值的输入字段,只要您不打算以老式方式提交。


<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>

下面是id属性的有趣用法。它在<form>标记中使用,用于识别</form>边界之外的<input>元素的表单,以便将它们与表单中的其他<input〕字段一起包含。

 <form action="action_page.php" id="form1">
     First name: <input type="text" name="fname"><br>
     <input type="submit" value="Submit">
 </form>

 <p>The "Last name" field below is outside the form element, but still part of the form.</p>
 Last name: <input type="text" name="lname" form="form1">

通常,假设名称总是被id取代。这在某种程度上是正确的,但实际上对于表单字段和框架名称来说不是这样。例如,对于表单元素,name属性用于确定要发送到服务器端程序的名称-值对,不应删除。浏览器不会以这种方式使用id。为了安全起见,可以在表单元素上使用name和id属性。因此,我们将编写以下内容:

<form id="myForm" name="myForm">
     <input type="text" id="userName" name="userName" />
</form>

为了确保兼容性,在定义名称和id属性值时,最好使用匹配的值。但是,请注意一些标记,特别是单选按钮,必须具有非唯一的名称值,但需要唯一的id值。

同样,这应该说明id不仅仅是名称的替代品;它们的目的不同。此外,不要轻视旧风格的方法,深入研究现代库可以发现,这种语法风格有时用于提高性能和方便性。你的目标应该总是有利于兼容性。

现在在大多数元素中,name属性已经被弃用,取而代之的是更普遍的id属性。然而,在某些情况下,特别是表单字段(<button>、<input>、<select>和<textarea>),name属性仍然有效,因为它仍然需要设置表单提交的名称值对。此外,我们发现一些元素,特别是框架和链接,可能会继续使用name属性,因为它通常用于按名称检索这些元素。

id和name之间有明显的区别。通常,当name继续时,我们可以将值设置为相同。然而,id必须是唯一的,并且在某些情况下名称不应与单选按钮相关联。遗憾的是,id值的唯一性虽然受到标记验证的限制,但并没有达到应有的一致性。浏览器中的CSS实现将为共享id值的对象设置样式;因此,在运行时之前,我们可能无法捕捉到可能影响JavaScript的标记或样式错误。

本文摘自托马斯·鲍威尔的《JavaScript-完整参考》一书。


Id:

它用于通过文档对象模型(DOM)(通过JavaScript或CSS样式)识别HTML元素。Id在页面中应该是唯一的。

名称对应于表单元素,并标识返回到服务器的内容。

例子:

<form action="action_page.php" id="Myform">
    First name: <input type="text" name="FirstName"><br>
    <input type="submit" value="Submit">
</form>

<p>The "Last name" field below is outside the form element, but still part of the form.</p>
Last name: <input type="text" name="LastName" form="Myform">

名称与id


name

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

id

通常与CSS一起使用以设置特定元素的样式。这个的价值属性必须唯一。Id是全局属性。全局属性可以用于所有元素,尽管这些属性可能对某些元素没有影响。必须在整个文档中唯一。与此相反,此属性的值不能包含空格class属性,它允许用空格分隔值。使用ASCII字母和数字以外的字符,“_”、“-”和“.”可能会导致兼容性问题,因为HTML 4中不允许这些问题。虽然HTML5中取消了此限制,但ID应该开始带有兼容性字母。


表单输入元素的ID与元素中包含的数据无关。ID用于将元素与JavaScript和CSS挂钩。然而,name属性在浏览器向服务器发送的HTTP请求中用作与value属性中包含的数据相关联的变量名。

例如:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

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

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


ID用于唯一标识元素。

名称用于表单中。虽然您提交了一份表格,但如果您不提供任何名称,将不会提交任何内容。因此,表单元素需要一个名称来通过表单方法(如“get或push”)进行标识。

只有具有name属性的才会熄灭。


根据个人经验和W3Schools属性描述:

ID是一个全局属性,几乎适用于HTML中的所有元素。它用于唯一标识网页上的元素,其值主要从前端访问(通常通过JavaScript或jQuery)。

name是对HTML中的特定元素(如表单元素等)有用的属性。它的值大部分被发送到后端进行处理。

HTML属性引用


id和名称之间没有字面上的区别。

name是一个标识符,在浏览器发送的HTTP请求中用作与元素的value属性中包含的数据相关联的变量名。

另一方面,id是浏览器、客户端和JavaScript的唯一标识符。因此,表单需要一个id,而其元素需要一个名称。

id更具体地用于向唯一元素添加属性。在DOM方法中,Id在JavaScript中用于引用要在其上执行操作的特定元素。

例如:

<html>

<body>
    <h1 id="demo"></h1>

    <script>
        document.getElementById("demo").innerHTML = "Hello World!";
    </script>
</body>

</html>

name属性也可以实现这一点,但最好在表单中使用id,而在小表单元素(如input标记或select标记)中使用name。


id将给一个元素一个id,所以一旦你编写了真正的代码(比如JavaScript),你就可以使用这个id来读取元素。名称只是一个名称,所以我想用户可以看到元素的名称。

例子:

<h1 id="heading">text</h1>
<script>
  document.getElementById("heading"); // Reads the element that has the id "heading".
</script>
// You can also use something like this:
document.getElementById("heading").value; // Reads the value of the selected element.

<body><form action=“”><label for=“username”>用户名</label><input type=“text”id=“username”name=“username“><button>提交</按钮></form></body>

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

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


在这个问题一直存在的过程中,我很懊恼(也许有点难过),没有人想过提到可访问性,尽管它一直很重要,但它一直在管理层和软件工程师中稳步获得支持(仅从我的个人观察来看;没有硬数据支持)。

我可以提供的一个统计数据如下(来源):

因此,对可访问性缺点的认识呈现出稳步增长的趋势。同样的参考文献提到,从这些数字中,我们可以观察到每小时至少有一次诉讼被提起!

那么,可访问性如何影响姓名与身份?

根据万维网联盟(W3C):

标签的for属性必须与表单控件。


name和id都可以被#作为目标,因此不确定为什么只为该任务提及id。

我经常检查这些属性,以创建指向书签的特定链接(由于某些原因,没有提供使用鼠标光标单击标题以进行相同操作),例如Option File InclusionsMySQL 5.6 4.2.2.2使用选项文件文档部分:

https://dev.mysql.com/doc/refman/5.6/en/option-files.html#option-文件内含物

其中定义为<a name=“option file inclusions”></a>(绝对不涉及表单)。

我认为,在HTML中,name属性也比id旧。