HTMLのname属性【現役エンジニアが解説】
今回は、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番目の要素の文字色を青色に設定しています。