(重要) html概念之 input:name与id详解

实例:

带有两个文本字段和一个提交按钮的 HTML 表单:

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

定义和用法

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案: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: 建立页面中的锚点,我们知道<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属性。这是什么意思啊?看下面的例子就明白了。

<script language="JavaScript"> 
var input = document.createElement(‘INPUT‘); 
input.id = ‘myId‘; 
input.name = ‘myName‘; 
alert(input.outerHTML); 
</script> 
消息框里显示的结果是:<INPUT id=myId>。

<script language="JavaScript"> 
var input = document.createElement(‘<INPUT name="myName">‘); 
input.id = ‘myId‘; 
alert(input.outerHTML); 
</script> 
消息框里显示的结果是:<INPUT id=myId name=myName>。 
初始化Name属性的这个设计不是IE的缺陷,因为MSDN里说了要这么做的,可是这样设计的原理什么呢?我暂时没有想太明白。

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

表单元素(form input textarea select)与框架元素(iframe frame)用 name 
这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只 
接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下. 
有一个例外: A 可以赋 name 作为锚点, 也可以赋ID

当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了. 
赋 name: document.formName.inputName document.frames("frameName") 
赋 ID : document.getElementById("inputID") document.all.frameID

只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID) 
body li table tr td th p div span pre dl dt dd font b 等等

时间: 2024-08-27 01:12:44

(重要) html概念之 input:name与id详解的相关文章

Android4.0 input事件输入流程详解(中间层到应用层)

在Android系统中,类似于键盘按键.触摸屏等事件是由WindowManagerService服务来管理的,然后再以消息的形式来分发给应用程序进行处理.系统启动时,窗口管理服务也会启动,该服务启动过程中,会通过系统输入管理器InputManager来负责监控键盘消息.当某一个Activity激活时,会在该Service下注册一个接收消息的通道,表明可以处理具体的消息,然后当有消息时,InputManager就会分发给当前处于激活状态下的Activity进行处理. InputManager的启动

理解泛函的概念(图像处理中的数学原理详解)

全文目录请见 图像处理中的数学原理详解(Part1 总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 2.4  从泛函到变分法 作为数学分析的一个分支,变分法(Calculus of Variations)在物理学.经济学以及信息技术等诸多领域都有着广泛而重要的应用.变分法是研究依赖于某些未知函数的积分型泛函极值的普遍方法.换句话说,求泛函极值的方法就称为是变分法. 2.4.1  理解泛函的概念 变分法是现代泛函分析理论

表单中input的type用法详解

1.type=text. 输入类型是text,这是我们见的最多也是使用最多的, 比如登陆输入用户名,注册输入电话号码,电子邮件, 家庭住址等等.当然这也是Input的默认类型. 参数name:同样是表示的该文本输入框名称. 参数size:输入框的长度大小. 参数maxlength:输入框中允许输入字符的最大数. 参数value:输入框中的默认值. 特殊参数readonly:表示该框中只能显示,不能添加修改. 1 <form> 2 your name:input type="text&

文件和目录详解(二)---与进程有关的ID详解

与进程有关的 ID 大概有 6 种左右,如下图所示 ====================================================== 进程实际用户ID:就是创建此进程的用户的 ID: 进程有效用户ID:是进程用来评定对系统资源访问权限的用户 ID: 进程创建新文件的时候新文件的所有者被设置成进程的有效用户. 保存的设置用户ID:就是用来备份进程有效用户 ID 的:(后面的笔记再详细介绍) 通常情况下,进程的实际用户ID和有效用户ID是相同的.但是如果可执行文件的set

hibernate generator class=&quot;&quot; id详解 (转)

“assigned”   主键由外部程序负责生成,在   save()   之前指定一个.         “hilo”   通过hi/lo   算法实现的主键生成机制,需要额外的数据库表或字段提供高位值来源.          “seqhilo”   与hilo   类似,通过hi/lo   算法实现的主键生成机制,需要数据库中的   Sequence,适用于支持   Sequence   的数据库,如Oracle.          “increment”   主键按数值顺序递增.此方式的实

Kubernetes核心概念之Volume存储数据卷详解

在Docker中就有数据卷的概念,当容器删除时,数据也一起会被删除,想要持久化使用数据,需要把主机上的目录挂载到Docker中去,在K8S中,数据卷是通过Pod实现持久化的,如果Pod删除,数据卷也会一起删除,k8s的数据卷是docker数据卷的扩展,K8S适配各种存储系统,包括本地存储EmptyDir,HostPath,网络存储NFS,GlusterFS,PV/PVC等,下面就详细介绍下K8S的存储如何实现. 一.本地存储 1,EmptyDir ①编辑EmptyDir配置文件 vim empt

[Swift4.2互动教程]七、常见概念 - (3)尺寸CGSize的使用详解

本文将为你演示CGSize的使用 首先导入需要使用到的两个框架 1 import UIKit 2 import QuartzCore 定义一个尺寸对象,尺寸对象包含宽度和和高度两个参数.从右侧的结果可以看出,此时该尺寸对象的宽度和高度都是0 let zeroSize = CGSize.zero 初始化另一个尺寸对象,并设置它的宽度为20,高度为10 let size = CGSize(width: 20, height: 10) 查看该尺寸对象的高度和宽度的数值 1 size.width 2 s

在表单(input)中id和name的区别

在表单(input)中id和name的区别  但是name在以下用途是不能替代的: 1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制.因为有许多name会同时对应多个控件,比如checkbox和radio,而id必须是全文档中唯一的.此外浏览器会根据name来设定发送到服务器的request.因此如果用id,服务器是无法得到数据的. 2. frame和window的名字,用于在其他frame或window指定target. 例如:<frameset cols="

Storm概念、原理详解及其应用(一)BaseStorm

本文借鉴官文,添加了一些解释和看法,其中有些理解,写的比较粗糙,有问题的地方希望大家指出.写这篇文章,是想把一些官文和资料中基础.重点拿出来,能总结出便于大家理解的话语.与大多数"wordcount"代码不同的是,并不会有如何运行第一storm代码等内容,只有在运行完代码后,发现需要明白:"知其然,并知其所以然". Storm是什么?为什么要用Storm?为什么不用Spark? 第一个问题,以下概念足以解释: Storm是基于数据流的实时处理系统,提供了大吞吐量的实