ID, name, class difference in HTML

Reprint Address: http://www.2cto.com/kf/201210/161751.html

ID differs from name in HTML

A name can correspond to multiple controls at the same time, such as a checkbox andRadio
And the ID must be the only one in the full-text file

Purpose of the ID
1) ID is the identity of the HTML element, mainly in the client script.
2) The label is associated with the form control, such as
<label for= "Myinput" >my input</label>
<input id= "Myinput" type= "text" >
The For property specifies theThe ID of the element that the label is associated with, not the name override
3) Get the object in the script: IE supports referencing the ID directly in the script by ID (not name)Identifies the object.
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], and then refer to name from the form, note that this results in a value that will be sent to the server after calculation



Use of name
1) is primarily used to obtain a form field information for a submission form, as anThe HTML element of the server interaction dataServer-side markings, such as input, select, textarea, frame elements (iframe, frame, window names, for other frame or window designationsTarget) and button, all of these elements are related to the form (the frame element acts on the target of the form), the browser sets the request sent to the server according to name, and receives only the element with name on the receiving page of the form. So the element that assigns the ID cannot receive the value through the form. We can get the value of the element submitted by request.params on the server side according to its name. In a form, if you do not specify name, it is not sent to the server side.

2) HTML element input type= 'Radio ' Group, 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 the grouping is implemented according to the same name property.

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>, we get a page anchor point, such as <strong><a name= "1" id= "1" ></a>experience (XP) </strong> see example

4) as the identity of the object, such as applets, object, embed and other elements. For example, in an Applet object instance, we will use its name to refer to the object.

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

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" >.

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>


Name differs from ID
ID to conform toIdentification requirements, such as case sensitivity, preferably do not include an underscore (because it is incompatible with CSS). and name basically has no requirements, and can even use numbers. Table, TR, TD, Div, p, span, H1, Li and other elements are typically used with IDs. The elements associated with the form can also be assigned an ID value, but the method of referencing these elements when assigning ID values to these elements will change, as follows:
When assigning a name, the way the element is referenced: Document.formName.inputName or Document.frames ("FrameName")
When assigning an ID, the way the element is referenced: Document.all.inputID or Document.all.frameID
Except for the elements associated with the form, only the ID cannot be assigned name, and the elements are body, Li, A, table, TR, TD, Th, p, Div,span, pre, DL, DT, DD, font, B, etc.


The difference between the ID and class attributes in CSS
1) class is the classes that set the label for the class that specifies what style the element belongs to. In a CSS style, in lowercase "dots" and "." To be named, the HTML page is class= "CSS5 "To choose the call, named Good CSS is also called CSS selector.
such as:. Css5{Property: property value;} selector inThe HTML call is "<div class=" CSS5 "> I am the class example </div>
. baobao {color:lime; background: #ff80c0}
How to use: class= "Baobao"

2) ID is the set labelIdentity. The unique style used to define an element. Naming ID names with "#" at the time of CSS style definition
such as a CSS rule:
#binbin {Font-size:larger}
How to use: Id= "Binbin"
The ID is a label that distinguishes between different structures and content, like your name, and if a room has 2 people with the same name, there will be confusion;

3) The ID usage in CSS is the same as the class usage, except that the class is changed to ID. As an example:
In the CSS style definition ID
#css5 {height:25px; width:200px;}
Call ID:
<div id= "CSS5 "> I am the ID example </div>
Class is a style that can be set on any structure and content, like a garment.

4) Conceptually, it's not the same.
The ID is the first to find the structure/content, and then to define the style, class is to define a style, and then set to multiple structures/content.
(1) A class is used to define one or more elements based on user-defined criteria. A more appropriate analogy is the script: A class can define the story line of each character in the script, you can use CSS,javascript and so on to use this class. So you can use class= "Frodo" on one page, class= "Gandalf", class= "Aragorn" to distinguish different story lines. It's also very important that you can use any number of classes in a document. The
(2) ID is typically used to define a markup that appears only once on the page. When the layout of the page is structured (for example, a page is usually composed of a header, a header < Masthead>, a content area and a footer, etc.), the general use of the ID is ideal, because an ID can only be used once in a document. These elements rarely appear larger than once on the same page. The
is summed up in a sentence: class can be reused and IDs can be used only once in a page. The

has the potential to reuse the same ID in most browsers without problems, but it is definitely wrong to use on a standard, and it is likely to cause real problems for some browsers.
in practice, class may be more useful for text typesetting, and ID is useful for macro layout and design placement of various elements. The
<<id is unique, and class is a class for containers that can be reused multiple times >>


Some considerations about IDs and name
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.

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 ASP does not allow the ID to be unique at all when it processes the ASPX page, which is that the page is thrown out of the ordinary and cannot be properly render.

But if it's not a dynamic page, we're going to have to repeat the ID. What does IE do?
At this point we can still use document.getElementById to get the object, except that we can only get the object whose ID duplicates the first occurrence in the HTML render. At this point, the duplicate ID will automatically become an array at the time of reference, and the duplicate ID elements are in the array in the order of render, which in turn indicates the order in which the IDs appear.

ID, name, class difference in HTML