name とは
- ここで説明する name とは次の語句からなる HTML 要素の属性です。
- name
- 読み: ネーム
意味: 名前、呼び名
name 属性の概要
この属性は、要素に名前を付けます。
name 属性の値は、主に次の 3つの用途に使用されます。
-
要素を識別する :
これは グローバル属性の id と用途が似ています。 id 属性を使用するように name にも重複しない値を設定することで id の代替として機能させることが可能です。 しかし、id 属性があるのに あえて name 属性を使って要素を識別する必要はありません。 これは あくまでも二次的な使い方だと言えます。 -
要素をグループ化する :
これは input 要素の radio 型などのコントロールをグループとしてまとめるために使用します。 radio 型は 複数の選択肢の中からユーザーに 1つを選択してもらうためのラジオボタンに置き換えられる要素ですが、 複数の選択肢をグループとしてブラウザに認識させる必要があります。その為に複数の radio に 同じ name の値を設定します。 -
送信値のキー名として使用する:
これは 2項目目にも繋がることですが、form 要素を使ってデータを送信する場合、 name 属性の値を 送信するパラメーターのキーとして使います。 これと対になるものが value 属性の値となります。
既に述べていることもありますが、 name 属性の使いどころとしては、フォームからのデータ送信の「パラメーターキー」や入力コントロールやフレームターゲットのグループ化などが挙げられます。
サンプルコードと実行結果
サンプルコード: HTML (form 要素内での name 属性の使われ方
)
<body>
<form action="送信先URL" method="GET">
<input type="submit" name="TEST" value="SUBMIT">
</form>
</body>
form 要素からデータを送信した場合は、?name属性値=value属性値 の形式で送信されますので、この 2つの属性は必須です。
実行結果:ここでは javascript を使用して結果を表示していますが、ページの主旨と異なるので説明は割愛します。
サンプルコード: HTML (input 要素 radio 型での name 属性の使われ方
)
<body>
<form>
<input type="radio" name="RADIO" value="項目1"><br>
<input type="radio" name="RADIO" value="項目2"><br>
<input type="radio" name="RADIO" value="項目3">
</form>
</body>
ラジオボタンでは name 属性の値を使ってラジオボタンをグループ化します。
form 要素内でグループ化されたラジオボタンから選択された要素の value 属性値が送信されます。
ここでは javascript を使用して結果を表示していますが、ページの主旨と異なるので説明は割愛します。
サンプルコード: HTML (iframe 要素での name 属性の使われ方
)
<body>
<ul>
<li><a href="URL" target="Answer"> 本サイトのトップページ </a></li>
<li><a href="URL" target="Answer"> 本サイトの css: width のページ </a></li>
</ul>
<iframe src="./index.html" name="Answer" frameborder="0"></iframe>
</body>
a 要素の target 属性をグループ化し、iframe 要素の name 属性で src 属性値を切り替えることができます。
実行結果:
実行結果:
リンクのリストからリンクをクリックするとフレームに表示されるページが切り替わります。
リンクのリストからリンクをクリックするとフレームに表示されるページが切り替わります。
補足
input 要素では下記の name 属性値に特別な意味があります。
- name="_charset_" と指定すると、フォームデータのエンコードの種類を送信します。
- name="isindex" と指定すると、フォームデータの送信の際に isindex 要素の動作がエミュレートされます。isindex 要素は HTML5 では廃止なっており代替として使用します。