信息一:
id主要是在客户端脚本里用,name主要是用于获取提交表单的某表单域信息。在form里面,如果不指定Name的话,就不会发送到服务器端哦!
信息二:
input select form frame iframe 用name
table tr td div p span h1 li 用id
表单元素(form input textarea select)与框架元素(iframe frame)用name,这些元素都与表单(框架元素作用于form的target)提交有关,在表单的接收页面只接收有name的元素, 赋ID的元素通过表单是接收不到值的。
当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了.
赋 name: document.formName.inputName document.frames("frameName")
赋 ID : document.all.inputID document.all.frameID
只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)
body li a table tr td th p div span pre dl dt dd font b 等等
信息三:
HTML、CSS里面关于 id、class、name 属性的区别和用法
name和id
name原来是为了标识之用,但是现在根据规范,都建议用id来标识元素。
以下只能用name:
1.
表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为许多时候一个name会同时对应多个控件,比如checkbox和
radio,而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无法得到数据的。
2. frame和window的名字,用于在其他frame或window指定target。
以下只能用id:
1. label与form控件的关联,
<label for="MyInput">My Input</label>
<input id="MyInput" type="text">
for属性指定与label关联的元素的id,不可用name替代。
2. CSS的元素选择机制,以#MyId的方式指定应用样式的元素,不能用name替代。
3. 脚本中获得对象:
IE支持在脚本中直接以id(而不是name)引用该id标识的对象。例如上面的input,要在脚本中获
得输入的内容,可以直接以MyInput.value来获得。
如果用DOM的话,则用document.getElementById("MyInput").value,如果要用name的话,通常先
得到包含控件的form,例如document.forms[0],然后从form再引用name,注意这样得到的是经过计
算后将发送给服务器的值。
name与id的其他区别是:
id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上
没有什么要求,甚至可以用数字。
class和id
在一个HTML网页中,id是唯一的,即只有某一个标签,或某一个块的标识符是这个id。
class可重复使用,用来根据用户定义的标准对一个或多个元素进行标记和定义。
实际使用中,class可能对文字的排版等比较有用,而id则对宏观布局和设计放置各种元素较有用。
综合例子:
网页代码有
<div id=m_blog>
<div class=opt>
<a id=myLink href="xxx">
</div>
</div>
用CSS控制这个链接的停留样式,
可以这样写 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}
信息四:
细说HTML元素的ID和Name属性的区别
几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?
而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用 Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用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: 建立页面中的锚点,我们知道link是获得一个页面超级链接,如果不用href属性,而改用Name,如:,我们就获得了一个页面锚点。
用途4: 作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。
用途5: 在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。
用途6: 某些特定元素的属性,如attribute,和param。例如为Object定义参数。
显然这些用途都不是能简单的使用ID来代替掉的,所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。
我们可以通过一段代码来分析一下其中的微妙差别:
代码如下:
<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id=”oDemo2” value="DEMO" />
</form>
在IE浏览器里,我们可以通过多少方法来索引到这个文本框对象?(为区别起见,我们把NAME和ID设成了不同的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all.demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')
以上9种索引方法在IE6里面全部通过返回值测试,不过值得注意的是最后一种:在IE6里,我把索引对象写成document.getElementById('oDemo'),浏览器也能正确索引到对象,真是可怕的容错性啊!!
接着问题来了,我们把这段代码放在Mozilla Firefox
1.0里再执行一次,只有第7种方法返回“undefined”,其他的方法可以正确索引到对象,不过由于第3、4种方法用到了document.all
这个IE专有对象,FF1.0虽然返回了正确的值,不过却在控制台里发出了警告:警告:非标准的属性 document.all。请使用 W3C
的标准形式 document.getElementById()
。
接下来我们把HTML文本类型定义得严格一点,在源代码开头加上:<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">使HTML文本按照HTML4.01标准去解析,在IE6里照样
全部通过返回值测试,不过在Mozilla Firefox 1.0里麻烦就大了,第3、4种方法没有任何的返回值,而在控制台里发出了报错信息:错误:
document.all has no properties ,而第7种方法依旧返回“undefined”。
小 结
NAME主要应用在交互式网页,表单提交给某个服务器端脚本后接收变处理量使用。从源代码的规范性和兼容性角度出发,如在客户端脚本里要索引某个对象,建议用
document.getElementById()
另外举个简单的例子:
<form name="form1">
用户名:<input type=text name="username" id="username">
密码:<input type=password name="password" id="pwd">
</form>
如果我要获得用户名和密码;JS用name获得的话,就得写成document.form1.username.value;
document.form1.password.value;
用id获得:
docuement.getElementById("username");
docuement.getElementById("pwd");
有时候name 可能会出现相同的名字,所以这时候我们用name获得就无法确定获得的是哪个值了。
document.getElemntsByName("username");
这里得到的是一个数组
当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。
在这里顺便说一下,要是页面中有n(n>1)个HTML元素的ID都相同了怎么办?在DHTML对象中怎么引用他们呢?如果我们使用ASPX页
面,这样的情况是不容易发生的,因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一,这是页面会被抛出异常而不能被正常的render。
要是不是动态页面,我们硬要让ID重复那IE怎么搞呢? 这个时候我们还是可以继续使用document.getElementById获取对象,只不
过我们只能获取ID重复的那些对象中在HTML
Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组,ID重复的元素按Render的顺序依次存在于数组中。
发表评论
-
15个 HTML5 教程和参考手册
2010-11-28 21:20 1194原文:http://xuui.net/ui-design ... -
IE的HTML HACK条件注释
2010-08-24 17:04 714在CSS布局中,我们可以使用CSS HACK 来区分浏览 ... -
IE6下PNG图片透明(alpha通道)的5种方法
2010-08-07 19:18 1651想特别说明一下,IE6与生俱来就支持png8的索引色透明度,但 ... -
如何做网页设计的10个小窍门
2010-04-09 22:25 664这片文章大体概括了 ... -
Google的10大设计原则
2010-04-05 02:28 614下面是Google的用 户体验设计 师Jon Wiley ... -
雅虎团队经验:网站页面性能优化的34条黄金守则
2010-04-05 02:26 7061、尽量减少HTTP请求次 ... -
HTML的优化杂记
2010-04-05 02:25 641在Perfection kills 上看到他去年写的一篇 ... -
IE6终极备忘单——对IE6单独兼容
2010-04-05 02:17 949原文:Ultimate IE6 Cheatsheet: How ... -
19个Web安全字体
2010-04-05 02:16 1290在Web编码中,CSS默认 ... -
英文字体学习笔记
2010-04-05 02:12 1700昨天一直在阅读Type is ...
相关推荐
显然这个ID和Name的解答说的太笼统了,当然那个解释对于ID来说是完全对的,它就是Client端HTML元素的Identity。而Name其实要复杂的多,因为Name有很多种的用途,所以它并不能完全由ID来代替,从而将其取消掉。具体...
Input元素的type属性 Input元素 01 Input元素 普通文本框 密码文本框 按钮 Input元素 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 ...
在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复。 在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性,而在一个...
用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2....
比如要获取页面p标签中属性有id的元素 代码如下: $(“p[id]”).css(“color”,”red”); 根据属性值获得元素 1.$。在jQuery 中$(“”),这个语法等同于$(document.createElement(“span”)) ,这是一种用法,在选择...
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元素...
<output name="x" for="属性值"> 说明 属性 值 描述 for element_id 定义输出域相关的一个或多个元素。 form form_id 定义输入字段所属的一个或多个表单。 name name 定义对象的唯一名称。(表单提交时使用) output...
元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null; 其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document; 元素的 childNodes 属性中...
根据元素的id属性值选中一个唯一的元素 语法:#id {} 例子: #box1{} #hello{} 类选择器 根据元素的class属性值,选中一组元素 语法:.class{} 例子: .hello{} .box{} 通配...
如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个. 让我们看一个例子.假定...
主要属性:id name action method 2.input元素: 主要属性:name type value class type: text submit button radio checkbox hidden reset file password 3.文本框/密码框:...
元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单: 参考代码: 代码如下:// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……) $(‘id_nam
下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了
12.2 新增的元素和废除的元素 228 12.2.1 新增的结构元素 228 12.2.2 新增的块级的语义元素 230 12.2.3 新增的行内的语义元素 231 12.2.4 新增的嵌入多媒体元素与交互性元素 231 12.2.5 新增的input元素...
id属性为输入字段提供唯一的标识符,name属性定义了提交到服务器的字段名称。 • <input type="submit">: 提交按钮。点击此按钮将提交表单。 注意:这只是一个基本的表单,实际上你可能需要包含更多的HTML元素,例如...
HTML表单元素的属性有所改善。 想法:使条件动态必需元素而不是仅使静态必需元素成为条件。 例如:有2个区域的无线电切换器(交付类型:“接机”;“ EMS”过帐)和第2个无线电的4个字段。 我希望在此情况下,如果...
1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div <div align="center" id="container" title="这是一个div"> 四大标准...