What is the difference between an attribute ID and a property name in HTML?

Today, when I was working on a job interview, David asked me to add a title: The difference between ID and name in HTML. A listen to Ah, the HTML ID and name what is the difference, but usually in use, not how to think, just so use it, oh, in fact, when doing the Web page there is a lot of things are just so used, and did not consider why so used ...
One of the others said, "ID is like a person's ID number, and name is like his name, ID is obviously unique, and name can be duplicated." ”

The role of ID in HTML:
1, choose the corresponding style sheet (style) with ID.
2, <a. > links to Destinations
3. scripting language Use it to find the destination (find the tag for that id)
4, as a name, for declaring an object element
5, as a label or block of the Peugeot (used to extract data from the HTML page into the database or HTML translated into other formats, etc.).

The name was originally intended for identification purposes, but it is now recommended to identify the element with an ID based on the specification. But name cannot be substituted for the following purposes:
1. The control name of the form, and the submitted data is controlled with the name of the control instead of the ID. Because there are many name that correspond to multiple controls at the same time, such as checkbox and radio, the ID must be unique in the full-text file. In addition, the browser sets the request sent to the server according to the name. Therefore, if the ID is used, the server cannot get the data.
2, frame and window name, used to specify target in other frame or window.

The following two are common, but it is strongly recommended that you do not use name with ID:
Anchor points, usually previously written <a name= "MyName", can now be specified with any element ID: <div id= "myID" >.

The following can only be used with ID:
1. The label is associated with the form control,
<label for= "Myinput" >my input</label>
<input id= "Myinput" type= "text" >
The For property specifies the ID of the element associated with the label and is not substituted with name.
2, CSS element selection mechanism, in a #myid way to specify the element to apply the style, can not be replaced by name.
3. Get the object in the script:
IE supports referencing an object identified by the ID directly in the script, rather than by name. For example, the above input, in order to get the content entered in the script, can be obtained directly from Myinput.value.

If using the DOM, use document.getElementById ("Myinput"). Value, if you want to use name, you usually get the form containing the control first, such as Document.forms[0], Then refer to name from the form, and note that this results in a value that will be sent to the server after calculation.

To this blog from Yiran: http://biej.blog.sohu.com/28812867.html

Netizen a says:

Only the name attribute value can be received on the form receiving page;
The ID is only the unique identifier of the control in the page (cannot be duplicated);

The control with name has form input select textarea iframe frame
None of the other elements need name.
==========================================================
Name is the name of the object, the ID is the identity, and the uniqueness is distinguished. Just like a person must have a name and a social security number.
It's easy to understand how they differ: The ID is used for DHTML, the client script. The name is typically used on the server side, for example

Request.for ("") must use name.
You use <input name=myinput id=myinput> in the client
<script>
Alert (Myinput.value)//here is the ID
</script>
And after submission, with Request.Form ("Myinput"), this is name.

Netizen b says:

Almost everyone who has done web development has asked, what is the difference between the ID and the name of the element?　　Why is there a name for the ID? and also we can get the classical answer: ID is like a person's ID 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: Use 1:  as the server side of the HTML element that can interact with the server data, 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 can be selected at the same time,　　This grouping is implemented according to the same name attribute. Use 3:  build the anchor point in the page, we know <a href= "URL" >link</a> is to get a page hyperlink, if not the href attribute, instead of using name, such as: <a name= "Pagebottom　　"&GT;&LT;/A&GT; we've got a page anchor. Use 4:  as an identity for an object, such as an applet, object, embed, and so on.　　For example, in an Applet object instance, we will use its name to refer to the object.　　Use 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). Use 6:  properties of certain specific elements,such as attribute, and Param.　　For example, define a parameter for object <param NAME = "Appletparameter" value = "value" >.　　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. By the way, what if the ID of an n (n>1) HTML element in the page is 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.

Netizen c says:

What is the difference between the ID and name of the element? Why is there an ID and name?!

