Differences between id, name, and class in HTML

Difference between id and name in HTML
A name can correspond to multiple controls at the same time, such as checkbox and radio.
The id must be unique in the entire document.

Purpose of id
1) id is the Identity of HTML elements, mainly used in client scripts.
2) label and form Control Association, as shown in figure
<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.
3) Get objects in the script: IE supports directly referencing the objects identified by this id 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. getElementById ("MyInput"). value;
If you want to use name, you usually first obtain the form containing the control, such as document. forms [0], and then reference the name from form. Note that the calculated value will be sent to the server.

Usage of name
1) it is mainly used to obtain information about a form field of the submitted form, and serves as the server-side identifier of the HTML element that can interact with the server data, for example, input, select, textarea, frame Elements (iframe, frame, and window names, used to specify target and button in other frames or Windows, these elements are related to the submission of forms (the Framework element acts on the target of the form). The browser sets the request sent to the server according to the name, and only receives the element with name on the receiving page of the form, therefore, the element assigned with ID cannot receive the value through the form. On the server side, we can use Request. Params to obtain the value submitted by the element based on its Name. In form, if the name is not specified, it will not be sent to the server.

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

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 the name instead, for example: <a name = "PageBottom"> </a>, for example, <strong> <a name = "1" id = "1"> </a> Experience (XP) </strong>. For details, see the example.

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.

5) when associating IMG and MAP elements, 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 ).

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.

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>
The result displayed in the message box is: <INPUT id = myId>

<Script language = "JavaScript">
Var input = document. createElement ('<INPUT name = "myName"> ');
Input. id = 'myid ';
Alert (input. outerHTML );
</Script>
The result displayed in the message box is: <INPUT id = myId name = myName>
 
 
Differences between name and id
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. Table, tr, td, div, p, span, h1, li, and other elements generally use id. The element related to the form can also be assigned an ID value, but the method for referencing these elements when assigning an ID value to these elements is changed as follows:
When name is assigned, the reference element is used: document. formName. inputName or document. frames ("frameName ")
When an id is assigned, the reference element is used: document. all. inputID or document. all. frameID.
Except for the elements related to the form, only the id can be assigned and the name cannot be assigned, these elements include body, li, a, table, tr, td, th, p, div, span, pre, dl, dt, dd, font, and B.
 

Difference between id and class attributes in CSS
1) class is a class that sets the label and is used to specify the style of the element. In the CSS style, the names are in lower case "points" and ".". On the html page, class = "css5" is used to choose the call. The named CSS is also called the css selector.
For example:. css5 {attribute: attribute value;} the selector calls "<div class =" css5 "> I am a class example </div> in html.
. Baobao {color: lime; background: # ff80c0}
Usage: class = "baobao"

2) id is the identifier of the tag. Defines a unique style of an element. The id name starts with "#" when the CSS style is defined.
For example, a CSS rule:
# Binbin {font-size: larger}
Usage: id = "binbin"
Id is a tag used to distinguish between different structures and content, just like your name. If two people in a room have the same name, they will be confused;

3) The id Usage in css is the same as that in class, but the class is changed to id. For example:
Define the ID in the CSS style
# Css5 {height: 25px; width: 200px ;}
Call ID:
<Div id = "css5"> ID Example </div>
A class is a style that can be embedded in any structure or content, just like a dress.

4) The concept is different.
Id is to first find the structure/content, and then define the style; class is to first define a style, and then set to multiple structures/content.
(1) A class is used to define one or more elements according to user-defined standards. For example, a script: A class can define the story line of each character in the script. You can use this class through cSS and javascript. Therefore, you can use class = "Frodo", class = "Gandalf", class = "Aragorn" on a page to differentiate different story lines. Another important thing is that you can use any number of classes in a document.
(2) id is usually used to define a tag that appears only once on the page. In structured layout of page layout (for example, a page is usually composed of a header, a header <masthead>, a content area, and a footer), generally the ID is ideal, because an ID can only be used once in a document. These elements are rarely larger than once on the same page.
In one sentence, the class can be used repeatedly, and the id can only be used once on a page.

It is possible that the same id will not be used repeatedly in many browsers, but it is definitely incorrect in terms of standards, and it may lead to practical problems in some browsers.
In practical application, the class may be useful for text layout, and the id is useful for macro layout and design of various elements.
<Id is unique, while class is a class, applicable to containers that can be used multiple times>
 

Precautions for ID and Name
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.

What if n (n> 1) HTML element IDs are the same on the page? 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.

But if it is not a dynamic page, we have to repeat the id. What should I do with IE?
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 when the HTML Render contains 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, And the subscript of the array indicates the order in which IDs appear.