会員登録フォームの設計：入力しやすさとサーバー側の責任

会員登録フォームは、見た目を整えるだけでは完成しません。入力項目を分かりやすく示し、ブラウザ側の補助とサーバー側の検証を分けて設計する必要があります。ここではHTMLの基本構造と、実際の会員登録へつなぐ際の確認点を整理します。

2026年10月8日改訂。ラベルと入力欄の対応、確認用パスワードの項目名、入力補完を修正しました。旧記事の未公開の連載予定は取り下げ、このページ単独で扱う範囲を明確にしました。

必要な項目から設計する

この例では、メールアドレス・パスワード・確認用パスワードを入力します。氏名や住所などは、サービスで必要になる理由がある場合に追加します。

labelのforと入力欄のidを一致させると、項目名と入力欄の関係が明確になります。nameはサーバーへ送る項目名です。パスワードと確認欄には、異なるnameを付けます。MDNのフォーム入門で、この構造を確認できます。

HTMLの例

以下は実装用のコード例であり、このブログ上で会員情報を送信するフォームではありません。/registerは別途実装する登録処理のURLです。POSTで送るだけでは暗号化されないため、実運用ではHTTPSが必要です。

<form class="registration-form" action="/register" method="post">
  <h2>会員登録</h2>

  <label for="email">メールアドレス</label>
  <input id="email" name="email" type="email"
         autocomplete="email" required>

  <label for="password">パスワード</label>
  <input id="password" name="password" type="password"
         autocomplete="new-password"
         aria-describedby="password-help" required>
  <p id="password-help">このサービスのパスワード要件を表示します。</p>

  <label for="password-confirmation">パスワード（確認）</label>
  <input id="password-confirmation" name="password_confirmation"
         type="password" autocomplete="new-password" required>

  <button type="submit">会員登録する</button>
</form>

requiredやtype="email"はブラウザの入力補助です。リクエストはブラウザの制約を通さずに送ることもできるため、サーバー側で同じ条件を検証します。確認欄との一致やサービス固有のパスワード要件も、このHTMLだけでは検証されません。

CSSの例

幅を固定せず、スマートフォンでも入力できる構成にします。次のクラス名は上のフォームに対応します。

.registration-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.5rem;
  color: #171717;
  background: #fff;
  border: 1px solid #d4d4d4;
}
.registration-form label {
  display: block;
  margin: 1.2rem 0 .4rem;
  font-weight: 600;
}
.registration-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem;
  font: inherit;
  border: 1px solid #767676;
  border-radius: .2rem;
}
.registration-form input:focus-visible,
.registration-form button:focus-visible {
  outline: 3px solid #171717;
  outline-offset: 3px;
}
.registration-form button {
  width: 100%;
  min-height: 2.75rem;
  margin-top: 1.5rem;
  padding: .75rem;
  font: inherit;
  color: #fff;
  background: #171717;
  border: 0;
  cursor: pointer;
}

プレースホルダーだけを項目名にせず、ラベルを常に表示します。エラー時は色だけで区別せず、「何をどう直すか」を文章で伝え、該当する入力欄と関連付けます。

サーバー側で実装すること

これらはHTML/CSSの範囲を超える実装です。OWASPの認証ガイドとパスワード保存ガイドを参照し、採用するフレームワークの標準機能を利用します。

実装後は、キーボードだけで操作できるか、入力エラーを修正できるか、パスワード管理ツールが使えるかも確認してください。