Example introduction and analysis of the difference between id and name attributes in input

I still haven’t figured out the difference between name and id in input. I encountered this problem while studying, so I sorted out the collected information for future use. I have been building a website for a long time, but I still haven’t figured out the difference between name and id in input. I recently learned jquery and encountered this problem again, so I collected information online. After seeing this article, I sorted it out for later use.

It can be said that almost everyone who has done web development has asked, what is the difference between the ID and Name of an element? Why do we need Name when we have ID?! And we can also get the most classical answer: ID is like a person's ID number, and Name is like his name. ID is obviously unique, and Name is repeatable.

Last week I also encountered the problem of ID and Name. I entered an input type="hidden" on the page and only wrote an ID='SliceInfo'. After assigning the value, submit and use Request in the background. Params["SliceInfo"] cannot get the value. Later, I suddenly realized that it should be marked with Name, so I added Name='SliceInfo' to the input, and everything was ok.

The answer to ID and Name in the first paragraph is too general. Of course, that explanation is completely correct for ID, which is the Identity of the HTML element on the client side. Name is actually much more complicated, because Name has many uses, so it cannot be completely replaced by ID, thus canceling it. The specific uses are:

Use 1: As a server-side indicator of HTML elements that can interact with the server, such as input, select, textarea, and button. We can get the value submitted by the element through Request.Params based on its Name on the server side.
Use 2: HTML element Input type='radio' grouping, we know that the radio button control is in the same grouping class, the check operation is mutex, only one radio can be selected at the same time, this grouping is based on the same Name attribute realized.
Purpose 3: Establish an anchor point in the page. We know that 91d83b4822db6c9c4aabe5918601cc24link5db79b134e9f6b82c0b36e0489ee08ed is to obtain a page hyperlink. If you do not use the href attribute, use Name instead, such as: < ;a name="PageBottom">5db79b134e9f6b82c0b36e0489ee08ed, we get a page anchor.
Use 4: Identity as an object, such as Applet, Object, Embed and other elements. For example, in an Applet object instance, we will use its Name to refer to the object.
Purpose 5: When associating between IMG elements and MAP elements, if you want to define the hotspot area of ​​​​IMG, you need to use its attribute usemap, so usemap="#name" (Name of the associated MAP element).
Use 6: Attributes of certain specific elements, such as attribute, meta and param. For example, define parameters c482d017ac37d0493b1edf90b225c0b5 for Object or db0f0129396a875c0f18375780d74f03 in Meta.

Obviously these uses cannot be simply replaced by ID, so the difference between ID and Name of HTML elements is not the difference between ID number and name. They have different functions. .

Of course, the Name attribute of the HTML element can also play a role as an ID in the page, because in the DHTML object tree, we can use document.getElementsByName to obtain an object array containing all specified Name elements in the page. . There is another problem with the Name attribute. When we dynamically create an element that can contain the Name attribute, we cannot simply use the assignment element.name = "..." to add its Name. We must use document.createElement( when creating the Element. 'dc549ff4942b59c926c9e4e7a7132efea24c0203f0ae689239f065103120aae7') adds the Name attribute to the element. what does this mean? Just look at the example below to understand.

The code is as follows:

<script language="JavaScript"> 
var input = document.createElement(&#39;INPUT&#39;); 
input.id = &#39;myId&#39;; 
input.name = &#39;myName&#39;; 
alert(input.outerHTML); 
< /script>

The result displayed in the message box is: 7c4910ae3e1ff2731c00ced15cbfeb3c.

code show as below:

< script language="JavaScript"> 
var input = document.createElement(&#39;<INPUT name="myName">&#39;); 
input.id = &#39;myId&#39;; 
alert(input.outerHTML); 
< /script>

消息框里显示的结果是：fcd57d8d6086a1073f231e2d47bdc82a。
初始化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 p span pre dl dt dd font b 等等

更多input中id和name属性的区别示例介绍分析相关文章请关注PHP中文网！