HTML 名 ID とクラスの違い_PowerNode Java アカデミー

名前

タグの名前を指定します。

形式

<input type="text" name="ユーザー名" />

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

①form: nameはサーバーに転送されるフォームリストの変数名として使用できます。たとえば、上記でサーバーに転送される名前は、username='テキストの値'です。

②入力タイプ='radio'ラジオタグ：複数のラジオタグの名前に同じ値を設定すると、ラジオ選択操作が行われます。

<input type="radio" name='sex'/>男性<input type="radio" name='sex'/>女性

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

関数 changtxtcolor() {
    var txts = document.getElementsByName('txtcolor'); //name=txtcolor のすべてのタグを取得します for (var i = 0; i < txts.length; i++) { //タグをループして背景色を赤に変更します
        txts[i].style.backgroundColor = '赤';
    }
}

特性

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

id

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

形式

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

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

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

② ラベルタグの for 属性の値として使用されます。例: <label for='userid'>Username: </label> は、このラベルタグがクリックされると、ID が userid のラベルにフォーカスが当たることを意味します。
特性

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

クラス

タグのクラス名を指定します。

形式

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

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

①CSS操作では、特定のスタイルをクラスクラスに配置し、このスタイルのタグが必要な場合はこのクラスを追加します。

特性

1 つのクラス属性に複数のクラスを入れることができますが、スペースで区切る必要があります。例: class='btnsubmit btnopen'