【JavaScript入門】フォームの操作

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

フォームの操作

　ここでは、HTML内のフォームに配置された部品（テキストボックス、ラジオボタン、プルダウンリスト、チェックボックス、テキストエリア）をJavaScriptで操作する方法について学びます。DOMの読み込み完了後に各フォーム部品を取得し、［サンプル入力］ボタンをクリックすると自動的に値が入力され、送信ボタンを押すと各部品の値がコンソールに出力される仕組みを実装しています。各処理のポイントや、HTMLとJavaScriptの連携方法を、具体的なコード例を交えながら順を追って説明します。

１．フォームの基本操作

1.1. フォーム部品の取得と選択

　フォーム操作において、まずは対象となる各要素を取得する必要があります。以下の表は、今回のサンプルコードで使用している主要なフォーム部品と、そのHTML要素およびJavaScriptでの取得方法をまとめたものです。

フォーム部品	HTML要素・属性	説明
ユーザー名	`<input type="text" id="username" name="username">`	ユーザー名を入力するテキストボックス
性別	`<input type="radio" name="gender" value="...">`	複数の選択肢から1つを選ぶラジオボタン
国名	`<select id="country" name="country">`	国名を選択するドロップダウンリスト
ニュースレター購読	`<input type="checkbox" id="newsletter" name="newsletter">`	購読希望のチェックを行うチェックボックス
コメント	`<textarea id="comment" name="comment">`	複数行の入力が可能なテキストエリア

　JavaScriptでは以下のように、document.querySelectorやdocument.querySelectorAllを用いて各部品を取得します。性別のラジオボタンは複数あるため、querySelectorAllで取得後にArray.from()で配列に変換しています。

<script>
window.addEventListener('DOMContentLoaded', () => {
  // 各フォーム部品の取得
  const elUsername = document.querySelector('#username');
  const elGender = Array.from(document.querySelectorAll('[name="gender"]'));
  const elCountry = document.querySelector('#country');
  const elNewsletter = document.querySelector('#newsletter');
  const elComment = document.querySelector('#comment');
  // サンプル入力ボタンとフォーム自身の取得（後述のイベント登録用）
  const elBtnSample = document.querySelector('#btnSample');
  const elForm = document.querySelector('#userForm');
  
  // 以下、各処理の登録へ続きます
});
</script>

1.2. 自動入力ボタンの処理登録

　次に、［サンプル入力］ボタンを押すと、各フォーム部品にあらかじめ設定した値を自動で入力する処理を実装します。ここでは、ラジオボタンの選択状態（.checked）や、チェックボックスのオン／オフ状態も変更します。

<script>
  // サンプル入力ボタンの処理登録
  elBtnSample.addEventListener('click', () => {
    // 各フォーム部品の値を設定
    elUsername.value = '山田太郎';
    elGender[0].checked = true;   // 男性のラジオボタンを選択
    elCountry.value = 'overseas';
    elNewsletter.checked = true;
    elComment.value = 'サンプルコメントです';
  });
</script>

　このコードにより、ユーザーが［サンプル入力］ボタンをクリックすると、ユーザー名に「山田太郎」が入力され、性別は女性が選択、国名は「海外」、ニュースレターのチェックが入り、コメント欄にサンプルメッセージが表示されます。

２．フォーム送信時のイベント処理

2.1. submitイベントの登録と値の取得

　フォーム送信時に発生するsubmitイベントを利用して、各部品に入力された値を取得し、コンソールに出力する処理を設定します。ラジオボタンはArray.find()を用いて現在選択されている要素の値を取得し、チェックボックスは.checkedプロパティで状態を確認します。

<script>
  // フォーム送信時の処理登録
  elForm.addEventListener('submit', (e) => {
    // 各フォーム部品の入力値を取得
    const usernameVal = elUsername.value;
    const genderVal = elGender.find(r => r.checked).value;
    const countryVal = elCountry.value;
    // チェックボックスはチェックされている場合のみ値を取得
    const newsletterVal = elNewsletter.checked ? elNewsletter.value : null;
    const commentVal = elComment.value;
    
    // 取得した値をコンソールに出力
    console.log(usernameVal, genderVal, countryVal, newsletterVal, commentVal);
    
    // デフォルトの送信処理をキャンセルし、ページ遷移を防止
    e.preventDefault();
  });
