HTML name与id的区别

HTML name与id的区别

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

HTML中name与id的区别表格

HTML中name与id的区别表格

	name属性	id属性
适用的html元素	button、input、meta、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" />

当提交表单时，只会有一个值（被选择的按钮）提交到服务器端。服务器端可使用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="三角形点击区域-网站建设与制作教程" />

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

定义框架内窗体的链接

通过在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]），后面可跟随：

• 英文字母
• 数字（[0-9]）
• 连字符（"-"）
• 下划线（"_"）
• 冒号（":"）
• 句点（"."）