入力欄にidがあれば送れる？HTMLのnameと送信データを作例で確認しよう

入力欄にidを付け、画面には値もある。それなのに、フォームから取り出したデータに入っていない。要素を識別するidと、送信する項目名のnameを分けてみよう。

このページでは架空の表示名だけを使い、FormDataという仕組みでフォームの項目をページ内へ表示する。サーバーへ送信せず、アカウントやメールアドレスも入力しない練習だよ。

idは、要素を識別する名前

idはページ内で要素を識別するための属性。labelのforで入力欄を指すときや、JavaScriptで要素を探すときなどに使う。同じページの中で重複させないようにしよう。

一方、nameはフォームの項目をどの名前で扱うかに関わる属性。同じ見た目の文字を指定することもあるけれど、役割は別なんだ。

<label for="display-name">表示名</label>
<input id="display-name" name="nickname" value="こより">

この例では、要素を指すidはdisplay-nameで、フォームの項目名はnicknameになる。二つが同じ文字である必要はないよ。

作例では、idだけの入力欄から始める

作例の表示名は、最初はidだけを持つ。「フォームの項目を見る」を押すと、表示名のデータがないことを確認できる。

次に「nameを付ける」を有効にして、もう一度押す。今度はnicknameと入力値の組が表示される。画面の値が同じでも、フォームへ含めるための条件が変わったことを見よう。

ブラウザで項目を取り出す

const form = document.querySelector('form');
const data = new FormData(form);
console.log([...data.entries()]);

FormDataは、フォームの成功したコントロールから名前と値の組を作る。ここで成功したという言葉は、サーバーの登録が完了したという意味ではない。nameがあることなどの条件に合う入力項目を扱うんだ。

たとえばdisabledの項目は通常含まれず、未選択のチェックボックスも含まれない。nameさえ付けば、すべてが必ず入ると単純化しないようにしよう。

操作と期待する結果

1. 最初のまま「フォームの項目を見る」を押し、空の配列を確認する。
2. nameを付け、nicknameと「こより」が出るかを見る。
3. 表示名を架空の別名へ変え、取り出す値も変わるか確かめる。
4. リセットで、idだけ・表示名「こより」へ戻す。

編集部では、この三つの取得結果とリセットをブラウザで確認した。nameを切り替える操作用の欄にはnameを付けず、表示名だけが比較対象になるようにしているよ。

labelが動くことと、項目が送れることは別

labelを押して入力欄へフォーカスが移っても、それは名前と要素の関連付けができた確認。送る項目がそろっているかは、別に見る必要がある。

実際のサーバーへつなぐ場合は、APIが期待する項目名、入力の検証、送信先、個人情報の扱いも確認する。今回のページ内の配列表示は、サーバーの受信や保存を試したものではないよ。

関連付けはlabelと入力欄、含まれない項目の条件はdisabledとreadonlyへ。

参照した公式資料

• MDN：FormData constructor
• MDN：input

確認日：2026年10月26日。