こんにちは、かつコーチです。
前回は、イベントの伝播（バブリングとキャプチャリング）について解説しました。
今回は、多くのWebサービスで必ず出てくる「フォームの入力値を取得する」方法を扱います。
お問い合わせフォーム、検索ボックス、ログイン画面など、ユーザーが入力した値をJavaScriptで受け取る場面は非常に多いです。
基本のパターンを押さえておくと、いろいろな場面で応用が効くようになります。
フォームの入力値を取得する基本
テキスト入力欄の値を取得する
<input> 要素の値は、value プロパティで取得できます。
<input type="text" id="username" />
<button id="submitBtn">送信</button>
const usernameInput = document.querySelector("#username");
const submitBtn = document.querySelector("#submitBtn");
submitBtn.addEventListener("click", () => {
const value = usernameInput.value;
console.log(`入力された値: ${value}`);
});
querySelector で要素を取得したあと、.value を参照するだけで入力中の文字列を取得できます。
value は常に最新の入力内容を反映しているので、ボタンをクリックした瞬間の値がそのまま取得できます。
テキストエリアの値を取得する
複数行の入力欄である <textarea> も、同じように value で取得できます。
<textarea id="message"></textarea>
const messageArea = document.querySelector("#message");
console.log(messageArea.value);
<textarea> は <input> と違って閉じタグを使いますが、値の取得方法は同じなので迷うことはないでしょう。
入力欄の種類ごとの取得方法
チェックボックスの状態を取得する
チェックボックスは、value ではなく checked プロパティでON/OFFの状態を取得します。
<input type="checkbox" id="agree" />同意する
const agreeCheckbox = document.querySelector("#agree");
agreeCheckbox.addEventListener("change", () => {
console.log(agreeCheckbox.checked); // true または false
});
checked はブール値（true/false）を返すので、if 文と組み合わせて使うことが多いです。
ラジオボタンの選択値を取得する
ラジオボタンは同じ name 属性を持つグループの中から、選択されている1つを探す必要があります。
<input type="radio" name="plan" value="free" checked />無料プラン
<input type="radio" name="plan" value="premium" />有料プラン
const planRadios = document.querySelectorAll('input[name="plan"]');
planRadios.forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.checked) {
console.log(`選択されたプラン: ${radio.value}`);
}
});
});
querySelectorAll で同じ name を持つ要素をまとめて取得し、forEach でそれぞれにイベントを設定しているのがポイントです。
checked が true になっている要素の value が、実際に選択されているプランということになります。
セレクトボックスの選択値を取得する
<select> 要素も value プロパティで、選択中の <option> の値を取得できます。
<select id="country">
<option value="jp">日本</option>
<option value="us">アメリカ</option>
</select>
const countrySelect = document.querySelector("#country");
countrySelect.addEventListener("change", () => {
console.log(countrySelect.value); // "jp" または "us"
});
change イベントは、選択している値が変わったタイミングで発生します。
フォーム全体の値をまとめて取得する
submitイベントで送信時にまとめて処理する
複数の入力欄を1つずつ取得するのではなく、フォーム全体の submit イベントでまとめて処理するのが基本のパターンです。
<form id="contactForm">
<input type="text" id="name" />
<input type="email" id="email" />
<button type="submit">送信</button>
</form>
const form = document.querySelector("#contactForm");
form.addEventListener("submit", (event) => {
event.preventDefault();
const name = document.querySelector("#name").value;
const email = document.querySelector("#email").value;
console.log(`名前: ${name}, メール: ${email}`);
});
event.preventDefault() を呼び出すことで、フォーム送信時のページ再読み込み（デフォルトの挙動）を止めています。
これを書き忘れると、送信ボタンを押した瞬間にページがリロードされてしまい、JavaScriptで取得した値を活かせません。
FormDataでまとめて取得する
入力欄の数が多い場合は、1つずつ document.querySelector するのではなく FormData を使うとコードがすっきりします。
const form = document.querySelector("#contactForm");
form.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(form);
const name = formData.get("name");
const email = formData.get("email");
console.log(`名前: ${name}, メール: ${email}`);
});
このとき、各入力欄には id ではなく name 属性を設定しておく必要があります。
<form id="contactForm">
<input type="text" name="name" />
<input type="email" name="email" />
<button type="submit">送信</button>
</form>
FormData は get("name属性の値") という形で値を取り出せるので、入力欄が10個、20個と増えても記述量が大きく変わらないというメリットがあります。
つまずきやすいポイント：数値の取得
かつコーチが実際につまずいた話
以前、数量入力フォームを作っていて、入力された数値を使って合計金額を計算する処理を書いていました。
const quantityInput = document.querySelector("#quantity");
const unitPrice = 1000;
quantityInput.addEventListener("input", () => {
const total = quantityInput.value + unitPrice;
console.log(total);
});
quantity に 3 と入力したら 3000 になるはずだと思っていたのですが、実際にコンソールに表示されたのは次のような値でした。
31000
数値の足し算になるはずが、文字列の連結になってしまっていたのです。
原因は、<input> の value プロパティは type="number" であっても常に文字列型で返ってくることでした。
"3"（文字列）と 1000（数値）を + で結合すると、JavaScriptは数値の加算ではなく文字列の連結として扱ってしまいます。
❌ Before：valueを文字列のまま計算に使う
const quantityInput = document.querySelector("#quantity");
const unitPrice = 1000;
quantityInput.addEventListener("input", () => {
const total = quantityInput.value + unitPrice;
console.log(total); // "3" + 1000 → "31000"（文字列結合になってしまう）
});
✅ After：Numberで数値に変換してから計算する
const quantityInput = document.querySelector("#quantity");
const unitPrice = 1000;
quantityInput.addEventListener("input", () => {
const total = Number(quantityInput.value) * unitPrice;
console.log(total); // 3 * 1000 → 3000（正しく数値計算される）
});
Number() で明示的に数値へ変換してから計算することで、意図した通りの結果になりました。
フォームの値を計算に使うときは、「value は必ず文字列で返ってくる」というルールを頭に入れておくだけで、このミスは防げます。
まとめ
この記事のポイント
- テキスト・テキストエリアの値は
valueプロパティで取得する - チェックボックスは
checked、ラジオボタン・セレクトボックスはvalueで状態を判定する - フォーム全体は
submitイベント＋event.preventDefault()でまとめて処理する - 入力欄が多い場合は
FormDataを使うとコードがすっきりする valueは常に文字列型で返るため、数値計算にはNumber()での変換が必須
次に読むべき記事
フォームの値取得ができるようになったら、次はHTML要素に独自の情報を持たせる「data属性」の活用方法を見ていきましょう。
→ 次の記事：data属性を活用する方法