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

黄舟

リリース： 2017-07-19 11:57:05

オリジナル

2937 人が閲覧しました

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

ディレクトリ

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 属性の値として使用されます: 例: ユーザー名: このラベルをクリックすると、ID userid を持つラベルがフォーカスを取得します。

2.3 機能

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

3. class

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

3.1 フォーマット

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

ログイン後にコピー

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

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

3.3 機能

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

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