Differences between ID and name in HTML instance code

We can use Code To analyze the subtle differences:

<Form method = "Post" Action = "" name = "demoform">
<Input type = "text" name = "odemo" id = "odemo2" value = "Demo"/>
</Form>

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 above nine index methods pass the return value test in IE6, but it is worth noting that the last one: in IE6, I write the index object

Document. getelementbyid ('odemo'). The browser can index objects correctly. This is a 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 be correct.

Index to the object, but because the document. All (IE) Exclusive object is used in the 3rd and 4 methods, although ff1.0 returns the correct value, it issued a warning in the console

Warning: Document. All is a non-standard property. Use the W3C Standard Form document. getelementbyid ().

Next, we define the HTML text type strictly.Source codeAdd:

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

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 four methods: 3rd.

There is no returned value, but an error message is sent in the console: Error: Document. All has no properties, and the "undefined" error is returned in the 7th methods.

".

Knot

Name was originally used for identification, but we recommend that you use ID to identify elements according to the specifications.

You can only use the following name:
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, for example

Checkbox and radio, and 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 the ID is used, the server does not

To obtain the data.
2. The name of the frame and window, used to specify the target in another frame or window.

You can only use the following ID:
1. association between label and Form Control,
<Label for = "myinput"> my input </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, specifying the elements of the application style in the form of # myid, cannot be replaced by name.
3. Get 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

Myinput. value.
If Dom is used, document. getelementbyid ("myinput"). value is used. If name is used, the form containing the control is usually obtained first. For example:

Document. Forms [0], and then reference name from form. Note that the calculated value will be sent to the server.

Other differences between name and ID are:
The ID must comply with the logo requirements, such as case sensitivity. It is best not to include underscores (because CSS is not compatible ). However, there are basically no requirements for name, and even numbers can be used.

.

Use CSS to control the stay style of the link,
You can write # m_blog Div. Opt A: hover {color: # d57813} Or # mylink: hover {color: # d57813}

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, such as on the client

To index an object in the script, we recommend that you use the document. getelementbyid () method and try not to directly use the name value. If compatibility is not considered

Methods can all run in IE (ie5.0 has not been tested ).

Appendix: test source code

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> </title>
</Head>
<Body>
<Form method = "Post" Action = "" name = "demoform">
<Input type = "text" name = "odemo" value = "Demo" id = "odemo2"/> <br/>
<Input type = "button" value = "odemo" onclick = "alert (odemo. Value)"/> <br/>
<Input type = "button" value = "demoform. odemo" onclick = "alert (demoform. odemo. Value)"/> <br/>
<Input type = "button" value = "document. All. odemo" onclick = "alert (document. All. odemo. Value)"/> <br/>
<Input type = "button" value = "document. All. demoform. odemo" onclick = "alert (document. All. demoform. odemo. Value)"/> <br/>
<Input type = "button" value = "document. forms [0]. odemo "onclick =" alert (document. forms [0]. odemo. value) "/> <br/>
<Input type = "button" value = "document. forms ['demoform']. odemo "onclick =" alert (document. forms ['demoform']. odemo. value) "/> <br/>
<Input type = "button" value = "document. Forms ['demoform ']. childnodes [0]" onclick = "alert (document. Forms
['Demoform']. childnodes [0]. Value) "/> <br/>
<Input type = "button" value = "document. Forms ['demoform ']. elements [0]" onclick = "alert (document. Forms
['Demoform']. elements [0]. Value) "/> <br/>
<Input type = "button" value = "document. getelementbyid ('odemo2') "onclick =" alert (document. getelementbyid ('odemo2 '). value) "/> <br/>
</Form>
</Body>
</Html>