JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで複数ステップのフォームを作成する方法｜入力チェック付きマルチステップフォームの実装例

ユーザー登録やアンケートなど、入力項目が多いフォームでは、すべての項目を1画面に詰め込むとユーザーの負担が大きくなり、離脱の原因にもなります。そこで有効なのが、フォームを複数のステップ（ページ）に分割して表示する「マルチステップフォーム」です。

本記事では、JavaScriptを使って「次へ」「戻る」ボタンでステップを切り替えられるフォームを作成する方法を紹介します。さらに、各ステップごとの入力チェック（バリデーション）や、進行状況を示すインジケーター（ドット表示）の実装方法も合わせて解説します。

コード例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
    }
    body {
        background-color: #f1f1f1;
    }
    #regForm {
        margin: 100px auto;
        font-family: Raleway;
        padding: 40px;
        width: 70%;
        min-width: 300px;
    }
    h1 {
        text-align: center;
    }
    input {
        padding: 10px;
        width: 100%;
        font-size: 17px;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border: 1px solid #aaaaaa;
    }
    /* バリデーションエラーが発生した入力欄をマーク */
    input.invalid {
        background-color: #ffdddd;
    }
    /* デフォルトですべてのステップを非表示 */
    .page {
        display: none;
    }
    button {
        background-color: #4CAF50;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-size: 17px;
        font-family: Raleway;
        cursor: pointer;
    }
    button:hover {
        opacity: 0.8;
    }
    #prevBtn {
        background-color: #bbbbbb;
    }
    .step {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbbbbb;
        border: none;
        border-radius: 50%;
        display: inline-block;
        opacity: 0.5;
    }
    .step.active {
        opacity: 1;
    }
    .step.finish {
        background-color: #4CAF50;
    }
</style>
<body>
<form id="regForm">
<h1>Register:</h1>
<div class="page">Name:
<p><input placeholder="First name:" oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name:" oninput="this.className = ''" name="lname"></p>
</div>
<div class="page">Contact Info:
<p><input placeholder="E-mail:" oninput="this.className = ''" name="email"></p>
<p><input placeholder="Phone:" oninput="this.className = ''" name="phone"></p>
</div>
<div class="page">Birthday:
<p><input placeholder="Date:" oninput="this.className = ''" name="dd"></p>
<p><input placeholder="Month:" oninput="this.className = ''" name="nn"></p>
<p><input placeholder="Year:" oninput="this.className = ''" name="yyyy"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
    var currentTab = 0;
    showTab(currentTab);
    function showTab(stepNo) {
        var pageEle = document.getElementsByClassName("page");
        pageEle[stepNo].style.display = "block";
        if (stepNo == 0) {
            document.getElementById("prevBtn").style.display = "none";
        }
        else {
            document.getElementById("prevBtn").style.display = "inline";
        }
        if (stepNo == (pageEle.length - 1)) {
            document.getElementById("nextBtn").innerHTML = "Submit";
        }
        else {
            document.getElementById("nextBtn").innerHTML = "Next";
        }
        changeStepIndicator(stepNo)
    }
    function nextPrev(stepNo) {
        var pageEle = document.getElementsByClassName("page");
        if (stepNo == 1 && !checkForm()) return false;
        pageEle[currentTab].style.display = "none";
        currentTab = currentTab + stepNo;
        if (currentTab >= pageEle.length) {
            document.getElementById("regForm").submit();
            return false;
        }
        showTab(currentTab);
    }
    function checkForm() {
        var pageEle, inputEle, i, valid = true;
        pageEle = document.getElementsByClassName("page");
        inputEle = pageEle[currentTab].getElementsByTagName("input");
        for (i = 0; i < inputEle.length; i++) {
            if (inputEle[i].value == "") {
                inputEle[i].className += " invalid";
                valid = false;
            }
        }
        if (valid) {
            document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid;
    }
    function changeStepIndicator(stepNo) {
        var i, pageEle = document.getElementsByClassName("step");
        for (i = 0; i < pageEle.length; i++) {
            pageEle[i].className = pageEle[i].className.replace(" active", "");
        }
        pageEle[stepNo].className += " active";
    }
</script>
</body>
</html>

コードのポイント

  • showTab()関数：指定した番号のステップだけを表示します。最初のステップでは「戻る（Previous）」ボタンを非表示にし、最後のステップでは「次へ（Next）」ボタンの文言を「送信（Submit）」に切り替えます。
  • nextPrev()関数：引数に「1」を渡せば次のステップへ、「-1」を渡せば前のステップへ移動します。最後のステップから先に進もうとした場合は、フォームを送信（submit）します。
  • checkForm()関数：現在のステップ内にあるすべての入力欄を確認し、空欄があれば背景色を赤系（#ffdddd）に変更してエラーを示します。すべての項目が正しく入力されていれば、そのステップのインジケータードットを緑色にして完了マークをつけます。
  • changeStepIndicator()関数：現在表示中のステップに対応するドットをハイライト（active状態）にし、ユーザーが今どの段階にいるのかをひと目で把握できるようにします。

このように、HTMLで各ステップのブロックを作成し、CSSで非表示・エラー表示・インジケーターの見た目を制御しながら、JavaScriptでステップの切り替えとバリデーションを管理することで、使いやすいマルチステップフォームが簡単に実装できます。

実行結果

上記のコードを実行すると、以下のように3つのステップ（氏名・連絡先・生年月日）を持つ登録フォームが表示されます。「Next」ボタンを押すと次のページへ進み、未入力の項目がある場合は入力欄が赤く表示されて先に進めなくなります。

JavaScriptで複数ステップのフォームを作成する方法｜入力チェック付きマルチステップフォームの実装例

  1. CSSでお問い合わせフォームを作成する方法を初心者向けに解説

    Webサイトにおけるお問い合わせフォームは、訪問者と運営者をつなぐ重要な窓口です。HTMLだけでフォームは作成できますが、CSSを組み合わせることで、見た目が整った洗練されたデザインに仕上げることができます。本記事では、CSSを使ってシンプルかつ実用的なお問い合わせフォームを作成する方法を、実際のコード例とともにわかりやすく解説します。お問い合わせフォームの完全なコード例以下は、CSSを使用してお問い合わせフォームを作成するサンプルコードです。そのままコピーしてHTMLファイルとして保存すれば、すぐに動作を確認できます。<!DOCTYPE html> <html> &l

  2. Excelのフォーム機能を使ってデータベースを簡単に作成する方法【手順解説】

    Excelでデータベースを作成したい場面は多くあります。従来のようにセルに一つずつ入力する代わりに、Excelにはデータ入力を効率化できる「フォーム」機能が用意されています。本記事では、フォームを使ってExcelでデータベースを作成する方法を、ステップバイステップでわかりやすく解説します。あわせて、フォーム操作に関する押さえておきたいポイントもご紹介します。 Excelのデータ入力フォームとは? 通常、Excelではセルに1件ずつデータを入力していきます。この方法では、特に大規模なデータベースを作成する際に入力作業が煩雑になりがちです。そんなときに活躍するのがデータ入力フォームです。フォームを