フォーム入力
ステップフォーム
3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。
プレビュー
入力
操作実際に入力して試せます。
コード（コピーして使えます）
<div class="ms-wrap">
<div class="ms-progress" aria-label="進捗">
<div class="ms-step-dot active" id="ms-dot-0" aria-label="ステップ1">1</div>
<div class="ms-line" id="ms-line-0"></div>
<div class="ms-step-dot" id="ms-dot-1" aria-label="ステップ2">2</div>
<div class="ms-line" id="ms-line-1"></div>
<div class="ms-step-dot" id="ms-dot-2" aria-label="ステップ3">3</div>
</div>
<div class="ms-step-label" id="ms-step-label">ステップ 1 / 3：基本情報</div>
<div class="ms-panel" id="ms-panel-0">
<div class="ms-field">
<label class="ms-label" for="ms-name">お名前 <span class="ms-req">*</span></label>
<input id="ms-name" class="ms-input" type="text" placeholder="山田 太郎" />
</div>
<div class="ms-field">
<label class="ms-label" for="ms-email">メール <span class="ms-req">*</span></label>
<input id="ms-email" class="ms-input" type="email" placeholder="taro@example.com" />
</div>
</div>
<div class="ms-panel" id="ms-panel-1" hidden>
<div class="ms-field">
<label class="ms-label" for="ms-zip">郵便番号 <span class="ms-req">*</span></label>
<input id="ms-zip" class="ms-input" type="text" placeholder="123-4567" inputmode="numeric" />
</div>
<div class="ms-field">
<label class="ms-label" for="ms-addr">住所 <span class="ms-req">*</span></label>
<input id="ms-addr" class="ms-input" type="text" placeholder="東京都渋谷区…" />
</div>
</div>
<div class="ms-panel" id="ms-panel-2" hidden>
<p class="ms-confirm-title">入力内容の確認</p>
<dl class="ms-confirm" id="ms-confirm"></dl>
</div>
<p class="ms-err" id="ms-err" hidden>必須項目を入力してください</p>
<div class="ms-actions">
<button class="ms-btn ms-back" id="ms-back" type="button" hidden>戻る</button>
<button class="ms-btn ms-next" id="ms-next" type="button">次へ</button>
</div>
</div>