新規登録フォーム（利用規約同意付き）
この新規登録フォームは、お名前・メール・パスワード・パスワード確認の4項目に、利用規約への同意チェックを加えた構成です。パスワード欄には minlength="8" を設定し、同意チェックには required を付けているため、規約に同意しないままでは送信できません。
解説
この新規登録フォームは、お名前・メール・パスワード・パスワード確認の4項目に、利用規約への同意チェックを加えた構成です。パスワード欄には minlength="8" を設定し、同意チェックには required を付けているため、規約に同意しないままでは送信できません。これらはすべて HTML 属性で完結しており、JavaScript なしでも最低限の入力チェックが働きます。
こんなときに使う
- サービスのアカウント作成画面
- メルマガやコミュニティへの参加登録
- 無料トライアルの申し込み導線
登録フォームはログインより項目が多いため、縦の余白を詰めすぎないことが読みやすさの鍵です。CSS の gap でラベル間隔をまとめて調整できます。パスワード確認の一致判定や、強度メーターの表示をしたい場合は JavaScript を追加してください。規約リンクは別タブで開くようにし、同意チェックの当たり判定（クリックできる範囲）を <label> で広げておくと、スマートフォンでも押しやすく離脱を減らせます。
よくある質問
パスワードの一致チェックは入っていますか？
このスニペットは HTML 属性ベースのため、2つのパスワード欄が一致しているかまでは自動判定しません。一致確認や強度表示が必要な場合は、入力イベントで比較する短い JavaScript を追加してください。
入力項目を増やしたり減らしたりできますか？
できます。label と input のセットをコピーまたは削除するだけで項目を調整できます。flex の縦並びなので、増減してもレイアウトは自動で整います。