【HTML初心者必見】name属性とは？フォーム開発のカギを握る基本中の基本！
山崎講師こんにちは。ゆうせいです。
今回は、HTMLフォームで絶対に知っておくべき「name属性」について、わかりやすく解説していきます。
「valueと何が違うの？」
「nameって何のために必要なの？」
そう思ったことはありませんか？
この属性、実はデータ送信の要（かなめ）なんです。
フォームの仕組みを理解するうえで避けて通れないname属性を、じっくり解説していきます！
name属性とは何か？
一言で言うと…
フォームで送信するデータの“名前”を指定するための属性です。
例を見てみましょう。
<input type="text" name="username" value="yamada">
このコードで送信される内容は：
username = yamada
つまり、name属性が「ラベル」、value属性が「中身（値）」なんですね！
name属性が使われる場面
主に使われるタグ
以下のHTMLタグにname属性をよく使います。
| タグ名 | 目的 |
|---|---|
<input> | テキスト、チェックボックスなど |
<textarea> | 複数行入力欄 |
<select> | プルダウンリスト |
<button> | ボタンの送信データ |
<form> | フォーム全体（rare case） |
それぞれ、どんな形で送信データに反映されるかは「name=値」のペアで決まります。
name属性の実際の動作
実例で見る送信データ
次のフォームを考えてみてください。
<form method="POST" action="/signup">
<input type="text" name="email" value="test@example.com">
<input type="password" name="password" value="12345">
<button type="submit">送信</button>
</form>
このフォームを送信すると、サーバーには次のようなデータが届きます。
email=test@example.com&password=12345
ここでポイントなのが、nameが送信データの「キー」になっているということ。
nameがないとどうなる？
<input type="text" value="test@example.com">
→ nameが無ければ、サーバーには何も送信されません！
つまり、name属性がないフォーム要素は空気と同じ。存在していても、送られなければ意味がないのです。
ラジオボタンとname属性の関係
同じグループにするために必要
ラジオボタンを使う場合、同じnameを使うことで「どれか1つだけ選択可」にできます。
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
このように「グループ名」をname属性で統一すると、排他的に1つだけ選べるようになります。
name属性と配列風の書き方
name="hobby[]" って何？
複数のデータを配列として送信したいときは、[]をつけます。
<input type="checkbox" name="hobby[]" value="music"> 音楽
<input type="checkbox" name="hobby[]" value="sports"> スポーツ
<input type="checkbox" name="hobby[]" value="reading"> 読書
チェックされた項目はこんな風にサーバーへ：
hobby=music&hobby=sports
バックエンドで受け取ると、配列として扱えるようになります。
name属性のまとめと注意点
メリット
| 内容 | 説明 |
|---|---|
| データの送信に必須 | サーバーとやり取りするすべてのデータはnameがキーになる |
| グルーピングが可能 | ラジオボタンやチェックボックスでのグループ化に使える |
| 配列送信が可能 | hobby[]のように複数の値を一括送信できる |
デメリットや注意点
| 内容 | 説明 |
|---|---|
| nameがないと送れない | valueだけでは意味がない |
| 同じnameを意図なく使うと上書きされる | テキストフィールドなどで重複すると上書きされる |
よくある質問（FAQ）
Q1. idとnameは何が違うの？
非常にいい質問です！
| 属性 | 用途 |
|---|---|
id | JavaScriptやCSSでの識別、1ページ内に1回だけ使用 |
name | データ送信用、同じ名前を複数使ってOK |
たとえば、見た目をCSSで調整したり、JavaScriptで選択するにはidを使い、
サーバーへデータを送る目的にはnameを使います。
今後の学習のヒント
name属性は小さな存在に見えて、実はフォームとサーバーをつなぐ“接着剤”のような役割を果たします。
これを正しく理解すれば、
- PHPやPythonなどバックエンド言語でのデータ受け取り
- JavaScriptとの連携
- バリデーションやUXの改善
など、幅広いスキルに発展できます！
次は、以下のトピックに進んでみるのがおすすめです。
formタグ全体の流れ（method, actionなど）idとの違いを使った実装- JavaScriptで
name属性のある要素を操作する方法 FormDataオブジェクトでデータを送る方法
「フォームはつまらない」と思われがちですが、Webの本質がぎゅっと詰まっています。
ぜひこの機会に、理解を深めてみてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
