name属性とは何ですか？

name属性は、HTML要素に名前を設定するための属性です。主に以下の目的で使用されます。

フォームのコントロール（入力フィールド、ボタンなど）に名前を付けて、サーバーに送信されるデータと関連付ける
iframeなどの埋め込み要素に名前を付けて、JavaScriptなどから参照できるようにする
（過去においては）要素をスタイルシートで選択するために使用されていました

しかし、HTML5では、多くの要素でname属性の使用が非推奨または廃止され、代わりにid属性を使用することが推奨されています。これは、id属性の方がより厳密な規則に基づいており、文書内で一意な識別子を保証するためです。

name属性の構文

name属性は、開始タグ内で以下のように記述します。

<要素名 name="属性値">

属性値には、任意の文字列を指定することができます。ただし、スペースなどの特殊文字を使用する場合は、クォートで囲む必要があります。

name属性の使用例

フォーム

フォームでは、name属性を使用して、各コントロールに名前を付けることができます。サーバーにフォームが送信されると、この名前と値のペアが送信データとして使用されます。

<form action="/submit" method="post">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">送信</button>
</form>

iframe

iframe要素にname属性を指定することで、JavaScriptなどからiframeの内容にアクセスすることができます。

<iframe src="https://www.example.com" name="myframe"></iframe>

<script>
  // iframe内のドキュメントを取得
  const iframeDoc = window.frames['myframe'].document;

  // iframe内の要素にアクセス
  const element = iframeDoc.getElementById('some-element');
</script>

name属性とid属性の違い

name属性とid属性はどちらも要素に名前を付けるために使用されますが、いくつかの重要な違いがあります。

項目	name属性	id属性
用途	主にフォームのデータ送信、iframeの参照	要素の一意な識別、スタイルシートやJavaScriptからの参照
一意性	保証されない	文書内で一意である必要がある
値の制限	ほぼすべての文字列を使用可能	英字、数字、ハイフン、アンダースコア、コロンのみ使用可能

まとめ

name属性は歴史的に重要な役割を果たしてきましたが、HTML5では多くの要素で非推奨または廃止されています。代わりに、id属性を使用することが推奨されます。ただし、フォームのデータ送信やiframeの参照など、name属性が依然として有効な場面もあります。

参考資料

よくある質問

Q1: name属性とid属性のどちらを使用すればよいですか？

A1: 一般的には、id属性を使用することが推奨されます。id属性は、文書内で一意な識別子を保証するため、スタイルシートやJavaScriptから要素を参照する際に便利です。name属性は、フォームのデータ送信やiframeの参照など、特定の場面でのみ使用してください。

Q2: name属性を指定しないとどうなりますか？

A2: 要素によっては、name属性が必須のものがあります。例えば、フォームのコントロールにname属性を指定しないと、サーバーにデータを送信することができません。また、iframeにname属性を指定しないと、JavaScriptなどからiframeの内容にアクセスすることができません。

Q3: name属性は廃止される予定はありますか？

A3: 現時点では、すべての要素でname属性が廃止される予定はありません。ただし、HTMLの進化に伴い、将来的には廃止される可能性もあります。最新の情報については、W3Cの仕様書などを参照してください。

その他の参考記事:jquery src 取得