HTML_id和name的详解

二者的区别与联系

• 区别
• name用于多次出现元素的样式定义，`允许有重复的值

• id：是唯一标识符，不允许有重复

• 联系
• 功能相同，都可以用来标识html标签
• 都可以用javascript来根据指定的id / name获得它的对象引用
• 举例：

document.getElementsByName("XX") // 获得页面所有name元素的对象数组
document.getElementById("XX") //获取id号为”XX”的值

• 举例：

• id 就像是一个人的身份证号码，而 name就像是他的名字，id显然是唯一的，而 name是可以重复的

二者的常见用途

• name的常见用途

• 作为可与服务器交互数据的HTML元素的服务器端的标识，比如input,select,textarea,button等，我们可以在服务器端根据其name通过 Request.Params 取得元素提交的值,当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性

• HTML元素Input type='radio'分组，我们知道radio，button控件是同一个分组类，操作是互斥的，同一时间只能选中一个radio，这个分组就是根据相同的name属性来实现的

• 用途3： 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用name如：<a name="PageBottom"></a>，我们就获得了一个页面锚点

• id的用途

• 用途1： id就是Client端HTML元素的Identity（标记），主要是在客户端脚本里用。

• 用途2：label与form控件的关联中，for属性指定与label关联的元素的id，不可用name替代

• 举例：

<label for="MyInput">My Input</label>   
<input id="MyInput" type="text"> 

• 在表单当中，由于有些控件具备多元素特性，例如radio,checkbox等，使用id不便于表单数据的提交，此外浏览器会根据name来设定发送到服务器的request，因此在表单当中，用name来提交数据，如果不指定Name，就不会发送到服务器端
• 除去与表单相关的元素，只能赋id而不能赋name，这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b 等等

HTML中name与id的区别对比

|name属性|id属性|
----|----|----
适用的html元素 | button、input、select、textarea、a、img、form applet、frame、iframe、map、meta、object、param | 所有元素
唯一性|不唯一|唯一
作为锚点|可以 [W3C已弃用]|可以
JavaScript关联|getElementsByName() | getElementById()
作为表单提交信息|必须|无

相关文章推荐：
细说HTML元素的ID和Name属性的区别
HTML、CSS里面关于 id、class、name 属性的区别和用法