HTML输入-名称与ID \[重复\]

HTML

TomNear前端

2020-03-18

使用HTML <input>标记时,使用nameid属性有什么区别,尤其是发现它们有时被命名为相同的属性有什么区别

第2201篇《HTML输入-名称与ID \[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
ProJinJin 2020.03.18

如果您使用的是JavaScript / CSS,则必须使用控件的“ id”在其上应用任何CSS / JavaScript内容。

如果使用名称,则CSS将不适用于该控件。例如,如果您使用附加到文本框的JavaScript日历,则必须使用文本控件ID为其分配JavaScript日历。

西里小胖 2020.03.18

name输入属性由其父HTML使用,<form>以将该元素作为POST请求中HTTP形式的成员或请求中查询字符串的形式GET

id应该是唯一的,因为它应该由JavaScript用来选择在DOM进行操纵的元素和CSS选择器中使用。

MandyNear乐 2020.03.18

id用于唯一标识JavaScript或CSS中的元素。

该名称用于表单提交中。提交表单时,只会提交带有名称的字段。

GO蛋蛋 2020.03.18

名称定义了表单提交后属性的名称。因此,如果您以后想读取此属性,可以在POST或GET请求的“名称”下找到它。

而ID用于处理javascript或css中的字段或元素。

NearGreen 2020.03.18

名称属性用于发布到例如Web服务器。该ID主要用于CSS(和javascript)。假设您有以下设置:

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

为了在发布表单时使用PHP获得值,它将使用名称属性,如下所示:

$_POST["message_name"];

如前所述,该ID用于样式设置,用于您要使用特定CSS的样式。

#message_id
{
    background-color: #cccccc;
}

当然,您可以为ID和名称属性使用相同的面额。这两个不会互相干扰。

同样,名称可以用于更多项目,例如使用单选按钮时。然后使用名称对单选按钮进行分组,因此您只能选择这些选项之一。

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

在这种非常特殊的情况下,我可以进一步说说id的使用方法,因为您可能需要带有单选按钮的标签。Label有一个for-attribute,它使用输入的ID将此标签链接到您的输入(单击标签时,将选中按钮)。示例可以在下面找到

<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>
番长Jim路易 2020.03.18

name是传递值时使用的名称(在url或发布的数据中)。id用于唯一标识CSS样式和JavaScript的元素。

id可作为锚了。在过去,它<a name是用于此目的的,但您也应该将其id用于锚点。name仅用于发布表单数据。

Mandy猴子 2020.03.18

名称被用于表单提交DOM(文档对象模型)。

ID用于在DOM中专门用于JavascriptCSS的html控件的唯一名称

StafanHarry 2020.03.18

ID必须是唯一的

页面的DOM元素树中...所以每个控制是单独访问id通过在客户端(浏览器内页)

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

页面上具有非唯一ID仍会呈现您的页面,但肯定是无效的。浏览器在解析无效的HTML时非常宽容。但不要仅仅因为它似乎有效就这样做。

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

...在同一类型的多个控件之间的页面DOM中(以单选按钮为例),因此,当将数据发布到服务器时,仅发送特定值。因此,当页面上有多个单选按钮时,value即使有几个相关的单选按钮控件具有相同的,也只会将选定的对象发布回服务器name

将数据发送到服务器的附录:当数据发送到服务器(通常通过HTTP POST请求)时,所有数据都以名称/值对的形式发送,其中namename输入HTML控件的,而valuevalue输入/选择的HTML控件的用户。对于非Ajax请求始终如此。在Ajax请求中,名称-值对可以独立于页面上的HTML输入控件,因为开发人员可以将他们想要的任何内容发送到服务器。还经常从输入控件中读取值,但是我只是想说不一定是这种情况。

何时可以复制名称

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

现在假设您有这种情况:

  • 您有一个视图,其中列出了相同类型的项目
  • 用户通常一次只能处理一个项目,因此他们只会单独输入一个项目的数据并将其发送到服务器

因此,视图的模型(因为它显示一个列表)是类型的,IEnumerable<SomeType>但是服务器端只接受type的一个项目SomeType

那名字共享呢?

每个项目都包装在其自己的FORM元素中,并且其中的输入元素具有相同的名称,因此,当数据(从任何元素)到达服务器时,它将正确绑定到控制器动作期望的字符串类型。

在我的创意故事迷你网站上可以看到这种特殊情况您不会理解该语言,但是您可以签出这些多种形式和共享名称。没关系,IDs也重复(这是违反规则的),但是可以解决。在这种情况下无关紧要。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android