The main purpose of the ID:
In a client page as a unique representation of an object, multiple identical IDs are not allowed in the same page. You can use JavaScript's document.getElementById (' id ') to get the object.

the specific uses of name are:

Use 1:
Server-side labeling of HTML elements that can interact with the server, such as input, select, TextArea, and button. We can get the value of the element submission by request["name" on the server side based on its name.

Use 2:
HTML element Input type= ' radio ' grouping, we know radio button control in the same grouping class, check operation is a mutex, only one radio at a time can be selected, this grouping is implemented according to the same name property.

Use 3:
Build 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.

Use 4:
As an identity for an object, such as an applet, object, embed, and so on. For example, in an Applet object instance, we will use its name to refer to the object.

Use 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).

Use 6:
Properties of certain specific elements, such as attribute, and Param. For example, define a parameter for object <param name = "Appletparameter" value= "value" >.

Use 7:
The Name property can also be used as the identity of the client object, and you can use JavaScript's document.getelementbyname (' name ') to get the object

Netizen D says:

The difference between ID and name in HTML:

ID is used in client script! Name is the form field information used to get the submission form!

However, in the form, if you do not specify the Name, it will not be sent to the server side Oh!

Input Select Form frame iframe with Name
Table tr TD Div P span H1 li with ID

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.

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.all.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 a table tr TD th P Div span pre DL DT DD font B et cetera

HTML, CSS inside about the ID, class, name attribute differences and usage 2007-05-31 21:06:44
Big Small
Name and ID

The name was originally intended for identification purposes, but it is now recommended to identify the element with an ID based on the specification.

The following can only be used with name:
1. The control name of the form (form), and the submitted data is controlled by the control's name instead of the ID. Because there are many name that correspond to multiple controls at the same time, such as checkbox and radio, the ID must be unique in the full-text file. In addition, the browser sets the request sent to the server according to the name. Therefore, if the ID is used, the server cannot get the data.
2. The name of frame and window for assigning target to another frame or window.

The following can only be used with ID:
1. Label is associated with the form control,
<label for= "Myinput" >my input</label>
<input id= "Myinput" type= "text" >
The For property specifies the ID of the element associated with the label and is not substituted with name.
2. CSS element selection mechanism, in a #myid way to specify the element to apply the style, cannot be substituted with name.
3. Get the object in the script:
IE supports referencing an object identified by the ID directly in the script, rather than by name. For example, the above input, in order to get the content entered in the script, can be obtained directly from Myinput.value.
If using the DOM, use document.getElementById ("Myinput"). Value, if you want to use name, you usually get the form containing the control first, such as Document.forms[0], Then refer to name from the form, and note that this results in a value that will be sent to the server after calculation.

The other differences between name and ID are:
ID to meet the requirements of identification, such as case sensitivity, it is best not to include an underscore (because it is incompatible with CSS). and name basically has no requirements, and can even use numbers.

Class and ID

In an HTML page, the ID is unique, that is, only one tag, or the identifier of a block is the ID.
Class is reusable and is used to mark and define one or more elements based on user-defined criteria.

In practice, class may be useful for typesetting of text, while ID is useful for macro layout and design placement of various elements.

General Examples:
The page code has
<div id=m_blog>
<div class= "opt" >
<a id=mylink href= "xxx" >
</div>
</div>

Use CSS to control the stay style of this link,
You can write #m_blog div.opt a:hover{color: #D57813} or #myLink: Hover{color: #D57813}

Netizen e says:

In fact, the ID is related to the inner element of the HTML page and not to the content of the page element. Name is more relevant to the content of the page element

Look at the Reference,name there is a use of Window.name, Lou Zhu is not it can be counted on one? The most common is the second parameter of Windows.open, which is used in the <A> target.

IFRAME: There is also the Name property of the frame and the IFRAME.

The name of the IFRAME is a bit special, last time encountered a problem, be sure to use the name to do, oh, forget the specific

