エラー付き入力欄

フォーム ／ パターン集トップ

どの欄が問題かを文字で示し、aria-invalidで支援技術にも伝える

プレビュー#

調整する#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<form class="form-error" action="#" method="post" novalidate>
  <div class="field field--error">
    <label for="email-err">メール</label>
    <input id="email-err" name="email" type="email" value="not-an-email"
      aria-invalid="true" aria-describedby="email-err-msg" autocomplete="email">
    <p class="field__error" id="email-err-msg" role="alert">@ を含む形式で入力してください</p>
  </div>
  <!-- 1欄だけを見せるための送信ボタン。ほかのフォームのパターンと重ねるときは消す -->
  <button class="button button--primary" type="submit">送信</button>
</form>

.form-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 32rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 700;
}
.field input {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  min-block-size: 2.75rem;
}
.field--error input {
  border-color: var(--color-danger);
  outline-color: var(--color-danger);
}
.field__error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}
/* .button の基底と派生は「出発点のCSS」にある */
.form-error .button {
  align-self: start;
}

確認する#

• エラー文が入力欄のすぐ下にある
• 色だけで状態を伝えていない
• aria-describedbyでエラー文と紐づいている
• この欄をほかのフォームへ持ち込むときは、付いてきた送信ボタンを消す

関連#

• フォームの検証
• フォームの検証
• 役割で色を持つ