createElement()
とappendChild()
を用い、ボタンをクリックすると入力欄が増えていく実装方法を紹介します。ユーザーの状況に応じてフォーム数を変更したい場合に便利です。
実装例(3つ)とコード
ボタンクリックで入力欄が増える
『入力欄を増やす』をクリックすると、連絡事項を入力するフォームが増えていく。
入力欄のラベルも変える
入力フォームが増えると同時に、ラベルに記載された数字も増えていく。
自動計算
+
合計:0
『入力欄を増やす』をクリックすると、数字を入力するフォームと「+」が追加される。
さらにそのフォームに数値を入れると、その合計が下に表示される。
【発展】不要な要素を消せるようにする
各欄の右横に「✖」アイコンを設置し、クリックするとその欄が消えるような実装も可能です。
コードは以下の記事で公開していますので、本記事と合わせてご覧ください。
あわせて読みたい


【JavaScript】クリックで特定のフォームやテーブル行を消す
クローズボタン(✖)をクリックすると、特定の入力欄やテーブル行が削除される実装方法を紹介します。不要になった入力フォームなど、特定のHTML要素を消すのに…
【発展】ボタンを立体的にする方法
思わずクリックしたくなるような、ちょっとしたアニメーション付きのボタンをCSSで実装できます。
コードは以下の記事で公開していますので、本記事と合わせてご覧ください。
あわせて読みたい


【CSS】押し込まれるような立体的なボタンを作る
CSSのbox-shadowプロパティやactive擬似クラスを使って、クリックしたときに実際にボタンが押されているような、立体感のあるボタンの作り方を公開します。自分の学習・…
ボタンクリックで入力欄が増える
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の実装例は、一覧として以下記事に纏めています。
あわせて読みたい


Webデザイン・UIコンポーネント集(HTML/CSS/JS)
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。(随時更新中)実装方法などは別記事にコードや実装ポイントを公開していますので、自…