インターフェース コア A1 · 公式標準

Form Validation

フォームの検証

フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。

例を試してみる
そう呼ぶかもしれません Form Validation入力検証インラインエラー

例を試してみる

プレビュー

フォームの検証

01

フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。

aria-invalid + server validation
フォームの検証form-validation

実際の例

パスワードがルールに違反している場合、ページはフィールドの横に説明を表示します。スクリーンリーダーはそのメッセージを該当フィールドに関連付けることができます。

主な部分

  1. 01State signal
  2. 02Human-readable message
  3. 03Timing or progress
  4. 04Recovery path

以下の場合に使用します

有用になった時点でヘルプを表示し、必ずサーバーで再確認する

以下の場合は使用しないでください

回答を消したり、人を非難したり、「無効」とだけ言ったりしてはいけません。問題を解決する方法を説明してください。

コードで使用する名前

aria-invalid + server validation

出荷前に

Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.

コピーできるリクエスト

Outcome:Complete the task with フォームの検証 (Form Validation)。 User context:パスワードがルールに違反している場合、ページはフィールドの横に説明を表示します。スクリーンリーダーはそのメッセージを該当フィールドに関連付けることができます。 Recommended pattern:フォームの検証 (Form Validation)。 Why it fits:有用になった時点でヘルプを表示し、必ずサーバーで再確認する。 Do not use it when:回答を消したり、人を非難したり、「無効」とだけ言ったりしてはいけません。問題を解決する方法を説明してください。 Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary):この標準は、列挙された範囲のみを対象とします。視覚スタイル、製品の判断、またはVibularyの例は選びません。 Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.

このリクエストを確認する

Review how フォームの検証 (Form Validation) is used now. Definition: フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。 Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.

A1
この用語はどれくらい公式か?

公式標準

名前のついた基準が、このページで説明されているルールを決めているよ。

この標準は、列挙された範囲のみを対象とします。視覚スタイル、製品の判断、またはVibularyの例は選びません。

範囲
ソースがカバーするもののみ:正式名、定義、セマンティクス、実装、相互作用、キーボードの動作、アクセシビリティ
ドキュメントステータス
生活基準
チェックオン
2026-07-30

証拠の情報源と範囲

権威のある情報源 + 用語参照 · WHATWG · 生活基準 HTML Living Standard — The constraint validation API The constraint validation API 範囲: 正式名、定義、セマンティクス、実装 ここでの役割: 直接用語参照 ソースの範囲: 正式名, 定義, セマンティクス, 実装 権威のある情報源 · WHATWG · 生活基準 HTML Living Standard 範囲: 正式名、定義、セマンティクス、実装 ここでの役割: 指定された範囲内の権威 ソースの範囲: 正式名, 定義, セマンティクス, 実装 権威のある情報源 · W3C WAI · 安定 Forms Tutorial 範囲: 正式名、定義、相互作用、キーボードの動作、アクセシビリティ ここでの役割: 指定された範囲内の権威 ソースの範囲: 正式名, 定義, 相互作用, キーボードの動作, アクセシビリティ

自分でコピーする

ブラウザはこれをコピーできませんでした。下のリクエストを選択して自分でコピーしてください。