What is the difference between name, id and class in HTML?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What is the difference between name, id and class in HTML?

php中世界最好的语言

Jan 17, 2018 am 09:50 AM

class html name

This time I will show you what is the difference between name, id, and class in HTML. How to use name, id, and class? What are the precautions when using name, id, class? The following is a practical case, let’s take a look.

name

Specify the name of the label.

Format

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

Copy after login

Application scenarios

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

②Input type='radio'Radio label: When the names of several radio label are set to the same value, a radio selection operation will be performed.

<input type="radio" name=&#39;sex&#39;/>男
<input type="radio" name=&#39;sex&#39;/>女

Copy after login

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

function changtxtcolor() {
    var txts = document.getElementsByName(&#39;txtcolor&#39;); //获取所有name=txtcolor 的标签
    for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
        txts[i].style.backgroundColor = &#39;red&#39;;
    }
}

Copy after login

Characteristics

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

Specifies the unique identifier of the tag.

Format

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

Copy after login

Application Scenario

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

② Used as the value of the label label for attribute: Example: User name: , indicating click this When labeling, the label whose id is userid gets focus.
Features

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

class

Specify the class name of the label.

Format

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

Copy after login

Application Scenario

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

Features

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

I believe I read it You have mastered the methods in these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!