HTML name与id的区别

html name vs id

猴子提示:对于“使用人做为例子,id就是他的身份证号,name就是他的名字,因此,id必须唯一,name可以重复”,这种坊间较流行的说法是不准确的

HTML中name与id的区别表格

HTML中name与id的区别表格
  name属性 id属性
适用的html元素 button、inputmeta、object、param、select、textarea、a、applet、form、frame、iframe、img、map 所有元素
唯一性 无须唯一 必须唯一
作为锚点 可以 [W3C已弃用,考虑兼容性可加上,梦之都的示例,已经去除name] 可以
CSS选择符关联 通过#关联
JavaScript关联 getElementsByName() [注意:此方法将获得页面所有name元素的对象数组] getElementById()
命名 相同 相同
区分大小写 区分 区分
作为表单提交信息 必须

name属性说明

W3C的XHTML1.0标准明确,在a、applet、form、frame、iframe、img、map元素中应弃用name属性,并明确在将来版本XHTML的上述元素中将删除此属性

W3C的XHTML1.0标准明确,唯一标记一个片段(fragment)应使用id,而非name。但考虑到对老式客户端浏览器的兼容可以按下列方式定义:

<a id="dreamdu" name="dreamdu">...</a>

猴子提示:JavaScript需要HTML文档中的元素有一个唯一的名称,以便于访问这些元素,但是HTML标准中并没有明确name必须唯一,因此W3C发明了id属性,并明确其必须唯一。可惜的是,一些老式浏览器不支持id

为了提高兼容性我们目前仍需要在上述元素中使用name,同时部分元素仍需使用name,这些元素包括:button、input、meta、object、param、select、textarea

标识HTML表单

在提交HTML表单时,通过HTTP的Get或Post将表单数据传送到服务端,name用于标识这些表单元素,比如input、textarea、select,例如:

用户名: 用户名: <input type="text" id="username" name="username" value="dreamdu" />
密码: 密码: <input type="password" id="pass" name="pass" />

在HTML表单中,input元素的type取radio时,会出现id不同而name相同的元素,例如:

注册域名 注册域名 <input type="radio" value="注册域名" id="service1" name="service" />
购买空间 购买空间 <input type="radio" value="购买空间" id="service2" name="service" />
购买云主机 购买云主机 <input type="radio" value="购买云主机" id="service3" name="service" />

当提交表单时,只会有一个值(被选择的按钮)提交到服务器端。服务器端可使用PHP语言接收提交的内容:

<?php
$_POST["service"];
?>

本例展示了input标签的多种表现方式 << 尝试编辑

可以使用label标签关联一个radio按钮。label具有for属性,可以通过input的id属性,关联label与input(当我们点击label时,radio按钮将被选择)

<label for="username">用户名</label> <input type="text" id="username" name="username" value="dreamdu" />
<label for="pass">密码 <input type="password" id="pass" name="pass" /></label>

本例展示了label标签的使用方法 << 尝试编辑

定义锚点

定义页面锚点,作为超级链接(A)的目的地。使用name属性时我们通常可以这样定义:

<h2 name="dreamdu">dreamdu</h2>

同时在另一个连接的href属性中定义:

<a href="#dreamdu">visited dreamdu</a>

上面方式可以使我们访问一个HTML文档中的指定位置。为了兼容性可以完善一下:

<h2 id="dreamdu" name="dreamdu">dreamdu</h2>

本例展示了指定位置的链接 << 尝试编辑

猴子提示:新的浏览器可以只定义id了,但为兼容性可加上name

定义图像热点链接区域

通过在img与map元素间,关联图像热点区域:

<img src="http://www.dreamdu.com/images/html_table.png" usemap="#Map" />
<map name="Map" id="Map">
	<area shape="rect" coords="35,29,135,99" href="/xhtml/" title="矩形点击区域-html教程" />
	<area shape="circle" coords="243,78,44" href="/css/" title="圆形点击区域-css教程" />
	<area shape="poly" coords="120,137,195,154,135,207" href="/webbuild/" title="三角形点击区域-网站建设与制作教程" />
</map>

本例展示了图像热点链接区域 << 尝试编辑

定义框架内窗体的链接

通过在frame与a元素间,关联链接与窗体:

<frame src="http://www.dreamdu.com/xhtml/" name="show" />

本例展示了框架内窗体的链接 << 尝试编辑

id属性说明

id,是identity的缩写,中文"身份标识号码"。id的标准定义:“此属性指定一个元素的名称。此名称必须在文档中是唯一的”

作为CSS选择符

用id作为CSS(style sheet)的选择符

#dreamducolor_id
{
    color: #cccc00;
}

本例展示了CSS选择符的使用方法 << 尝试编辑

作为JavaScript引用的元素名称

作为通过脚本语言(例如:javascript)引用特定元素的方法

<form id="dreamdu">
	<input id="input_dreamdu" name="ninput_dreamdu" type="text" value="dreamducontent" />
</form>

获取上例,显示"dreamducontent"的方法:

var content;
 
//function 1
content = document.getElementById("input_dreamdu").value;
 
//function 2
content = input_dreamdu.value;
 
//function 3
content = document.forms[0].input_dreamdu.value;
 
document.write(content);

定义锚点

定义页面锚点,作为超级链接(A)的目的地(同name属性中定义锚点的方式)

声明object元素

作为声明HTML object元素的名称

提高终端通用处理

为了客户端通用的处理(例如:当解压数据从HTML网页到数据库中或翻译HTML文档为其它格式时,用户标识区域)

猴子提示:给元素起名(定义id或name属性),是为了便于查找。用name可行,但id更加简单与可靠

如何选择name与id

猴子总结:name属性,通常用于为服务器端语言(例如:PHP、JSP)获取用户提交的信息。id属性,通常用于为客户端语言(例如:JavaScript、CSS)进行关联完成相关功能

一个网页有多个id取值相同的元素

如果一个网页有多个元素的id属性取值相同,系统如何处理?例如,下面示例的id取值都是service1,

<form id="dreamdu" action="dreamdu.php" method="post" enctype="multipart/form-data">
	注册域名 注册域名 <input type="radio" value="注册域名" id="service1" name="service" />
	购买空间 购买空间 <input type="radio" value="购买空间" id="service1" name="service" />
	购买云主机 购买云主机 <input type="radio" value="购买云主机" id="service1" name="service" />
	网站定位与策划 网站定位与策划 <input type="radio" value="网站定位与策划" id="service1" name="service" />
</form>
var content;
content = document.getElementById("service1").value;
document.write(content);

本例展示了一个网页有多个id取值相同的元素 << 尝试编辑

name不需要唯一吗?

猴子总结:id属性取值在一个网页内应该是唯一的,而name属性取值在一个表单(form)内应该是唯一的

name与id的命名规则

id与name属性的取值,必须以英文字母开始([A-Za-z]),后面可跟随:

参考