细说HTML元素的ID和Name属性的区别

r囧r小猫 2022-07-21 08:09 147阅读 0赞

(转载)

[**细说HTML元素的ID和Name属性的区别**][HTML_ID_Name]

可以说几乎每个做过Web开发的人都问过，到底元素的ID和Name有什么区别阿？为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。  
  
    上周我也遇到了ID和Name的问题，在页面里输入了一个input type="hidden"，只写了一个ID='SliceInfo'，赋值后submit，在后台用Request.Params\["SliceInfo"\]却怎么也去不到值![emdgust.gif][]。后来恍然大悟因该用Name来标示，于是在input里加了个Name='SliceInfo'，就一切ok了。  
  
    第一段里对于ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：  
  
    用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。  
    用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。  
    用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。  
    用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。  
     用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="\#name"(被关联的MAP元素的Name)。  
    用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。  
  
    显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。  
  
    当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][]<script language="JavaScript"> ![dot.gif][]  
![InBlock.gif][]var input = document.createElement('INPUT');  
![InBlock.gif][]input.id = 'myId';  
![InBlock.gif][]input.name = 'myName';  
![ExpandedBlockEnd.gif][]alert(input.outerHTML);  
![None.gif][]</script>

消息框里显示的结果是：<INPUT id=myId>。

![ExpandedBlockStart.gif][] ![ContractedBlock.gif][]<script language="JavaScript"> ![dot.gif][]  
![InBlock.gif][]var input = document.createElement('<INPUT name="myName">');  
![InBlock.gif][]input.id = 'myId';  
![ExpandedBlockEnd.gif][]alert(input.outerHTML);  
![None.gif][]</script>

消息框里显示的结果是：<INPUT id=myId name=myName>。  
     初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白![emembarrassed.gif][]。  
  
    这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

JSP中如何获取radio 或checkbox的值 ![icn_point.gif][] 悬赏分：10 - 解决时间：2008-9-27 21:02JSP中如何获取radio 或checkbox的值额，，说个最简单的。<input type="radio" value="男"/><input type="radio" value="女"/>如何在页面中使用request.getParameter();获取选中的值呢。？ 提问者：  [121022133][] -  [三级][Link 1] 最佳答案

[检举][Link 2]    ![jj_arr.gif][]

1.关于Radio Button比如这里有个form.html，而且它要提交到result.jsp<form action="result.jsp" method="post"><input type="radio" value="男" name="gender"/><input type="radio" value="女" name="gender"/></form>然后在result.jsp页面中使用：<%String gender = request.getParameter("gender");out.println("<h1>" + gender + "</h1>");%>这样就行了2.关于Check Box比如这里有个form.html，而且它要提交到result.jsp<form action="result.jsp" method="post"><input type="checkbox" value="男" name="gender"/><input type="checkbox" value="女" name="gender"/></form>然后result.jsp页面中使用：<%String\[\] genders = request.getParameterValues("gender");for (int i=0; i<genders.length; i++)\{out.println("<h1>" + genders\[i\] + "</h1>");\}%>这样就行HTML id 属性 [**id**][id] 属性 -- 用于唯一标识一个元素

*  引用网址:http://www.dreamdu.com/xhtml/attribute\_id/

你可能有以下几种原因使用到id属性

*  你想[链接到一个页面的指定位置][Link 3].
 *  你要在某个HTML元素上使用特定的[css样式][css].
 *  你要为每个HTML元素使用script(比如javascript)
 *  你要区分两个相同的HTML元素.

示例<div id="dreamdu1">使用dreamdu1和dreamdu2来区分两个div标签<div><div id="dreamdu2">使用dreamdu1和dreamdu2来区分两个div标签<div>说明

*  与[id][]属性相同的属性是[name][],此属性可以使用在HTML4的文档中,新的web标准已经抛弃了此属性.所以使用name属性的时候应该使用XHTML过渡定义类型([xhtml1-transitional.dtd][]),不能使用在XHTML严格定义类型中([xhtml1-strict.dtd][xhtml1-transitional.dtd]).
 *  **id**属性在整个页面与CSS样式表中一定要是唯一的,在整个网站中最好也是唯一的.

延伸阅读

*  [HTML class 属性][HTML class]
 *  [CSS 选择符 -- CSS的名字][CSS _ -- CSS]
 *  [HTML name 属性][name]

参考

*  [HTML4 Element identifiers: the id][HTML4 Element identifiers_ the id]
 *  [XHTML2 XHTML Core Attributes Module: the id][XHTML2 XHTML Core Attributes Module_ the id]

From " [HTML id 属性 - HTML属性索引 - HTML教程,XHTML教程][id]" [上一页][Link 4] /  [下一页][name] /  [教程列表][Link 5] [向上][Link 6] /  [上一页][Link 4] /  [下一页][name] /  [教程列表][Link 5]

收藏于 2010-04-09

[HTML_ID_Name]: http://www.cnblogs.com/birdshome/archive/2005/01/31/html_id_name.html
[emdgust.gif]: /images/20220720/9983b0ca616644d0b6c89268e646a6b8.png
[ExpandedBlockStart.gif]: http://www2.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: http://www2.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: /images/20220720/21263eaa735b443fadd6fa1d409c813b.png
[InBlock.gif]: /images/20220720/e17d837e137c4538b2856df6988c93df.png
[ExpandedBlockEnd.gif]: /images/20220720/2ddba9c5122d4c77a30a97247eea63dc.png
[None.gif]: /images/20220720/dbbd9151daa040b1b850c1ca082bd580.png
[emembarrassed.gif]: /images/20220720/429459f90abb45a2bff34cdf8d92f285.png
[icn_point.gif]: /images/20220720/e0800e8a08a343dfb8bbf3cd00e2f26f.png
[121022133]: http://passport.baidu.com/?business&aid=6&un=121022133#2
[Link 1]: http://www.baidu.com/search/zhidao_help.html#如何选择头衔
[Link 2]: http://zhidao.baidu.com/question/69802495#
[jj_arr.gif]: /images/20220720/8155d02b4f8c4e999f6573a5b959d0a2.png
[id]: http://www.dreamdu.com/xhtml/attribute_id/
[Link 3]: http://www.dreamdu.com/xhtml/attribute_a_id/
[css]: http://www.dreamdu.com/css/
[name]: http://www.dreamdu.com/xhtml/attribute_name/
[xhtml1-transitional.dtd]: http://www.dreamdu.com/xhtml/tag_doctype/
[HTML class]: http://www.dreamdu.com/xhtml/attribute_class/
[CSS _ -- CSS]: http://www.dreamdu.com/css/selector_novice/
[HTML4 Element identifiers_ the id]: http://www.w3.org/TR/html401/struct/global.html#adef-id
[XHTML2 XHTML Core Attributes Module_ the id]: http://www.w3.org/TR/xhtml2/mod-core.html#adef_core_id
[Link 4]: http://www.dreamdu.com/xhtml/attribute_dir/
[Link 5]: http://www.dreamdu.com/xhtml/
[Link 6]: http://www.dreamdu.com/xhtml/attribute_id/#