入力フォーム用ステップ式タブを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

タブ切り替え
2025.10.07

入力フォーム用ステップ式タブを作る方法

HTML・CSS・JavaScriptを使って、入力フォームをステップごとに切り替えながら進められるタブを作る方法を紹介します。氏名やメールアドレス、確認画面などを段階的に表示できるため、一度に大量の入力項目を見せずに分かりやすいフォームを実装できます。会員登録やお問い合わせフォーム、申し込み画面など幅広い用途で利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

入力フォーム用ステップ式タブ

入力内容をステップごとに分けて表示できます。

入力内容を確認するステップです。実際のフォームでは、送信前の確認画面として利用できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>入力フォーム用ステップ式タブ</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ステップ式フォーム全体を囲むエリア -->
  <div class="step-form-tab-switch_wrap">

    <!-- タイトル -->
    <div class="step-form-tab-switch_title">
      入力フォーム用ステップ式タブ
    </div>

    <!-- 説明文 -->
    <p class="step-form-tab-switch_text">
      入力内容をステップごとに分けて表示できます。
    </p>

    <!-- ステップタブ一覧 -->
    <div class="step-form-tab-switch_tabs">

      <button class="step-form-tab-switch_tab is-active" type="button" data-step-tab="step1">
        1. 基本情報
      </button>

      <button class="step-form-tab-switch_tab" type="button" data-step-tab="step2">
        2. 詳細入力
      </button>

      <button class="step-form-tab-switch_tab" type="button" data-step-tab="step3">
        3. 確認
      </button>

    </div>

    <!-- 基本情報ステップ -->
    <div class="step-form-tab-switch_panel is-active" data-step-panel="step1">

      <label class="step-form-tab-switch_label" for="step-form-name">
        お名前
      </label>

      <input
        class="step-form-tab-switch_input"
        id="step-form-name"
        type="text"
        placeholder="山田 太郎">

      <div class="step-form-tab-switch_buttons">

        <span></span>

        <button class="step-form-tab-switch_button" type="button" data-next-step="step2">
          次へ
        </button>

      </div>

    </div>

    <!-- 詳細入力ステップ -->
    <div class="step-form-tab-switch_panel" data-step-panel="step2">

      <label class="step-form-tab-switch_label" for="step-form-message">
        お問い合わせ内容
      </label>

      <textarea
        class="step-form-tab-switch_textarea"
        id="step-form-message"
        placeholder="お問い合わせ内容を入力してください"></textarea>

      <div class="step-form-tab-switch_buttons">

        <button class="step-form-tab-switch_button is-back" type="button" data-next-step="step1">
          戻る
        </button>

        <button class="step-form-tab-switch_button" type="button" data-next-step="step3">
          次へ
        </button>

      </div>

    </div>

    <!-- 確認ステップ -->
    <div class="step-form-tab-switch_panel" data-step-panel="step3">

      <p>
        入力内容を確認するステップです。実際のフォームでは、送信前の確認画面として利用できます。
      </p>

      <div class="step-form-tab-switch_buttons">

        <button class="step-form-tab-switch_button is-back" type="button" data-next-step="step2">
          戻る
        </button>

        <button class="step-form-tab-switch_button" type="button">
          送信する
        </button>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、入力フォーム用ステップ式タブを確認できます。「次へ」「戻る」ボタンやステップタブをクリックすると、入力画面を段階的に切り替えられます。

コメント