HTML输入名称与id

Question

HTML输入名称与id使用HTML时<input>标记的使用之间的区别是什么？name和id属性，尤其是我发现它们有时被命名为相同的属性？

Answer 1

name属性用于向例如Web服务器投递。id主要用于CSS(和javascript)。假设您有这样的设置：

<input id="message_id" name="message_name" type="text" />

为了在提交表单时使用PHP获取值，它将使用name-属性，如下所示：

$_POST["message_name"];

正如前面所说，id用于样式设置，用于当您想要使用特定的CSS时。

#message_id
{
    background-color: #cccccc;
}

当然，您可以对您的id和name-属性使用相同的名称。这两个人不会互相干涉。

此外，名称可以用于更多的项目，如当你使用无线电按钮。然后使用名称对您的无线电按钮进行分组，因此您只能选择其中一个选项。

<input id="button_1" type="radio" name="option" />
<input id="button_2" type="radio" name="option" />

在这个非常具体的例子中，我可以进一步说明id是如何使用的，因为您可能需要一个带有无线电按钮的标签。Label有一个for-属性，它使用输入的id将该标签链接到您的输入(当您单击Label时，将选中该按钮)。示例可在下面找到

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

Answer 2

ID必须是唯一的。

.在页面DOM元素树中，因此每个控件都是单独访问其id在客户端(浏览器页内)

• 加载在页面中的JavaScript脚本
• 页面上定义的CSS样式

在页面上拥有非唯一的ID仍然会呈现您的页面，但是它肯定是无效的。当解析无效的HTML时，浏览器是非常宽容的。但不要因为似乎它起作用了。

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

.在同一类型的几个控件之间的页面DOM(例如单选按钮)，因此当数据被发送到服务器时，只发送一个特定的值。因此，当页面上有几个单选按钮时，只有选定的一个按钮value获取回发到服务器，即使有几个具有相同属性的相关单选按钮控件。name.

向服务器发送数据的增编*当数据被发送到服务器(通常是通过HTTPPOST请求)时，所有数据作为名称-值对哪里名字，姓名是name输入HTML控件和价值是它的value由用户输入/选择。对于非Ajax请求，情况总是如此。在ajax请求中，名称-值对能，会，可以独立于页面上的HTML输入控件，因为开发人员可以向服务器发送他们想要的任何东西。很多时候，值也是从输入控件中读取的，但我只是想说，这并不一定是这样的。

当名称可以重复时

有时，名称在任何形式的输入类型的控件之间共享可能是有益的。但什么时候？您没有说明您的服务器平台可能是什么，但是如果您使用类似ASP.NETMVC之类的工具，您就可以获得自动数据验证(客户端和服务器)以及将发送的数据绑定到强类型的好处。这意味着这些名称必须匹配类型属性名。

现在假设您有这样的场景：

• 您有一个具有相同类型项列表的视图。
• 用户通常一次只处理一个项，所以他们只使用一个项输入数据并将其发送到服务器。

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

那分享名字怎么样？

每个项目都在自己的范围内包装。FORM元素中的元素和输入元素具有相同的名称，因此当数据到达服务器(来自任何元素)时，它将正确绑定到控制器操作所期望的字符串类型。

在我的创作故事迷你网站。您不会理解这种语言，但是您可以查看这些多个表单和共享名称。算了吧IDS也是重复的(这是违反规则的行为)，但这是可以解决的。只是在这个案子里没什么关系。