以下は、Bootstrapのフォームコントロールで完全に構築されたサンプルフォーム。必要な各フォームグループには、フォームを完了せずに送信しようとすると切り替わる検証状態がついている。
.container {
max-width: 960px;
}
.icon-link > .bi {
width: .75em;
height: .75em;
}
※これを checkout.css として保存する。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>精算フォーム</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB">
//CSSの設定など
<!-- CSSの設定ファイル -->
<link rel="stylesheet" href="checkout.css">
</head>
<body class="bg-body-tertiary">
<div class="container">
<main>
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="../images/bootstrap-logo.svg" alt="" width="72" height="57" loading="lazy">
<h1 class="h2">精算フォーム</h1>
<p class="lead">以下は、Bootstrapのフォームコントロールで完全に構築されたサンプルフォーム。必要な各フォームグループには、フォームを完了せずに送信しようとすると切り替わる検証状態がついている。</p>
</div>
<div class="row g-5">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-primary">カート</span>
<span class="badge bg-primary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">商品名</h6>
<small class="text-body-secondary">簡単な説明</small>
</div>
<span class="text-body-secondary">￥12000</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">2番目の商品</h6>
<small class="text-body-secondary">簡単な説明</small>
</div>
<span class="text-body-secondary">￥8000</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">3番目の商品</h6>
<small class="text-body-secondary">簡単な説明</small>
</div>
<span class="text-body-secondary">￥5000</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
<h6 class="my-0">プロモーションコード</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">−￥5000</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>合計 (円)</span>
<strong>￥20000</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="プロモーションコード">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">適用</button>
</div>
</div>
</form>
</div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">請求先住所</h4>
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="familyName" class="form-label">姓</label>
<input type="text" class="form-control" id="familyName" placeholder="" value="" required>
<div class="invalid-feedback">
名字を入力してください
</div>
</div>
<div class="col-sm-6">
<label for="givenName" class="form-label">名</label>
<input type="text" class="form-control" id="givenName" placeholder="" value="" required>
<div class="invalid-feedback">
名前を入力してください
</div>
</div>
<div class="col-12">
<label for="username" class="form-label">ユーザーネーム</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="ユーザーネーム" required>
<div class="invalid-feedback">
ユーザー名が必要です
</div>
</div>
</div>
<div class="col-12">
<label for="email" class="form-label">Eメール <span class="text-body-secondary">(任意)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
配送の更新に有効なメールアドレスを入力してください
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">住所</label>
<input type="text" class="form-control" id="address" placeholder="地番" required>
<div class="invalid-feedback">
配送先住所を入力してください
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label">住所 2 <span class="text-body-secondary">(任意)</span></label>
<input type="text" class="form-control" id="address2" placeholder="アパート・マンション名">
</div>
<div class="col-md-5">
<label for="pref" class="form-label">都道府県</label>
<select class="form-select d-block w-100" id="pref" required>
<option>選択...</option>
<option>北海道</option>
</select>
<div class="invalid-feedback">
都道府県を選択してください
</div>
</div>
<div class="col-md-4">
<label for="city" class="form-label">市町村</label>
<select class="form-select d-block w-100" id="city" required>
<option>選択...</option>
<option>札幌市</option>
</select>
<div class="invalid-feedback">
市町村を選択してください
</div>
</div>
<div class="col-md-3">
<label for="zip" class="form-label">郵便番号</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
郵便番号を入力してください
</div>
</div>
</div>
<hr class="my-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="addressCheck">
<label class="form-check-label" for="addressCheck">配送先住所は、請求先住所と同じです</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="keepCheck">
<label class="form-check-label" for="keepCheck">次回のために、この情報を保存する</label>
</div>
<hr class="my-4">
<h4 class="mb-3">お支払い方法</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">クレジットカード</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">デビットカード</label>
</div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">カードの名義</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-body-secondary">カード上に表示されているフルネーム</small>
<div class="invalid-feedback">
カードの名義を入力してください
</div>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">クレジットカード番号</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
クレジットカード番号を入力してください
</div>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">有効期限</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
有効期限を入力してください
</div>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
セキュリティコードを入力してください
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">精算を続ける</button>
</form>
</div>
</div>
</main>
<footer class="my-5 pt-5 text-body-secondary text-center text-small">
<p class="mb-1">© 2017−2024 会社名</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">プライバシー</a></li>
<li class="list-inline-item"><a href="#">条項</a></li>
<li class="list-inline-item"><a href="#">サポート</a></li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
//JavaScriptプラグインの設定など
<!-- JSの設定ファイル -->
<script src="checkout.js"></script>
</body>
</html>
// 無効なフィールドがある場合にフォーム送信を無効にするスターターJavaScriptの例
(() => {
'use strict';
// Bootstrapカスタム検証スタイルを適用してすべてのフォームを取得
const forms = document.querySelectorAll('.needs-validation');
// ループして帰順を防ぐ
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false)
})
})()
※これを checkout.js として保存する。