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 ...
随机推荐
- 给JSP应用提供JSTL支持(IntelliJ IDEA)
===========手动分割线===2018-12-26============================================= Maven项目直接添加如下依赖即可: <de ...
- Keepalived + Mysql 主主复制高可用
环境 系统:Centos 7.4 x64 服务:Mariadb 5.5 .Keepalived 1.3.5.6 结构 主1:192.168.1.108 主2:192.168.1.109 VIP:19 ...
- Nginx rewrite配置
rewrite应用 Rewrite模块设置及Wordpress和Discuz的示例.Nginx的Rewrite规则比Apache的简单灵活多了,从下面介绍可见一斑. rewrite配置 Nginx可以 ...
- Convolutional Neural Network
Why CNN for Image 图片是由像素点组成的,可以这样来解释深度神经网络对图片的处理. 第一层的layer是最基本的分类器,区分一些基本的特征,比如颜色.是否有斜线. 第二层的layer会 ...
- powerdesigner 左边的列表框弄不见了怎么弄出来
快捷键 Alt + 0(数字零) 或者点击下面图片的 红色标识位置.就出来了.
- lastIndexOf 方法 (Array) (JavaScript)
lastIndexOf 方法 (Array) (JavaScript) 返回指定的值在数组中的最后一个匹配项的索引. 语法 array1.lastIndexOf(searchEleme ...
- PAT1054. The Dominant Color (20)
#include <iostream> #include <map> using namespace std; int n,m; map<int,int> imgM ...
- Spring -- 入门,装备集合,自动装配,分散装配,自定义编辑器
1. 概要 struts2:web hibernate:持久化 spring:业务层.管理bean的,容器.List Map Set. 体验spring: 1.创建java项目. 2.引入spring ...
- hdu 5768 Lucky7 中国剩余定理+容斥+快速乘
Lucky7 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem D ...
- TimeSpan 结构(struct)
TimeSpan 是结构类型(struct),即值类型,可以通过两个DateTime(struct)之差来获得,如下例子: DateTime departure = new DateTime(2010 ...