</script>

2.2. コンソール出力と送信のキャンセル

　ここでは、フォームの各部品の値をconsole.log()で出力することで、実際に入力された情報を確認できます。また、e.preventDefault()を使用することで、実際の送信処理をキャンセルし、JavaScript上での検証やデバッグが可能な状態にしています。これにより、ページ遷移を引き起こさずに、入力内容の検証や追加処理が行えるようになります。

以下に、サンプルHTML全体のコードを示します。ファイル名は「formDemo.html」としています。

ファイル名： formDemo.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム操作デモ</title>
</head>
<body>
  <form id="userForm">
    <div>
      ユーザー名：<input type="text" id="username" name="username" value="未入力">
    </div>
    <div>
      性別：
      <label>
        <input type="radio" id="genderMale" name="gender" value="male">男性
      </label>
      <label>
        <input type="radio" id="genderFemale" name="gender" value="female">女性
      </label>
      <label>
        <input type="radio" id="genderOther" name="gender" value="other" checked>その他
      </label>
    </div>
    <div>
      国名：
      <select id="country" name="country">
        <option value="japan" selected>日本</option>
        <option value="overseas">海外</option>
      </select>
    </div>
    <div>
      <label>
        <input type="checkbox" id="newsletter" name="newsletter" value="subscribed">ニュースレター購読
      </label>
    </div>
    <div>
      コメント：<br>
      <textarea id="comment" rows="4" cols="40">入力なし</textarea>
    </div>
    <div>
      <button type="button" id="btnSample">サンプル入力</button>
      <input type="submit" value="送信">
    </div>
  </form>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      // 各フォーム部品の取得
      const elUsername = document.querySelector('#username');
      const elGender = Array.from(document.querySelectorAll('[name="gender"]'));
      const elCountry = document.querySelector('#country');
      const elNewsletter = document.querySelector('#newsletter');
      const elComment = document.querySelector('#comment');
      const elBtnSample = document.querySelector('#btnSample');
      const elForm = document.querySelector('#userForm');
      
      // サンプル入力ボタンの処理登録
      elBtnSample.addEventListener('click', () => {
        elUsername.value = '山田太郎';
        elGender[0].checked = true;   // 男性のラジオボタンを選択
        elCountry.value = 'overseas';
        elNewsletter.checked = true;
        elComment.value = 'サンプルコメントです';
      });
      
      // フォーム送信時の処理登録
      elForm.addEventListener('submit', (e) => {
        const usernameVal = elUsername.value;
        const genderVal = elGender.find(r => r.checked).value;
        const countryVal = elCountry.value;
        const newsletterVal = elNewsletter.checked ? elNewsletter.value : null;
        const commentVal = elComment.value;
        
        console.log(usernameVal, genderVal, countryVal, newsletterVal, commentVal);
        e.preventDefault();
      });
    });
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

・フォーム読み込み後、何も操作せずに［送信］ボタンをクリックすると、コンソールには以下のように表示されます。

未入力 other japan null 入力なし

・［サンプル入力］ボタンをクリックした後、［送信］ボタンをクリックすると、コンソールには以下のように表示されます。

山田太郎 female overseas subscribed サンプルコメントです

まとめ

　ここでは、JavaScriptを用いたフォーム操作の基本を、フォーム部品の取得、値の設定、自動入力ボタンの実装、そして送信時のイベント処理という流れで分かりやすく説明しました。各部品の値は、.valueや.checkedなどのプロパティを利用することで簡単に取得・設定できるため、今後のフォームバリデーションやサーバー連携などの実装に応用することができます。これらの基本技術を習得することで、ユーザーインターフェースの操作性向上や、より洗練されたWebアプリケーションの実現が期待されます。