html5中id和name的区别

html-css010

html5中id和name的区别,第1张

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

有用的,只是你现在如果是做纯静态页面感觉是没什么用,但是如果用js了,就有用了,当调用js的

document.getElementsByName("name名称")//获取页面元素对象,如果你在页面的<input name="text1" value=""/>,那么var obj=document.getElementsByName("text1")

这里会获取到一个跟你页面取相同名字元素对象的数组,方便您后续操作,这个你后面用到了就知道了,加油哦!

这里说说ID,name这些:

id主要是本地用的,比较寻找控件,赋值样式什么的

name是通讯用的,POST和GET的时候,所形成的 键/值 对,都是使用name的(这个主要涉及到跟后台数据交互问题,比较重要,没有name属性后台就获取不到数据,那你做的页面就只能是静态的了)

比如

<input type="text" id="textRed" name="text1" />

CSS里写的是

#textRed{ background-color:red}

在ASP里要获取这个文本值的时候就是:

dim s as string=request("text1")

在JSP中会根据:

String value = request.getAttribute("text1")//根据你设置的name名称text1获取页面的值

表单是前端用于向后台(PHP也好,JAVA也罢)提交数据的,form标签,对于网页来说,会“读取到”这是一个表单,是用于向后台提交数据的,通过form标签中属性的定义,确定要提交数据的地址(向哪里提交数据)以及提交数据的方式。换言之,如果没有form标签,表单数据是不能被“同步”提交的

input当中的name属性,也是为后台准备的,后台获取数据的方法是通过input的name属性,比如想要获取一个input的value值,input的name为user,那么在后台语言(如PHP)中,就通过 $_GET['user'] 的方法来获取