【JS】ボタンを押すと入力フォームが増える

2025年3月17日

createElement()とappendChild()を用い、ボタンをクリックすると入力欄が増えていく実装方法を紹介します。ユーザーの状況に応じてフォーム数を変更したい場合に便利です。

実装例（3つ）とコード

ボタンクリックで入力欄が増える

連絡事項：

『入力欄を増やす』をクリックすると、連絡事項を入力するフォームが増えていく。

入力欄のラベルも変える

連絡事項(1)：

入力フォームが増えると同時に、ラベルに記載された数字も増えていく。

自動計算

合計：0

『入力欄を増やす』をクリックすると、数字を入力するフォームと「＋」が追加される。
さらにそのフォームに数値を入れると、その合計が下に表示される。

【発展】不要な要素を消せるようにする

各欄の右横に「✖」アイコンを設置し、クリックするとその欄が消えるような実装も可能です。
コードは以下の記事で公開していますので、本記事と合わせてご覧ください。

ボタンクリックで入力欄が増える

document.createElement()を使ってinput要素とlabel要素を作り、appendChild()で要素を追加することで実装できる。

HTML/CSS/JavaScript コードはこちら

<div>
  <button>入力欄を増やす</button>
  <label>連絡事項：<input type="text"></label>
</div>

div {
  width: 100%;
  padding: 8px 16px;
  margin: 16px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 8px;
}

button {
  width: 50%;
  height: 2.5em;
  margin: 8px auto;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
}

button:hover {
  opacity: .7;
}

document.querySelector('button').addEventListener('click', () => {
  // 新しい label 要素を作成
  const newLabel = document.createElement('label');
  newLabel.textContent = '連絡事項：'; // ラベルのテキストを設定

  // 新しい input 要素を作成
  const newInput = document.createElement('input');
  newInput.type = 'text'; // input のタイプをテキストに設定

  // ラベルの中に input を追加
  newLabel.appendChild(newInput);

  // div の中にラベルを追加
  document.querySelector('div').appendChild(newLabel);
});

document.createElement('label')でlabel要素を作り、ラベルのテキストを設定する。
document.createElement('input')でinput要素を作り、type属性にtextを設定する。
appendChild()でlabel要素の中にinput要素を追加し、div要素の一番下にlabel要素を追加する。

ボタンクリックで入力欄が増えると同時に、ラベルの添字も増える

ボタンクリック時にinput要素数を計算し、その要素数に応じて追加するラベルの添字を決定する。

HTML/CSS/JavaScript コードはこちら

<div>
  <button>入力欄を増やす</button>
  <label>連絡事項(1)：<input type="text"></label>
</div>

div {
  width: 100%;
  padding: 8px 16px;
  margin: 16px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 8px;
}

button {
  width: 50%;
  height: 2.5em;
  margin: 8px auto;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
}

button:hover {
  opacity: .7;
}

document.querySelector('button').addEventListener('click', () => {
  // 現在の input 要素の数を取得し、新しい入力欄の番号を決定
  const formCount = document.querySelectorAll('input').length + 1;

  // 新しい input 要素（テキスト入力フィールド）を作成
  const newForm = document.createElement('input');
  newForm.type = 'text'; // input のタイプをテキストに設定

  // 新しい label 要素を作成し、番号付きのテキストを設定
  const newLabel = document.createElement('label');
  newLabel.textContent = `連絡事項(${formCount})：`; // 番号を追加

  // label の中に input を追加（クリック時に自動フォーカスされる）
  newLabel.appendChild(newForm);

  // div の中に label を追加（元の構造と同じ形式で追加）
  document.querySelector('div').appendChild(newLabel);
});

クリックした時点のinput要素数 + 1を変数formCountに代入する。
document.createElement('input')でinput要素を作り、type属性にtextを設定する。
document.createElement('label')でlabel要素を作り、label名に変数formCountを使う。
appendChild()でlabel要素の中にinput要素を追加し、div要素の一番下にlabel要素を追加する。

ボタンクリックで計算式の項を増やす

ボタンクリックで数値を入力できる項を増やす。実際に入力すると、各項に入力された数字の和が表示される。

HTML/CSS/JavaScript コードはこちら

<button>入力欄を増やす</button>
<span>
  <input type="number">
</span>
<span>
  <p>+</p>
  <input type="number">
</span>
</div>
<div>
<p id="total">合計：</p>
</div>

div {
  width: 100%;
  padding: 8px 16px;
  margin: 16px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 8px;
}

input {
  margin: 0 auto;
  width: 60%;
  height: 2em;
  text-align: center;
}

button {
  width: 50%;
  height: 2.5em;
  margin: 8px auto;
  padding: 4px 0;
  border-radius: 4px;
  background-color: blue;
  color: white;
}

button:hover {
  opacity: .7;
}

#total {
  margin: 4px auto;
}

// すべての <input type="number"> 要素を取得
let numberForms = document.querySelectorAll('input[type="number"]');

// 合計を表示する <p> 要素を取得
const total = document.getElementById('total');

// 計算を行う関数
function calc() {
  let result = 0; // 合計値を初期化

  // すべての input 要素の値を数値として加算
  numberForms.forEach(numberForm => {
    result += Number(numberForm.value); // 数値型に変換して加算
  });

  // 合計を表示する p 要素を更新
  total.textContent = `合計：${result}`;
}

// 既存の input 要素に入力イベントを設定
numberForms.forEach(numberForm => {
  numberForm.addEventListener('input', calc);
});

// 「入力欄を増やす」ボタンのクリックイベント
document.querySelector('button').addEventListener('click', () => {
  // 新しい input 要素を作成
  const newForm = document.createElement('input');
  newForm.type = 'number';

  // 「+」記号を表示する p 要素を作成
  const plus = document.createElement('p');
  plus.textContent = '+';

  // 新しい要素を囲むコンテナ
  const wrapper = document.createElement('span'); 
  wrapper.appendChild(plus);
  wrapper.appendChild(newForm);

  // 最初の div に追加
  document.querySelector('div').appendChild(wrapper);

  // 新しい input に入力イベントを追加
  newForm.addEventListener('input', calc);

  // numberForms を更新（新しく追加した input も含めるため）
  numberForms = document.querySelectorAll('input[type="number"]'); // input のみを取得
});

まず計算部分のJavaScriptを記述。自動計算式の作り方はこちらの記事を参照。
入力フォームの増やし方は前述と同じ。クリックイベントも設定する。
要素が増えるたびにinput[type="number"を再取得する。

まとめ

以上、ボタンクリックで入力フォームを増やす方法を紹介しました。

本記事では「input要素を新規に作成して追加する」という内容でしたが、input要素に限らず様々なHTML要素を作成することも可能です。実装したい内容に合わせて、ぜひ応用してみてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。