The difference between the ID and the name attribute in input

the difference between the ID and the name attribute in input

Web site for a long time, but has not yet figured out the difference between the name and ID in input, recently learning jquery, and encountered this problem, on the Internet to collect information. When you see this, sort it out for later use.

It can be said that almost every person who has done web development has asked, exactly what is the difference between the ID and name of the element? Why is there an ID and name?! And also we can get the classical answer: ID is like a person's identity card number, and name is like his name, ID is obviously unique, and name can be duplicated.

Last week I also encountered the problem of ID and name, entered a page input type= "hidden", only wrote a id= ' Sliceinfo ', after the assignment, in the background with request.params["Sliceinfo"] But how can not go to the value. Then suddenly, because the name to mark, so in the input Riga a name= ' Sliceinfo ', everything OK.

The answer to ID and name in the first paragraph is too general, and the explanation is completely right for the ID, which is the identity of the client HTML element. The name is much more complex, because name has many uses, so it is not completely replaced by the ID, which cancels it out. Specific uses are:

Purpose 1: As the server side of HTML elements that can interact with the server, such as input, select, TextArea, and button. We can get the value of the element submitted by request.params on the server side according to its name.
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 a mutex, only one radio is selected at the same time, and this grouping is implemented according to the same name property.
Purpose 3: Establish the anchor point in the page, we know <a href= "URL" >link</a> is to get a page hyperlink, if you do not use the href attribute, instead of using name, such as: <a name= "Pagebottom" > </a> and we get a page anchor point.
Purpose 4: As an identity for an object, such as an 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 an IMG element with a MAP element, if you want to define an IMG hotspot area, you need to use its attribute usemap to make usemap= "#name" (the name of the associated map element).
Purpose 6: Properties of certain specific elements, such as Attribute,meta and Param. For example, define a parameter for object <param name = "Appletparameter" value = "value" > or META in <meta name = "Author" CONTENT = "Dave Raggett" >.

Obviously these uses are not simple to use the ID to replace, so the HTML element ID and name is not the identity card number and the name of the difference, they are more than a different role of things.

Of course, the Name property of the HTML element can also function as a bit of ID in the page, because in the DHTML object Tree, we can use Document.getelementsbyname to get an array of objects containing all the specified name elements in the page. Another problem with the Name property is that when we dynamically create an element that can contain the Name property, you cannot simply add its name by using the assignment Element.name = "...", and you must use document.createelement when you create elements ( ' <element name = ' myName ' ></element> ') adds the name attribute to the element. What does that mean? See the following example to understand.

<script language= "JavaScript" >
var input = document.createelement (' input ');
input.id = ' myId ';
Input.name = ' myName ';
alert (input.outerhtml);
</script>
The result is shown in the message box: <input id=myid>.

<script language= "JavaScript" >
var input = document.createelement (' <input name= ' myName ' > ');
input.id = ' myId ';
alert (input.outerhtml);
</script>
The result is shown in the message box: <input Id=myid name=myname>.
The design of the Initialize Name property is not a bug in IE, because it says so in MSDN, but what is the principle of this design? I don't want to know for a moment.

By the way, what if the IDs of the N (n>1) HTML elements in the page are the same? How do you refer to them in a DHTML object? If we use ASPX pages, this is not an easy situation, because the ASPNET process does not allow an ID to be unique at all when it processes the ASPX page, which is that the page will be thrown with an exception and not be properly render. If it is not a dynamic page, we hard to let the ID repeat that ie how to do? At this point we can still use document.getElementById to get the object, except that we only get the object whose ID duplicates the first one that appears in the HTML render. The duplicate ID is then automatically converted to an array at the time of reference, and the duplicate ID elements are in the array in the order of render.

form element (Form input textarea Select) with the frame element (IFrame frame) with the name
These elements are related to the form (the frame element acts on the target of the form), and on the receiving page of the form only
Receive the element with name, and the element that assigns the ID cannot receive the value through the form, you can verify it yourself.
There is one exception: A can assign name as an anchor point, or it can assign an ID

Of course, the above elements can also assign ID values, the method of referencing these elements when assigning ID values will change.
Fu Name:document.formName.inputName document.frames ("FrameName")
Fu ID:document.getElementById ("inputID") Document.all.frameID

You can only assign an element with an ID that cannot be assigned a name: (except that the element associated with the form can only be assigned an ID)
Body Li table tr TD th P Div span pre DL DT DD font B et cetera

The difference between the ID and the name attribute in input