HTML中id与name的用法
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?
而同样我们也可以得到最经典的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
上面一段对于ID和Name的解答说的太笼统了,以下我们来具体探讨一下。
一、name和id 都可以用来调用html中的元素
当我们需要在脚本里访问页面内一个html元素的时候,一般都是通过指定HTML元素的id或name
WEB标准下可以通过getElementById() 、getElementsByName() 、 getElementsByTagName()访问HTML文档中的任一个元素。
要访问某一特定元素尽量用标准的document.getElementById(id)。
如果一个文档中有两个以上的标签NAME相同,那么document.getElementsByName(name)就可以取得这些元素组成一个数组。
访问标签则用标准的document.getElementByTagName(tag)。
注意:id 标识的是大小写敏感的,而name基本上没有什么要求,甚至可以用数字。
二、什么情况下必须用name?
1、表单元素(例如:form、input、textarea、select 、button 等)通常与表单提交有关,在表单的接收页面只接收有name的元素,赋id的元素通过表单是接收不到值的。在form里面,如果不指定Name的话,就不会发送到服务器端。
2、表单元素复选框checkbox、单选按钮
radio 通常会对应多个控件,这时必须用name属性来实现分组。同一组使用同一个name。使两个题目的选项之间不产生干扰。
3、框架元素(iframe、frame)的名字,用于在其他iframe、frame指定target。
4、建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用name,如:<a name="pageTop"></a>,我们就获得了一个页面锚点。
5、在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的name)。
6、某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Admin10000.com">
三、什么情况下必须用id ?
1、label与form控件的关联。
<label for="MyInput">My
Input</label>
<input id="MyInput"
type="text">
for属性指定与label关联的元素的id,不可用name替代
2、id 可以用来设置一个css样式。
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基本上没有什么要求,甚至可以用数字。
table、tr、td、div、p、span、h1、li等元素一般用id。与表单相关的元素也可以赋ID值, 但为这些元素赋ID值的时候引用这些元素的方法就要变一下了,具体的如下:
赋name时,引用元素的方式: document.formName.inputName 或 document.frames("frameName")
赋id时,引用元素的方式: document.all.inputID 或 document.all.frameID
除去与表单相关的元素,只能赋id不能赋name,这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等
HTML中id与name的用法的更多相关文章
- Spring mvc中@RequestMapping 6个基本用法
Spring mvc中@RequestMapping 6个基本用法 spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: Java代码 @Reques ...
- SQL Server中Rowcount与@@Rowcount的用法 和set nocount on 也会更新@@Rowcount
rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...
- Linq中关键字的作用及用法
Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...
- SQL Server中Rowcount与@@Rowcount的用法
rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...
- HTML中id、name、class 区别
参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...
- jquery中append跟prepend的用法
jquery中append和prepend的用法 append 是插入到元素中,并放到元素内的最后面prepend 是插入到元素中,并放到元素内的最前面例$("body"). ...
- SQL Server 中 with tmp 临时表的用法
SQL Server 中 with tmp 临时表的用法 ----------with临时表用法,有时候采用临时表比采用in的效率更高,避免了全表扫描. 实例中实现了查询普通题.大题.子题目的sql ...
- html css中id和class的区别比较
在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...
- 转载——SQL Server中Rowcount与@@Rowcount的用法
转载自:http://www.lmwlove.com/ac/ID943 rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set ...
随机推荐
- jQuery动态网址标签
在线演示 本地下载
- 利用web workers实现多线程处理
利用web workers在后台线程中实现对数据库的增删改查操作,并在后台线程中生成页面上某个列表的完整的HTML代码,然后再前台脚本中直接将这段HTML代码输出到页面上! 利用web workers ...
- lamp架构之升级php版本
当你看到这篇文章的时候 YHSPY.COM 服务器上的PHP版本已经从 5.4.27 升级到了 7.0.4,这是一个重大的飞跃.一路升级遇到了很多问题.官方声称PHP7最大的升级就是在语言性能上的提升 ...
- Matlab绘图基础——图形绘制的插值 以及 图像大小的重采样
使用说明:图形绘制时的插值 interp1 %1-D data interpolation interpft %使用fft算法插值 %将原数据x转换到频率域,再逆转换回来更密集的数据采样 ...
- Vue-深入-1
1.关于vue get setVue 不能检测到对象属性的添加或删除 把一个普通 Javascript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object. ...
- javascript页面打印
打印本身比较简单,但要考虑到具体的需求.比如 1. 多浏览器: if (isIE()) { //打印预览 WebBrowser1.execWB(7, 1); } else { window.print ...
- 矩阵螺旋遍历Spiral Matrix,Spiral Matrix2
SpiralMatrix: Given a matrix of m x n elements (m rows, n columns), return all elements of the matri ...
- scala学习手记8 - 自适应的默认做法
scala有一些默认做法,会让代码更简洁.更易读写,下面列出了这样几个特性: 1. 支持脚本.scala支持脚本,因此无须将所有的代码都放到类里.如果脚本可以满足需求,就将代码放到一个脚本里,无须再创 ...
- angularjs分页组件
这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码.技术比较渣,先这样了. // ====== 2019-1-3 ======/ ...
- BZOJ 3329 Xorequ:数位dp + 矩阵快速幂
传送门 题意 现有如下方程:$ x \oplus 3x = 2x $ 其中 $ \oplus $ 表示按位异或. 共 $ T $ 组数据,每组数据给定正整数 $ n $,任务如下: 求出小于等于 $ ...