在标签和输入上使用 id 标签有啥区别？ [复制]

Posted 2023-03-05

【中文标题】在标签和输入上使用 id 标签有啥区别？ [复制]

【英文标题】：What is the difference between using the id tag on a label and an input? [duplicate]在标签和输入上使用 id 标签有什么区别？ [复制]

【发布时间】：2019-10-14 05:20:46

【问题描述】：

我对此的理解是，如果您将 id 用于输入，它会链接到相应标签的“for”属性。但是，我不确定它在相反的情况下是如何工作的。

我对 name 属性的理解是将该名称发送到服务器，但在您制作复选框的情况下，value 属性正在执行此任务。我是否在这里将一个简单的概念过于复杂化了？

【问题讨论】：

是的，你把一个简单的概念复杂化了:)。 ID 唯一标识 DOM 中的元素。这就是他们所做的一切。 for 属性使用该事实允许将label 语义链接到表单元素。它说，“这是该元素的标签”。就是这样。

name 属性实际上是用在复选框上，用于向服务器发送适当的值。如果您不提供，则不会发送该值。

@HereticMoney 谢谢你把它弄明白了。使用输入时 value 属性执行什么任务？

它提供了价值。基本上，当从表单向服务器发送数据时，html 必须为服务器提供元素的名称及其值。回到最开始，这是通过使用查询字符串的 URL 完成的； ?isChecked=true 的东西。元素的名称用于isChecked，true 是值。

@HereticMonkey 谢谢。

【参考方案1】：

标签有 2 个主要功能：向 HTML 标识标签的用途，在大多数常见浏览器中单击标签会将焦点设置为输入。以下是可能的情况。请记住，将输入的 id 和 name 设置为相同的值通常是最简单的。

不会将标签链接到输入：

<label for="myInput">My Input</label>
<input name="myInput">

不会将表单数据发送到服务器（通过 id 包含的自定义 AJAX 对象除外）：

<label for="myInput">My Input</label>
<input id="myInput">

也不会将标签链接到输入（因为需要是 id，而不是名称）：

<label for="input">My Input</label>
<input name="input" id="myInput">

正确：

<label for="myInput">My Input</label>
<input name="myInput" id="myInput">

对于不匹配的名称/ID 也是正确的：

<label for="myInput">My Input</label>
<input name="input" id="myInput">