当使用HTML <input>标记时,使用名称和id属性之间的区别是什么,特别是我发现它们有时命名相同?
当前回答
名称定义了表单提交后属性的名称。因此,如果您稍后想要读取此属性,您将在POST或GET请求中的“name”下找到它。
而在JavaScript或CSS中,id用于寻址字段或元素。
其他回答
名称标识表单字段*;因此,它们可以由表示该字段的多个可能值的控件(单选按钮、复选框)共享。它们将作为表单值的键提交。 id标识DOM元素;所以它们可以被CSS或JavaScript定位。
* name's也用于标识本地锚,但这是不赞成的,'id'是现在这样做的首选方式。
id必须唯一
...在页面DOM元素树中,因此每个控件都可以通过其在客户端(浏览器页面内)上的id单独访问
页面中加载的JavaScript脚本 页面上定义的CSS样式
在页面上使用非唯一id仍然会呈现页面,但肯定是无效的。浏览器在解析无效的HTML时是很宽容的。但不要仅仅因为它看起来有效就这么做。
名字通常是唯一的,但可以共享
...在页面DOM中相同类型的几个控件之间(想想单选按钮),所以当数据被post到服务器时,只有一个特定的值被发送。因此,当你的页面上有几个单选按钮时,即使有几个同名的相关单选按钮控件,也只有选中的那个按钮的值会被传回服务器。
Addendum to sending data to server: When data gets sent to server (usually by means of HTTP POST request) all data gets sent as name-value pairs where name is the name of the input HTML control and value is its value as entered/selected by the user. This is always true for non-Ajax requests. In Ajax requests name-value pairs can be independent of HTML input controls on the page, because developers can send whatever they want to the server. Quite often values are also read from input controls, but I'm just trying to say that this is not necessarily the case.
当名字可以重复的时候
在任何表单输入类型的控件之间共享名称有时可能是有益的。但当吗?你没有说明你的服务器平台可能是什么,但如果你使用ASP之类的东西。NET MVC中,您可以获得自动数据验证(客户端和服务器)的好处,还可以将发送的数据绑定到强类型。这意味着这些名称必须与类型属性名称匹配。
现在假设你有这样的场景:
您有一个具有相同类型项列表的视图 用户通常一次处理一个项目,因此他们只会单独输入一个项目的数据并将其发送到服务器
因此,您的视图模型(因为它显示了一个列表)的类型是IEnumerable<SomeType>,但是您的服务器端只接受一个SomeType类型的项目。
那改名怎么样?
每个项都包装在自己的FORM元素中,并且其中的输入元素具有相同的名称,因此当数据到达服务器时(来自任何元素),它会正确地绑定到控制器操作所期望的字符串类型。
这个特殊的场景可以在我的创意故事迷你网站上看到。您可能听不懂这种语言,但您可以查看那些多种表单和共享名称。不用担心id也会重复(这是违反规则的),但这是可以解决的。在这种情况下,这无关紧要。
输入上的name属性由其父HTML <form>s用于将该元素作为POST请求中的HTTP表单成员或GET请求中的查询字符串包含在内。
id应该是唯一的,因为JavaScript应该使用它在DOM中选择元素进行操作,并在CSS选择器中使用。
如果你使用JavaScript/CSS,你必须使用控件的“id”来应用任何CSS/JavaScript的东西。
如果使用name, CSS将不能用于该控件。例如,如果使用JavaScript日历附加到文本框,则必须使用文本控件的id为其分配JavaScript日历。
name是传递值时使用的名称(在URL中或在发布的数据中)。id用于唯一标识CSS样式和JavaScript元素。
id也可以用作锚。在过去,它使用<a名称,但您也应该对锚使用id。名称仅用于发布表单数据。
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?