html5中id和name的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5中id和name的区别相关的知识,希望对你有一定的参考价值。

  html 中 id与name 区别

    一个name可以同时对应多个控件,比如checkbox和radio

    而id必须是全文档中唯一的

  id的用途
1) id是HTML元素的Identity,主要是在客户端脚本里用。
2) label与form控件的关联,如
      <label for="MyInput">My Input</label>
      <input id="MyInput" type="text">
     for属性指定与label关联的元素的id,不可用name替代
3)脚本中获得对象:IE支持在脚本中直接以id(而不是name)引用该id标识的对象。
例如上面的input,要在脚本中获得输入的内容,可以直接以 MyInput.value来获得。如果用DOM的话,则用document.getElementById("MyInput").value;
如果要用name的话,通常先得到包含控件的form,例如document.forms[0],然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值


name的用途
1)主要是用于获取提交表单的某表单域信息, 作为可与服务器交互数据的HTML元素的服务器端的标示,比如input、select、textarea、框架元素(iframe、frame、 window的名字,用于在其他frame或window指定target )和button等,这些元素都与表单(框架元素作用于form的target)提交有关,浏览器会根据name来设定发送到服务器的request, 在表单的接收页面只接收有name的元素,  所以赋ID的元素通过表单是接收不到值的。 我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。在form里面,如果不指定name,就不会发送到服务器端。

  2)HTML元素Input type=\'radio\'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的name属性来实现的。

  3)建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点,如<strong><a name="1" id="1"></a>Experience (XP)</strong>,详见 示例

  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">。

参考技术A name是用来提交数据的,提供给表单用,可以重复;
id则针对文档操作时候用,不能重复。如:document.getElementById();

一、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 等等
参考技术B html5中id和name的区别如下:
1、id是一个全局的唯一标识,可以作为一个html对象唯一替代。
比如:
<form name="myCheckListForm">
<input type="text" id="checklistItem" value="just a text">
</form
验证数值的时候可用:checklistItem.value)
而不用document.getElementById("checklistItem").value
2、name是一个对象的内部名字,有可能重复,所以搜索的时候要按层次进行,比如
<form name="myCheckListForm">
<input type="text" name="checklistItem" value="just a text">
</form>
取值的时候要使用:document.myCheckListForm.checklistItem.value
以上就需要遍历所有的属性来找到name为checklistItem对象的value值。
参考技术C name是用来提交数据的,提供给表单用,可以重复;id则针对文档操作时候用,不能重复。如:
document.getElementById();
一、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值的时候引用这些元素的方法就要变一下了。

HTML 5 区别输入 id 和输入名称? [复制]

【中文标题】HTML 5 区别输入 id 和输入名称? [复制]【英文标题】:HTML 5 difference input id and input name? [duplicate] 【发布时间】:2012-04-27 07:08:59 【问题描述】:

我正忙于用 HTML 5 为学校做一些事情。

这是我的代码

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="your name" required><br>

所以我的问题实际上是:

NAME 和 ID 有什么区别?目的?哪个更重要?

【问题讨论】:

另外一件事,顺便说一句:“name”是 javascript 中的保留字,它可能会导致您出现错误行为。 【参考方案1】:

简而言之,name 是您提交表单时发送到服务器的标识符。 id 是浏览器、客户端、javascript 等的唯一标识符。

【讨论】:

【参考方案2】:

name 属性用于向服务器提交表单元素;许多元素可能共享相同的name(例如单选按钮,必须在集合中具有相同的名称)。

id 属性用于唯一标识任何元素(不仅仅是表单元素)。它必须在整个文档中是唯一的。

【讨论】:

并且:防止大脑过载的一种常见的良好做法是在需要时为 id 和 name 使用相同的值。 (并且,在 php/javascript 程序中使用与表示节点或其值的变量相同的名称,并使其与页面上显示的标签相似。)对于单选按钮(名称在多个节点之间共享/ids),使用明显对应的名称,例如name="buttons" id="buttons-yes"【参考方案3】:

id 属性在您的文档中应该是唯一的。只有一个元素可以具有给定的 id。 document.getElementById() 查找具有给定 id 的第一个元素。

name 属性在提交表单时被表单用作键/值对中的键。 value 属性既显示在浏览器中,又与表单一起提交。

两者都不是“更重要”,它们只是不同而已。如果您有 XML 思维方式,那么它们都只是节点上的属性。但在 HTML 中,它们具有更多含义。

【讨论】:

以上是关于html5中id和name的区别的主要内容,如果未能解决你的问题,请参考以下文章

html里name和id的区别

web开发

HTML 中的name属性和id属性有啥区别?

html中,id,name,class之间的有啥区别?

html中,id,name,class之间的有啥区别?

input中id和name属性的区别