ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの名前、ID、クラスの違いの紹介

HTMLの名前、ID、クラスの違いの紹介

黄舟
黄舟オリジナル
2017-07-19 11:57:052927ブラウズ

ページ内にはたくさんのコントロール(要素やラベル)があります。これらのタグをより便利に運用するには、これらのタグを識別タグで識別する必要があります。

ディレクトリ

1. name: ラベルの名前を指定します。

2. id: タグの一意の識別子を指定します。

3. class: ラベルのクラス名を指定します。

1. name

ラベルの名前を指定します。

1.1 形式

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

1.2 アプリケーションシナリオ

①form form: name は、サーバーフォームリストに渡される変数名として使用できます。たとえば、上記のサーバーに渡される名前は次のようになります。 '。

②input type='radio' ラジオタグ: 複数のラジオタグの名前が同じ値に設定されている場合、ラジオの選択操作が実行されます。


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

③同じ名前のタグのグループを素早く取得:同じ名前のタグを取得し、属性の変更やイベントの登録などの操作をまとめて実行します。


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;;
    }
}

1.3 機能

name 属性の値は現在のページ内で一意ではありません。

2. id

はタグの一意の識別子を指定します。

2.1 形式

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


2.2 アプリケーションシナリオ

①提供された一意のID番号に基づいてタグオブジェクトを迅速に取得します。例: document.getElementById(id)

②は、ラベル label の for 属性の値として使用されます: 例: d305c5282d143dd49e6374acc3c8c7aa ユーザー名: 8c1ecd4bb896b2264e0711597d40766cこのラベルをクリックすると、ID userid を持つラベルがフォーカスを取得します。

2.3 機能

id 属性の値は、現在のページ内で一意である必要があります。

3. class

ラベルのクラス名を指定します。

3.1 フォーマット

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


3.2 アプリケーションシナリオ

①CSS操作、いくつかの特定のスタイルをクラスクラスに配置し、このスタイルを必要とするタグがこのクラスを追加できます。

3.3 機能

1 つのクラス属性に複数のクラスを含めることができますが、次のようにスペースで区切る必要があります。

以上がHTMLの名前、ID、クラスの違いの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。