HTMLで要素を特定する！id属性とname属性の使い方
2024-04-02
HTMLにおけるid属性とname属性の違い
役割
id属性は、ページ内の一意の識別子を要素に割り当てます。一方、name属性は、要素の名前を割り当てます。
例
<div id="main-content"></div>
<input type="text" name="username">
この例では、div要素にid="main-content"というid属性が設定されています。これは、ページ内にこのidを持つ要素が一つだけであることを意味します。一方、input要素にはname="username"というname属性が設定されています。これは、この要素がユーザー名を表すものであることを意味します。
使用例
id属性は、以下のような用途に使用されます。
- JavaScriptで要素を取得する
- CSSで要素にスタイルを適用する
- アンカーリンクのターゲットとする
- フォームデータを送信する
- ラジオボタンやチェックボックスなどのグループを形成する
命名規則
id属性とname属性の値は、以下の規則に従って記述する必要があります。
- 半角英数字、ハイフン(-)、アンダースコア(_)のみ使用可能
- 最初の文字は半角英字であること
- 空白文字は使用不可
<div id="main-content"></div>
<input type="text" name="username">
<div id="123main-content"></div>
<input type="text" name=" ユーザー名 ">
まとめ
id属性とname属性は、要素を特定するために使用されますが、それぞれ役割と使用例が異なります。
| 属性 | 役割 | 使用例 | 命名規則 |
|---|---|---|---|
| id | ページ内の一意の識別子を割り当てる | JavaScriptで要素を取得する、CSSでスタイルを適用する、アンカーリンクのターゲットとする | 半角英数字、ハイフン(-)、アンダースコア(_)のみ使用可能、最初の文字は半角英字、空白文字は使用不可 |
| name | 要素の名前を割り当てる | フォームデータを送信する、ラジオボタンやチェックボックスなどのグループを形成する | 半角英数字、ハイフン(-)、アンダースコア(_)のみ使用可能、最初の文字は半角英字、空白文字は使用不可 |
これらの違いを理解して、適切な属性を使い分けるようにしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>id属性とname属性のサンプル</title>
</head>
<body>
<h1>メインコンテンツ</h1>
<p id="main-content">
この段落は、id属性 "main-content" を持つ要素です。
</p>
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<button type="submit">送信</button>
</form>
</body>
</html>
div要素にid="main-content"というid属性を設定しています。これは、JavaScriptでこの要素を取得したり、CSSでスタイルを適用したりするために使用できます。input要素にid="username"とname="username"という属性を設定しています。id属性は、JavaScriptでこの要素を取得するために使用できます。name属性は、フォームデータを送信する際に、ユーザー名の値をサーバーに送信するために使用されます。
実行結果
このコードを実行すると、以下のような画面が表示されます。
補足
このサンプルコードは、id属性とname属性の基本的な使い方を示しています。これらの属性は、さまざまな用途で使用することができますので、詳細は以下の参考資料を参照してください。
id属性とname属性の他の方法
CSSセレクターを使用して、要素を特定することができます。例えば、以下のように記述することで、id="main-content"を持つ要素にスタイルを適用できます。
#main-content {
color: red;
}
const mainContentElement = document.getElementById("main-content");
フォームデータを送信する場合、name属性の代わりに、data-属性を使用して要素の名前を指定することができます。例えば、以下のように記述することで、ユーザー名の値をサーバーに送信できます。
<input type="text" data-name="username" required>
- 要素をスタイル設定したい場合は、CSSセレクターを使用するのが最も効率的です。
- 要素を取得したり、操作したりしたい場合は、JavaScriptを使用するのが最も柔軟です。
- フォームデータを送信する場合は、
name属性を使用するのが最も一般的ですが、data-属性を使用することもできます。
それぞれの方法のメリットとデメリットを理解して、適切な方法を選択するようにしましょう。
html attributes
