`
tudusi
  • 浏览: 1049610 次
文章分类
社区版块
存档分类
最新评论

html控件的id和name属性有什么不同

 
阅读更多
几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo"]却怎么也去不到值html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客。后来恍然大悟因该用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属性。这是什么意思啊?看下面的例子就明白了。
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客<scriptlanguage="JavaS<wbr>cript"</wbr>>
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客
varinput=document.createElement('INPUT');
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客input.id
='myId';
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客input.name
='myName';
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客alert(input.outerHTML);
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客
</script>

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

html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客<scriptlanguage="JavaS<wbr>cript"</wbr>>
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客
varinput=document.createElement('<INPUT name="myName">');
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客input.id
='myId';
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客alert(input.outerHTML);
html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客
</script>

消息框里显示的结果是:<INPUT id=myId name=myName>。
初始化Name属性的这个设计不是IE的缺陷,因为MSDN里说了要这么做的,可是这样设计的原理什么呢?我暂时没有想太明白html控件的id和name属性有什么不同 - chinaxcq@126 - chinaxcq@126的博客

这里再顺便说一下,要是页面中有n(n>1)个HTML元素的ID都相同了怎么办?在DHTML对象中怎么引用他们呢?如果我们使用ASPX页面,这样的情况是不容易发生的,因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让ID重复那IE怎么搞呢?这个时候我们还是可以继续使用document.getElementById获取对象,只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组,ID重复的元素按Render的顺序依次存在于数组中。

分享到:
评论

相关推荐

    combox 控件

    { id:1, pId:0, name:"父节点1",open:true}, { id:11, pId:1, name:"叶子节点11"}, { id:12, pId:1, name:"叶子节点12"}, { id:13, pId:1, name:"叶子节点13"}, { id:2, pId:0, name:"父节点2 ",open:true}, {...

    HTML5&CSS3网页制作:Input元素的type属性.pptx

    根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 描述 元素是表单中最常见的元素,网页中常见的单行文本框、单选按钮、复选框等都是通过...

    ajax搜索控件源码

    外观模仿的Bing CSS用的外联样式表的方式---(下面有HTML结构 不喜欢的可以重写CSS) 51aspx 使用了sql2000 中的pubs数据库中的authors表进行了测试。 可自行修改: web.config中的&lt;add name="ds071...

    用javascript添加控件自定义属性解析

    前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加:如有一文本框: 代码如下:&lt;input type=”text” id=”txtInput” name=”txtInput” value=”自定义文本”&...

    HTML开发王

    7.4.1 定义命名锚点(id属性和name属性) 7.4.2 链接到命名锚点 7.5 文档关系链接(link元素) 7.5.1 定义关系链接地址(href属性) 7.5.2 向前链接或者反转链接(rel和rev属性) 7.5.3 链接到外部样式表 7.5.4 使用link元素...

    html入门到放弃笔记

    4、一个元素允许有多属性,多属性间,排名不分先后,中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这...

    FormBuilder:从 JSON 为 Javascript、Node.js、PHP(Smarty,Twig)、Ruby 构建 html 表单

    行有一个标签(单个)、控件(多个)和消息(多个)。 行本质(标签、控件、消息)呈现的顺序相同。 标签是带有标签或跨度的 HTML 容器,带有文本内容 控件是 HTML 容器,内部有单独的控件或单个控件 控件是带有...

    从入门到精通HTML5——PDF——网盘链接

     12.3 新增的属性和废除的属性 234  12.3.1 新增的属性 234  12.3.2 废除的属性 236  12.4 全局属性 237  12.4.1 contentEditable属性 237  12.4.2 designMode属性 238  12.4.3 hidden属性 239  12.4.4 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET ... +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的AutoSizePanelID属性来代替。 -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel...

    Xpage学习笔记

    new dijit.form.NumberSpinner({name:"#{id:numSales}", value:myvalue, smallDelta:1, constraints:{min:0,places:0}}, XSP.getElementById("#{id:numSales}")); 2.5.3 在xpage中使用ProgressBar(dijit....

    jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值

    —、获取dropdownlist的text(ddlList为服务器端dropdownlist的ID,生成name属性等于ddlList的select标签) $(“#ddlList option:selected”).text() 二、获取dropdownlist的value(ddlList为服务器端dropdownlist的...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    anchors 获取所有带有 name 和/或 id 属性的 a 对象的集合。此集合中的对象以 HTML 源顺序排列。 applets 获取文档中所有 applet 对象的集合。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象...

    改变HTML下拉框SELECT选项的多种方法

    提交表单后返回的HTML页面重新渲染,SELECT控件的value和selectedIndex属性都无法使下拉框保留提交表单前的状态。 复制代码代码如下: &lt;SELECT id=”idState” style=”width:150″ name=”state” selectedIndex...

    JS固定表头和左边列V2.0(源码)

    name: checkbox的 name属性名称 解决启用bootstrap.css之后,表格列宽获取的问题,目前采用的方法是屏蔽,虽解决了问题,但不明所以,留待后续彻解。临时解决方案:在第3个参数(config)中指定 isBootstrap:true,...

    Javashop开发规范V2.2

    在某个实体Bean中,我们可能会有一些属性不对应数据库字段,这时我们需要在相应的 Geter方法中加上@NotDbField注解,以便使数据库机制知道这个字段不转为sql语句,如: private File file; @NotDbField public ...

    JS+html5制作简单音乐播放器

    其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮。 几个主要的标签如下: &lt;h4 id=name&gt;李玉刚 - 刚好遇见你 &lt;audio id=audio src=F:\KuGou\李玉刚 - ...

    零基础学ASP.NET 2.0电子书&源代码绝对完整版1

    App_Code\ Name.cs Name属性的自定义状态管理类。 第9章(\Chapter 09) 示例描述:本章学习母版页。 MasterPage.master 一个简单的母版页。 9-01.aspx 引用母版页。 MasterPage1.master 创建一个母版页...

Global site tag (gtag.js) - Google Analytics