HTMLのname属性【現役エンジニアが解説】

PROGRAM

今回は、HTMLのname属性について、name属性の付け方とCSSやJavaScriptでの使い方に分け、簡単に解説していきます。

name属性の付け方

name属性の値は他の要素と重複可能です。

name属性の主な用途はグループ化やフォームデータの送信です。

<input type="text" name="hoge">

上記のコードでは、name属性の値をhogeにしたテキストボックスを表示しています。

name属性のCSSからの使い方

name属性を指定することでCSSから装飾できます。

CSSで装飾するには、[name=”name属性の値”]の形式で指定します。

[name="hoge"]{
    color:blue;
}

上記のコードでは、name属性の値がhogeの全ての要素の文字色を青色に設定しています。

name属性のJavaScriptからの使い方

JavaScriptからname属性を指定することで要素を特定できます。

特定にはdocumentのgetElementsByNameメソッドでname属性の値を指定します。

var hoges = document.getElementsByName("hoge");
hoges[0].style.color = "blue";

上記のコードでは、name属性の値がhogeの全ての要素のうち、0番目の要素の文字色を青色に設定しています。