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

2023年7月6日

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', () => {
  const newForm = document.createElement('input');
  newForm.type = 'text';

  const newLabel = document.createElement('label');
  newLabel.textContent = '連絡事項：';

  newLabel.appendChild(newForm);
  document.querySelector('div').appendChild(newLabel);
});

document.createElement(‘input’)でinput要素を作り、type属性にtextを設定する。
次にdocument.createElement(‘label’)でlabel要素を作り、このlabel要素の下にappendChild()でinput要素を追加する。
最後に、appendChild()で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', () => {
  const formCount = document.querySelectorAll('input').length + 1;
  
  const newForm = document.createElement('input');
  newForm.type = 'text';

  const newLabel = document.createElement('label');
  newLabel.textContent = `連絡事項(${formCount})：`;

  newLabel.appendChild(newForm);
  document.querySelector('div').appendChild(newLabel);
});

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

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

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

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

<div>
  <button>入力欄を増やす</button>
  <input type="number">
  <p>+</p>
  <input type="number">
</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;
}

let numberForms = document.querySelectorAll('input');
const total = document.getElementById('total');

function calc() {
  let result = 0;

  numberForms.forEach(numberForm => {
     result += Number(numberForm.value);
  });

  total.textContent = `合計：${result}`;
}

numberForms.forEach(numberForm => {
  numberForm.addEventListener('input', calc);
});

document.querySelector('button').addEventListener('click', () => {
  const newForm = document.createElement('input');
  newForm.type = 'number';

  const plus = document.createElement('p');
  plus.textContent = '+';

  const div = document.querySelector('div');
  div.appendChild(plus);
  div.appendChild(newForm);

  newForm.addEventListener('input', calc);

  numberForms = document.querySelectorAll('input');
});

まず計算部分のJavaScriptを記述。自動計算式の作り方はこちらの記事を参照。
入力フォームの増やし方は前述と同じ。
要素が増えるたびにinput要素を再取得し、自動計算のクリックイベントを設定する。（設定しないと、新しい項に数値を入れても計算されないため。）

まとめ

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

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

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