Differences between the ID and Name attributes of HTML elements _ HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
ID is like a person's ID card number, and Name is like his Name. ID is obviously unique, and Name can be repeated. Today, I am a little confused. When I add #, it indicates a pipeline. When I keep up with 13 in the background, it will jump to the position of 13 in the current pipeline, and this 13 is the Name adequacy value. Why not
What is the ID value ??? So I checked the region of the ID and Name

The most classical answer: ID is like a person's ID card number, and Name is like his Name. ID is obviously unique, and Name can be repeated.
Obviously, the answer to this ID and Name is too general. Of course, that explanation is completely correct for the ID. It is the Identity of the HTML element on the Client side. Name is actually much more complex, because Name has many purposes, so it cannot be completely replaced by ID, so it is canceled. Specific uses include:
Purpose 1: ID of the server as an HTML element that can interact with the server, such as input, select, textarea, And button. On the server side, we can use Request. Params to obtain the value submitted by the element based on its Name.
Purpose 2: HTML element Input type = 'radio' group. We know that the radio button control is in the same group class. The check operation is mutex and only one radio can be selected at a time, this group is implemented based on the same Name attribute.
Purpose 3: Create an anchor in the page. We know that link gets a page hyperlink. If you use Name instead of the href attribute, for example, we get a page anchor.
Purpose 4: act as the Identity of an Object, such as Applet, Object, and Embed. For example, in the Applet object instance, we will use its Name to reference this object.
Purpose 5: When associating IMG and MAP elements, if you want to define the IMG hotspot area, you need to use its attribute usemap to make usemap = "# name" (associated MAP)
Element Name ).
Purpose 6: Attributes of certain elements, such as attribute, meta, And param. For example, defining parameters for an Object Or <Meta NAME = "Author" CONTENT = "Dave Raggett"> in META.
Obviously, these functions are not simply replaced by IDS, so the ID and Name of the HTML element are not the same as the ID card number and Name, they are actually different
.
We can use a piece of code to analyze the subtle differences:

The Code is as follows:




In IE browser, how many methods can we index this text box object? (For the sake of difference, we set NAME and ID to different values)
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 ')

All the nine index methods above pass the return value test in IE6, but it is worth noting that the last one: in IE6, I write the index object as document. getElementById ('odemo'), the browser can index objects correctly, which is really terrible fault tolerance !!
Then the problem arises. We put this code in Mozilla Firefox 1.0 and execute it again. There are only 7th methods that return "undefined". Other methods can index objects correctly, however, document. although FF1.0 returns the correct value for this IE proprietary object, it issued a warning in the console: Warning: non-standard attribute document. all. Please use W3C Standard Form document. getElementById ()
.
Next, we define the HTML text type strictly, and add the following at the beginning of the source code:The HTML text is parsed according to the HTML4.01 standard. In IE6, all of them pass the return value test. However, it is troublesome in Mozilla Firefox 1.0. There are no return values in Methods 3rd or 4, in the console, an error message is reported: Error: document. all has no properties, and "undefined" is returned in the 7th methods ".
Knot
NAME is mainly used in interactive web pages. After a form is submitted to a server-side script, it receives the variable processing capacity. From the perspective of source code standardization and compatibility, for example, to index an object in a client script, we recommend that you use
Document. getElementById ()
Here is a simple example:

If I want to get the user name and password, if JS uses name to get it, I have to write it as document. form1.username. value;
Document. form1.password. value;
Get with id:
Docuement. getElementById ("username ");
Docuement. getElementById ("pwd ");
Sometimes the same name may appear in the name, so we cannot determine which value is obtained by using the name.
Document. getElemntsByName ("username ");
Here we get an array

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.