HTML中id和name属性的区别

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

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

当前回答

通常，假设名称总是被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-完整参考》一书。

2015-01-15 12:34:40

其他回答

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

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

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

2014-03-28 20:45:57

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

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

2009-09-09 05:09:35

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

2015-10-12 10:48:41

表单输入元素的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挂钩。

2017-07-18 16:09:59

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

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

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

2021-04-02 17:11:39

HTML中id和name属性的区别

推荐文章

最新文章

标签