What is the difference between input ID and name?

Source: Internet
Author: User

Difference between ID and name in Form (input)
 


However, name cannot be replaced in the following purposes:
1.Form Control name. The submitted data is controlled by the Control name rather than the ID. Because many names correspond to multiple controls at the same time, such as checkbox and radio, ID must be unique in the entire document. In addition, the browser will set the request sent to the server according to the name. Therefore, if an ID is used, the server cannot obtain data.
2.The name of the frame and window, used to specify the target in another frame or window.

The following two methods can be used in common, but we strongly recommend that you do not use name for ID:
1.Aname = "myname">, which was previously written, can be specified by any element ID: <divid = "myid">.

You can only use the following ID:
1.Label and Form Control Association,
<Label for = "myinput"> myinput </label>
<Input id = "myinput" type = "text">
The for Attribute specifies the ID of the element associated with the label and cannot be replaced by name.
2.CSS element selection mechanism, which specifies the elements of the application style in the form of # myid, and cannot be replaced by name.
3.Obtain objects in the script:
IE supports directly referencing the ID object with ID (rather than name) in the script. For example, to obtain the input content in the script, you can directly obtain the input content using myinput. value.
If Dom is used, document is used. getelementbyidx ("myinput "). value. If you want to use name, you can obtain the form containing the control first, for example, document. forms [0], and then reference name from form. Note that the calculated value will be sent to the server.

The difference between name and ID is:
The ID must comply with the logo requirements, such as case sensitivity. It is best not to include underscores (because CSS is not compatible ). There are basically no requirements for name, and even numbers can be used.
Note: Name is mainly a property only available in form elements... Through the document. form name. text Box. value to obtain the value of the text box. The form name and text box name indicate the name, but not the form element such as Div and span do not have the name attribute, the ID attribute is available to any HTML element. Document is required when you need to use js to obtain non-form Element objects. getelementbyidx ("ID") can be said that almost everyone who has done Web development has asked, What is the difference between the element ID and name? Why do I have an ID and a name ?! We can also get 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.

 

Last week, I also encountered the ID and name problems. I entered an input type = "hidden" on the page and wrote only one id = 'sliceinfo'. After the assignment, I submit it, use request. params ["sliceinfo"] does not return a value. Later, I suddenly realized that the name should be used for marking, so I added a name = 'sliceinfo' to the input, and everything was okay.

 

The answer to ID and name in the first section is too general. Of course, that explanation is completely correct for 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 <a href = "url"> link </a> is used to obtain a page hyperlink. If you do not use the href attribute, use name instead, for example, <a name = "pagebottom"> </a>.

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 the IMG and map elements are associated, if you want to define the IMG hotspot area, you need to use its attribute usemap, make usemap = "# name" (name of the associated map element ).

Purpose 6: Attributes of certain elements, such as attribute, Meta, And Param. For example, define <Param name = "appletparameter" value = "value"> 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 things.

Of course, the name attribute of the HTML element can also play a role of ID in the page, because in the DHTML Object Tree, we can use document. getelementsbyname is used to obtain an array of objects containing all the specified name elements on the page. There is another problem with the name attribute. When we dynamically create elements that can contain the name attribute, we cannot simply use the value assignment element. name = "... "to add its name, but must use document. createelement ('<element name = "myname"> </element>') adds the name attribute to the element. What does this mean? You can see the following example.

<Script language = "JavaScript">

VaR input = Document. createelement ('input ');

Input. ID = 'myid ';

Input. Name = 'myname ';

Alert (input. outerhtml );

</SCRIPT>

<Input id = myid> is displayed in the message box.

 

<Script language = "JavaScript">

VaR input = Document. createelement ('<input name = "myname"> ');

Input. ID = 'myid ';

Alert (input. outerhtml );

</SCRIPT>

<Input id = myid name = myname> is displayed in the message box.

The Design of initializing the name attribute is not a defect of IE, because it is mentioned in msdn. But what is the principle of this design? I do not want to be clear at the moment.

 

Here, by the way, what if the IDs of n (n> 1) HTML elements on the page are the same? How can we reference them in DHTML objects? If we use the ASPX page, this situation is not easy, because the Asp.net process does not allow non-unique IDs when processing the ASPX page, this is because the page will be thrown an exception and cannot be a normal render. If we want to repeat the ID on a dynamic page, how does ie do it? At this time, we can continue to use document. getelementbyid to get the object, except that we can only get the first object that appears in the HTML render of the objects with duplicate IDs. At this time, duplicate IDs are automatically converted into an array when being referenced. Elements with duplicate IDs exist in the array in order of render.

 

Form input textarea select and IFRAME frame use names. These elements are related to the form (the frame element acts on the target of the form) submission, only the element with name is received on the form receiving page, and the element with ID is not received through the form. You can verify it yourself.

One exception is that a can assign a name as the anchor or ID. Of course, the above elements can also be assigned an id value. The method for referencing these elements when assigning an id value will be changed.

Assigned name: Document. formname. inputname document. Frames ("framename ")

Assigned ID: Document. getelementbyid ("inputid") document. All. frameid

Only elements with ID and no name can be assigned: (only elements related to the form can be assigned ID)

Body Li table tr TD th P Div Span Pre dl dt dd font B and so on.

What is the difference between input ID and name?

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.