CSSフォームジェネレーター

ベースラインフォーム

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

4つの一般的なスタイル

フローティングラベルは最も美しく見えますが、空の状態を検出するには追加のマークアップまたはJavaScriptが必要です。枠線付き（アウトライン）方式が最も汎用的です。

アクセシビリティチェックリスト

• すべての入力項目に可視的なラベルを設ける。プレースホルダーのみをラベルとして使用することは避けてください、フォーカス時に消えてしまい、対比が損なわれます
• <label for>またはラップ形式の<label>。どちらも有効です。ラップ形式の方がやや簡単です。
• フォーカスインジケーター。交換部品なしのoutline: noneは絶対に使用しないでください。キーボードを使用するユーザーには必須です。
• エラーメッセージ：入力欄のaria-describedbyを参照してリンクしてください。エラーを示す際は色のみを使用せず、テキストメッセージまたはアイコンを併用してください。
• 必須フィールド：required属性を使用します。視覚障害のあるユーザー向けにラベルに視覚マーカー（アスタリスク）を追加してください。
• 入力タイプ：type="email"、type="tel"、type="url"、type="number" を使用してください。モバイルキーボードは対応しています。
• autocompleteの属性：autocomplete="email"、autocomplete="current-password"など。ユーザーの入力作業を大幅に削減します。

ネイティブの検証状態

CSSにはフォームの有効性を判定するための擬似クラスが用意されています：

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range（最小値・最大値付きの数値入力用）
• :placeholder-shown（空で、プレースホルダーが表示される）
• :user-invalid（無効であり、かつユーザーが操作を行った、エラースタイルに適した値）

:user-invalid疑似クラスは、ユーザーが操作を実行した後にのみエラーを表示する最もクリーンな方法であり、インタラクション前の赤い境界線を回避します。このサポートは2023年ごろすべての主要バージョンで提供されました。

無効状態

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

無効な入力項目はフォーカスしたり送信したりできません。スクリーンリーダー向けにフォーカス可能にする場合は、readonlyを使用してください、フォームでは値が送信されますが、ユーザーは編集できません。