フォーム入力を JavaScript で受け取る

前回は DOM 操作とイベントの基本を扱いました。今回はもう一歩進んで、ユーザーがテキストを入力したり選択肢を選んだりする「フォーム」を JavaScript で制御します。

引き続き VS Code とブラウザを使って確認します。

フォームとは

Web ページでよく見る入力欄やプルダウン、「送信」ボタンのセットをフォームと呼びます。Java で Scanner を使ってコンソールから入力を受け取ったのと似た役割ですが、フォームはブラウザの画面上で動きます。

input と label の基本

テキスト入力欄は <input> タグで作ります。<label> タグを組み合わせると、入力欄に名前を付けられます。

<label for="username">名前:</label>
<input type="text" id="username">

for 属性と id 属性を同じ値にすると、ラベルをクリックしたときに入力欄にフォーカスが移ります。type="text" はテキスト入力で、ほかにも number や email など用途ごとの型があります。

select と textarea

選択肢が決まっている場合は <select> を使います。

<label for="lang">好きな言語:</label>
<select id="lang">
  <option value="java">Java</option>
  <option value="python">Python</option>
  <option value="javascript">JavaScript</option>
</select>

複数行のテキストを入力させたいときは <textarea> を使います。

<label for="memo">メモ:</label>
<textarea id="memo" rows="4" cols="30"></textarea>

form タグと submit イベント

フォーム要素を <form> タグで囲むと、「送信」ボタンを押したときに submit イベントが発生します。index.html を次の内容で作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームの練習</title>
</head>
<body>
  <form id="profile-form">
    <label for="username">名前:</label>
    <input type="text" id="username">

    <label for="lang">好きな言語:</label>
    <select id="lang">
      <option value="java">Java</option>
      <option value="python">Python</option>
      <option value="javascript">JavaScript</option>
    </select>

    <button type="submit">送信</button>
  </form>

  <script>
    const form = document.getElementById('profile-form');

    form.addEventListener('submit', function(event) {
      event.preventDefault();     // ページ再読み込みを止める
      console.log('送信ボタンが押された');
    });
  </script>
</body>
</html>

ブラウザで開いてボタンを押し、DevTools（F12 または Ctrl + Shift + I、Mac は Cmd + Option + I）の Console タブに「送信ボタンが押された」と表示されれば動いています。

DevTools の Console タブに出力が表示される

event.preventDefault() はページ再読み込みを止めるためのものです。event はブラウザが自動的に渡すオブジェクトで、Java でいうメソッドの引数に近い感覚で使います。

入力値を読み取る

JavaScript で入力値を取得するには、要素の .value プロパティを使います。先ほどのファイルの <script> タグの中身を次のコードに書き換えます。

const form = document.getElementById('profile-form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.getElementById('username').value;
  const lang = document.getElementById('lang').value;

  console.log('名前: ' + name);
  console.log('言語: ' + lang);
});

ボタンを押すと Console に入力した名前と言語が表示されます。Java では scanner.nextLine() で値を受け取りましたが、JavaScript では 要素.value で読み取ります。どちらも「ユーザーが入力した文字列を変数に入れる」という点は同じです。

入力値を画面に表示する

コンソールだけでなく、画面にも表示してみます。結果を表示する <p> タグをあらかじめ用意しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームの練習</title>
</head>
<body>
  <h1>プロフィール入力</h1>

  <form id="profile-form">
    <p>
      <label for="username">名前:</label>
      <input type="text" id="username">
    </p>
    <p>
      <label for="lang">好きな言語:</label>
      <select id="lang">
        <option value="java">Java</option>
        <option value="python">Python</option>
        <option value="javascript">JavaScript</option>
      </select>
    </p>
    <button type="submit">送信</button>
  </form>

  <p id="result"></p>

  <script>
    const form = document.getElementById('profile-form');
    const result = document.getElementById('result');

    form.addEventListener('submit', function(event) {
      event.preventDefault();

      const name = document.getElementById('username').value;
      const lang = document.getElementById('lang').value;

      result.textContent = name + 'さんの好きな言語: ' + lang;
    });
  </script>
</body>
</html>

送信ボタンを押すと <p id="result"> の中にテキストが表示されます。ページは再読み込みされず、JavaScript だけで画面が更新されます。

送信後に結果が画面に表示される

空欄チェックを入れる

入力が空のまま送信された場合に注意を出したいことがあります。最小限の対応として if 文で空欄を検出します。

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.getElementById('username').value;

  if (name === '') {
    result.textContent = '名前を入力してください';
    return;    // ここで処理を終える
  }

  const lang = document.getElementById('lang').value;
  result.textContent = name + 'さんの好きな言語: ' + lang;
});

Java の if 文と構造は同じです。=== は JavaScript の「厳密等価演算子」で、値と型の両方が一致するかを比較します。Java の equals() メソッドに近い役割です。

HTML 側の入力欄に required 属性を追加すると、ブラウザが自動で空欄チェックを行ってくれます。

<input type="text" id="username" required>

required 属性による空欄チェックのポップアップ required 属性による空欄チェックのポップアップ

ここまでのまとめ

要素	役割
`<input>`	テキスト・数値などの1行入力
`<select>` + `<option>`	選択肢のドロップダウン
`<textarea>`	複数行のテキスト入力
`<form>` + `submit` イベント	フォーム送信をまとめて管理
`event.preventDefault()`	ページ再読み込みを止める
`要素.value`	入力値を文字列として取得

次の回へ

次回は、ここで受け取ったデータをサーバーに送る fetch と、データ形式の JSON を扱います。フォームで入力 → JavaScript で読み取り → サーバーに送信、という流れがつながります。