Probably using the onload ()/onclick () in the IFRAME page to change the size of the IFRAME ~ ~

Name is the identity of frame, IFRAME & frameset, what special place is there? You said that onload ()/onclick (), is to say in the frame to use the name of frame?

For the IFRAME to use the ID directly to get its window object (and through name can get its element object), I think Boynannan said the question should be this bar! I don't know if the guesses are accurate. ^_^

Netizen N says:

For a friend who has just touched the HTML source, there may be a doubt: in a FORM element, if I want to use a script to determine a specific element, I can either use his name to index the object, or add an ID to index it, then what is the difference between these two methods? The following we come to specific discussion, in view of my limited level, if the description is inappropriate, please advise.

We can analyze the subtle differences in one piece of code:

<form method= "POST" action= "Name=" Demoform "><input type=" text "name=" Odemo "id=" ODemo2 "value=" DEMO "/> </form>

How many methods can we use to index this text box object in IE browser? (For the sake of differentiation, we set the name and ID to a different value)

1. Odemo

2. Demoform.odemo

3. Document.all.oDemo

4. Document.all.demoform.oDemo

5. Document.forms[0].odemo

6. document.forms[' Demoform '].odemo

7. document.forms[' Demoform '].childnodes[0]

8. document.forms[' Demoform '].elements[0]

9. document.getElementById (' ODemo2 ')

The above 9 index methods in IE6 all through the return value test, but it is worth noting that the last one: in IE6, I put the Index object written document.getElementById (' Odemo '), the browser can also correctly index to the object, it is really terrible fault tolerance Ah!!

Then the problem came, we put this code in Mozilla Firefox 1.0 and then execute again, only the 7th method returns "Undefined", the other methods can be correctly indexed to the object, but because of the 3, 4 ways to use the document.all this ie proprietary object, FF1.0 although returned the correct value, but in the console issued a warning: Warning: non-standard attribute document.all. Please use the standard form document.getElementById ().

Next we define the HTML literal type Strictly, and add it at the beginning of the source code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" > Make the HTML text in accordance with the HTML4.01 standard to parse, in IE6 still all through the return value test, but in Mozilla Firefox 1.0 trouble is big, 3, 4 methods do not have any return value, and in the console sent an error message: Errors: Document.all has no properties, while the 7th method still returns "undefined".

Summary

Name is primarily applied to interactive Web pages, which receive variable processing usage after a form is submitted to a server-side script. From the source code normative and compatibility point of view, such as in the client script to index an object, it is recommended to use the document.getElementById () method, try not to directly use the value of name, of course, if the compatibility is not considered, the above 9 methods can be run in IE through ( IE5.0 not tested).

Attached: Test source code

<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">

[Ctrl + a All selection tips: You can modify some of the code, then press run]

Netizen N+1 said:

The ID and name function, as the identifier of the label, is basically the same. Name is the old method, the ID is invented on the basis of name, later, "modernized" a little, with a wide range. <a. The name of > in the original (when invented) is used on this page to switch to the past.

ID is available except BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE tag.

Name is used only for Applet,select,form,frame,iframe,img,a,input,object,map,param,meta. (name sometimes has its own use)

The name in table is undefined and should be used with an ID.

Some tags can have name and ID at the same time.

In an HTML page, the ID is unique, that is, only one tag, or the identifier of a block is the ID.

The role of ID in HTML:

(1) Select the appropriate style sheet (style) with the ID.
(2) <a. > links to Destinations
(3) scripting language use it to find a destination (find the tag for that id)
(4) as a name for declaring an object element
(5) As a label or block of Distinction Peugeot (used to extract data from HTML pages into the database or to translate HTML into other formats, etc.).

(Refer to HTML 4.0 definition)

Too many netizens ... Finally, I want to say:

I'm done here. You don't have to learn if you don't understand.

Get here from dotnet Studio Blog: http://shylockbaby.blog.163.com/blog/static/605330200835101137852/

What is the difference between an attribute ID and a property name in HTML?