HTMLの名前、ID、クラスの違いは何ですか?

今回は、HTMLでの名前、ID、クラスの違いは何ですか？名前、ID、クラスを使用するときの 注意事項 は何ですか?実際のケースを見てみましょう。

name

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

フォーマット

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

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

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

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

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

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

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

特徴

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

id

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

フォーマット

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

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

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

②は、ラベル label の for 属性の値として使用されます: 例: Username: 。これは、次の場合を意味します。このラベルがクリックされると、ID userid を持つタグがフォーカスを取得します。
機能

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

class

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

フォーマット

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

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

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

特徴

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

これらの事例を読んだ後は、このメソッドを習得したと思います。詳細については、こちらをご覧ください。興味深い情報 php 中国語 Web サイトの他の関連記事にも注目してください。

関連記事:

HTML Web ページにビデオを挿入する方法

HTML+CSS を使用して、マウスをスワイプして 2 番目のメニュー バーを表示する方法

H5 Solve の画像のギャップです

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