名称与ID

 

当使用HTML <input>标记时，使用name和id属性有什么区别，特别是我发现它们有时被命名为相同？

在HTML4.01中：

名称属性

  • 仅在<a> ， <form> ， <iframe> ， <img> ， <map> ， <input> ， <select> ， <textarea>
  • 名称不必是唯一的，并且可以用于将元素分组在一起，例如单选按钮和复选框
  • 不能在URL中引用，尽管JavaScript和PHP可以看到URL，但是有解决方法
  • 在JS中用getElementsByName()引用
  • 与id属性共享相同的名称空间
  • 必须以字母开头
  • 根据规格是区分大小写的，但大多数现代浏览器似乎并没有遵循这一点
  • 用于表单元素来提交信息。 只有具有name属性的输入标签才会提交给服务器

    • Id属性

  • 除<base> ， <html> ， <head> ， <meta> ， <param> ， <script> ， <style> ， <title>
  • 在浏览器中呈现的每个ID在页面中应该是唯一的，该浏览器可能也可能不全是在同一个文件中
  • 可以在URL中用作锚点参考
  • 在CSS或URL中用#号引用
  • 在JS中使用getElementById()引用，而jQuery使用$(#<id>)引用
  • 与名称属性共享相同的名称空间
  • 必须至少包含一个字符
  • 必须以字母开头
  • 不得含有字母，数字，下划线（其它什么_ ），破折号（ -冒号（ : （），或句号. ）
  • 不区分大小写

    • 在（X）HTML5中，除了以下内容外，一切都是相同的：

    名称属性

  • 无法在<form>上有效
  • XHTML表示它必须全部小写，但大多数浏览器并不遵循这一点

    • Id属性

  • 对任何元素有效
  • XHTML表示它必须全部小写，但大多数浏览器并不遵循这一点

    • 这个问题是在HTML4.01成为常态时编写的，许多浏览器和功能都与今天不同。

    name属性用于发布到例如web服务器。 该id主要用于css（和javascript）。 假设你有这样的设置： 

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

    为了在发布表单时获得PHP的价值，它将使用name-attribute，如下所示： 

    $_POST["message_name"];

    如前所述，id用于样式设计，因为当您想要使用特定的CSS时。 

    #message_id
{
    background-color: #cccccc;
}

    当然，您可以对您的id和name-attribute使用相同的面额。 这两个不会互相干扰。

    此外，名称可用于更多项目，例如当您使用单选按钮时。 名称然后用于分组您的单选按钮，因此您只能选择其中一个选项。 

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

    在这个非常特殊的情况下，我可以进一步说如何使用id，因为您可能需要一个带单选按钮的标签。 标签具有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>

    我想这就是它。

    ID必须是唯一的

    ...在页面DOM元素树中，因此每个控件都可以通过其在客户端（在浏览器页面内）的id 单独访问

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

    • 在您的网页上拥有不唯一的ID仍会呈现您的网页，但它肯定无效。 解析无效的HTML时，浏览器相当宽容。 但不要仅仅因为它看起来有效就这么做。

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

    ...在相同类型的多个控件（想到单选按钮）之间的页面DOM内，因此当数据被发送到服务器时，只有特定值被发送。 因此，当您的页面上有多个单选按钮时，即使有多个相关的单选按钮控件具有相同的name ，也只有选定的value被发回服务器。

    将数据发送到服务器的附录 ：当数据发送到服务器时（通常通过HTTP POST请求），所有数据都以名称 - 值对的形式发送，其中name是输入HTML控件的name ， 值是输入/选择的value由用户。 对于非Ajax请求，情况总是如此。 在Ajax请求中，名称 - 值对可以独立于页面上的HTML输入控件，因为开发人员可以将他们想要的任何内容发送到服务器。 很多时候，值也是从输入控件中读取的，但我只是想说这不一定是这种情况。

    当名称可以被复制时

    在任何表单输入类型的控件之间共享名称有时可能是有益的。 但当？ 您没有说明您的服务器平台可能是什么，但是如果您使用了诸如Asp.net MVC之类的东西，那么您将获得自动数据验证（客户端和服务器）的好处，并将发送的数据绑定到强类型。 这意味着这些名称必须匹配类型属性名称。

    现在假设你有这种情况：

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

    • 所以你的视图的模型（因为它显示了一个列表）是IEnumerable<SomeType>类型，但是你的服务器端只接受一个SomeType类型的单个项目。

    那么名称分享怎么样？

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

    这个特殊的场景可以在我的创意故事迷你网站上看到。 你不会理解这种语言，但你可以查看这些多种形式和共享名称。 不要介意ID也是重复的（违反规则），但可以解决。 在这种情况下，这并不重要。

    链接地址: http://www.djcxy.com/p/15461.html

    上一篇: name vs. id

    下一篇: document.getElementById vs jQuery $()