The difference between HTML name id and class_PowerNode Java Academy

name

Specify a name for the tag.

Format

<input type="text" name="username" />

Application Scenario

①form: name can be used as the variable name of the form list transferred to the server; for example, the name transferred to the server above is: username='the value of text'.

②Input type='radio' radio tag: When the name of several radio tags is set to the same value, a radio selection operation will be performed.

<input type="radio" name='sex'/>Male<input type="radio" name='sex'/>Female

③Quickly obtain a group of tags with the same name: obtain tags with the same name and perform operations together, such as changing properties, registering events, etc.

function changtxtcolor() {
    var txts = document.getElementsByName('txtcolor'); //Get all tags with name=txtcolor for (var i = 0; i < txts.length; i++) { //Loop through the tags and change the background color to red
        txts[i].style.backgroundColor = 'red';
    }
}

characteristic

The value of the name attribute is not unique in the current page.

id

Specifies the unique identifier of a tag.

Format

<input type=password id="userpwd" />

Application Scenario

①Quickly obtain the tag object based on the unique ID number provided. For example: document.getElementById(id)

② Used as the value of the for attribute of the label tag: Example: <label for='userid'>Username: </label>, which means that when this label tag is clicked, the label with id userid gets the focus.
characteristic

The value of the id attribute must be unique on the current page.

class

Specifies the class name of the tag.

Format

<input type=button class="btnsubmit" />

Application Scenario

①CSS operation, put some specific styles into a class class, and add this class if you need tags of this style.

characteristic

You can put multiple classes in one class attribute, but they must be separated by spaces; for example: class='btnsubmit btnopen'