Quelle est la différence entre le nom, l'identifiant et la classe en HTML ?

Cette fois, je vais vous montrer quelle est la différence entre le nom, l'identifiant et la classe en HTML. Comment utiliser le nom, l'identifiant et la classe ? Quelles sont les précautions lors de l'utilisation du nom, de l'identifiant et de la classe ? Ce qui suit est un cas pratique, jetons un coup d'œil.

name

Spécifie le nom de la balise.

Format

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

Scénario d'application

①formulaire : le nom peut être utilisé comme nom de la variable transféré à la liste des formulaires du serveur tel qu'il est transmis ; ci-dessus Le nom du serveur est : username='text value'.

②input type='radio' label de sélection radio : Lorsque les noms de plusieurs labels de sélection radio sont définis sur la même valeur, une opération de sélection radio sera effectuée.

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

③ Obtenez rapidement un groupe de balises du même nom : obtenez des balises du même nom et effectuez des opérations ensemble, telles que : modifier les attributs , enregistrer les événements , etc.

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

Caractéristiques

La valeur de l'attribut name n'est pas unique dans la page courante.

id

précise l'identifiant unique de la balise.

Format

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

Scénario d'application

①Obtenez rapidement l'objet étiquette en fonction du numéro d'identification unique fourni. Par exemple : document.getElementById(id)

② Utilisé comme valeur de l'étiquette pour l'attribut : Exemple : d305c5282d143dd49e6374acc3c8c7aa Nom d'utilisateur : 8c1ecd4bb896b2264e0711597d40766c, indiquant le clic. this Lors de l'étiquetage, l'étiquette dont l'identifiant est userid obtient le focus.
Fonctionnalités

La valeur de l'attribut id doit être unique dans la page actuelle.

class

précise le nom de classe de l'étiquette.

Format

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

Scénario d'application

①Opération CSS, mettez certains styles spécifiques dans une classe Si vous avez besoin de balises de ce style, vous pouvez ajouter cette classe.

Fonctionnalités

Vous pouvez mettre plusieurs classes dans un seul attribut de classe, mais elles doivent être séparées par des espaces tels que : class='btnsubmit btnopen'

Je crois que vous l'avez fait ; lisez-le Vous maîtrisez les méthodes dans ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment insérer une vidéo dans une page Web HTML

Comment utiliser HTML+CSS pour créer un survol de la souris Vous pouvez afficher la barre de menu secondaire

Comment résoudre l'écart dans l'image en H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!