会員登録・問い合わせ・設定の変更のように、利用者に情報を入力してもらう画面の組み立て方です。部品は ラベルコントロール・インプット・セレクター・チェックボックス・ラジオ・テキストエリアなどをそのまま使い、このページでは並べ方・書き方・エラーの伝え方を決めます。

見本

何も入れずに「招待する」を押すと、エラーの出方を試せます（役割は安全な初期値「閲覧者」を選んであります）。エラーが 3 件以上のときは、フォームの上にまとめを出してそこへフォーカスを移します。

1 つの項目の構成

1 つの項目は、上から「ラベル（＋必須／任意のバッジ）→ 入力欄 → エラー → 補足」の順に縦に積みます。エラーと補足は入力欄の真下に置き、aria-describedby で入力欄と結びます（エラーが先）。

<div class="label-control">
  <div class="label-control-row">
    <label class="label-control-text" for="email">メールアドレス</label>
    <span class="label-badge label-badge-required">必須</span>
  </div>
</div>
<input type="email" class="input input-md input-error" id="email" required autocomplete="email"
       aria-invalid="true" aria-describedby="email-err email-help" />
<p class="field-error-text" id="email-err">＊メールアドレスの形式で入力してください</p>
<p class="field-support-text" id="email-help">招待メールをこのアドレスに送ります</p>

レイアウト

• 項目は縦に 1 列で積む（項目の間は 24px）。高さを詰めるために 2 列に並べない。上から順に読み、入力し、見落とさない
• 入力欄の幅は、入る値の長さに合わせる。郵便番号・数量のような短い値は短く、住所やメッセージは広く。全部を画面いっぱいにしない（長文の行は読みにくい）。フォーム全体の幅は 448px ほどまで
• 関連する項目はまとめる。ラジオ・チェックボックスの組や「住所」のようなまとまりは fieldset ＋ legend で囲み、まとまりの名前を読み上げさせる
• 選んだ内容で出る項目は、その選択肢の直下に出す（「その他」を選んだら、その下に入力欄）。離れた場所に出すと気づかれない

ラベル・補足・必須／任意

• ラベルは短い名詞（「メールアドレス」「役割」）。文章や「〜してください」にしない。説明が要るなら補足に書く
• プレースホルダーをラベルの代わりにしない。入力すると消え、色も薄くて読みにくい。入力例もプレースホルダーでなく補足に書く
• 補足は新しい情報だけ（何に使うか・形式・上限）。ラベルの言い換えは書かない。エラーが出ても補足は消さない
• 必須と任意はどちらもバッジで示す（label-badge-required / label-badge-optional）。必須の入力欄には required も付ける。色や「*」だけで示さない

部品の選び方

何を入れてもらうかで部品を決めます。見た目の好みで選ばないでください。1 つ選ぶ項目は、安全な初期値を選んでおきます。迷ったら、取り返しがつき影響の小さい選択肢にします（権限なら最小の「閲覧者」、通知なら控えめな方）。初期値を決められない項目（所属など）だけ「選択してください」から始め、選ばずに送れないようにします。

ボタン

• 送信ボタンはフォームの最後に 1 つ（btn-primary btn-solid）。文言は「送信」でなく、何が起きるか（「招待する」「保存する」）にする
• ページのフォームは最後の項目の直下・左端にそろえる。入力を終えた視線の先に置く。カードやモーダルの中のフォームは、それぞれの footer（右寄せ）に置く
• 取り消し（キャンセル・戻る）は主操作の隣に neutral の outline / ghost で置く。主操作を 2 つにしない
• 未入力でも送信ボタンを disabled にしない。押せない理由が分からないため。押したときにエラーで理由を伝える。送信中は data-loading で二重送信を防ぐ

検証とエラー

• 検証するのは「送信したとき」と「入力を終えたとき」（その欄からフォーカスが外れたとき）。入力している途中には検証しない（打ち終わる前にエラーが出る）。一度エラーが出た欄は、直したらその場で消す
• エラーは入力欄の真下に、何が違うか・どう直すかを書く（「メールアドレスの形式で入力してください（例: yamada@example.com）」）。「入力エラー」「不正な値です」だけにしない
• 入力欄には input-error と aria-invalid="true"、エラー文は aria-describedby で結ぶ。ラジオ・チェックボックスの組はまとまり（fieldset）に 1 つだけ出す
• 送信してエラーが 1〜2 件なら、最初のエラーの入力欄へフォーカスを移す。3 件以上ならフォームの上に アラート（negative）でまとめを出し、各項目へのリンクを並べてまとめへフォーカスを移す
• 送信の結果（送りました／送れませんでした）は送信ボタンのすぐ横に インラインメッセージ で出す。時間で消えるトーストにしない（フィードバック）

使えない状態・読み込みに失敗したとき

• 変更できない値は disabled でなく、ふつうの文字で見せる（または readonly）。disabled は薄くて読みにくく、送信にも乗らない。変更できない理由があれば補足に書く（ラベルの label-badge-disabled「編集不可」）
• 送信に失敗しても、入力した内容を消さない。フォームはそのまま使える状態で残し、送信ボタンの横に失敗と次の手（もう一度・時間をおく）を出す
• 初期値の読み込みに失敗したら、空のフォームを出さずに理由を出す。一部の項目だけ読めないなら、その項目だけ使えない理由を示す

アクセシビリティ