The difference and usage of the ID name class in HTML

ID differs from name in HTML

A name can correspond to multiple controls at the same time, such as checkbox and radio

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 the ID of the element associated with the label and is not replaced with the name

3) Get the object in the script: IE supports referencing the object identified by the ID directly in the script, not 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], 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 mainly used to obtain the form field information of the submission form, as the server side of the HTML element that can interact with the server data, such as input, select, textarea, frame elements (iframe, frame, window name, Used to specify the target in another frame or window, and so on, these elements are related to the form (the frame element acts on the target of the form), and the browser sets the request sent to the server according to the name. The receiving page of the form receives only the element with name, 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 ' grouping, we know radio button control in the same grouping class, check operation is a mutex, only one radio can be selected at the same time, this 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 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. 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, 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 name, in the HTML page with class= "CSS5" to select the call, named Good CSS is called CSS selector.
such as:. Css5{Property: property value;} selector in HTML called "<div class=" CSS5 "> I am the class example </div>
. baobao {color:lime; background: #ff80c0}
How to use: class= "Baobao"

2) ID is the identity of the set label. 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 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 for each character in the script, and you can use it through css,javascript. 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.
(2) The ID is typically used to define the 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.
summed up in a sentence is: class can be used repeatedly and ID in a page can only be used once.

It is possible to reuse the same ID in a very large number of browsers without problems, but on the standard it is absolutely wrong to use, and it is likely to lead to real-world problems with some browsers.
In practical applications, class may be more useful for text typesetting, and the ID is useful for macro layout and design placement of various elements.
<<id is unique, while class is a class for containers that can be reused multiple times >>

Some considerations for ID 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 an ASPX page, this is not an easy situation, because the ASP does not allow the ID to be unique when it processes the ASPX page, which is that the page will be thrown with an exception and not be properly render.

But if not the dynamic page, we hard to let the ID repeat that IE how to do it?

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

The difference and usage of the ID name class in HTML