HTML FORM BEHAVIOR LAB

Form State Matrix

「編集できない」と「送信しない」は、同じではありません。

NATIVE HTML

LIVE FORM

同じフォーム、違う状態

4 FIELDS

account.example/settings

NORMAL 表示名通常の入力欄 SEND DISABLED 利用プラン編集・フォーカス不可 STOP READONLY アカウントID選択・コピーは可能 SEND ARIA-DISABLED 承認コード宣言だけでは編集できる SEND

disabledの値をhiddenで補うONでplanをPayloadへ追加

INTERACTION

aria-disabledは状態の宣言だけ。値を書き換えて確認できます。

LIVE FORMDATA

送られる値を確認

3 entries

NORMAL

DISABLED×

READONLY

ARIA

FORM DATAREADY

POST/accountLIVE

KEY POINT

disabledだけが送信データに入りません。

DISABLEDOMITTED

READONLYINCLUDED

ARIA ONLYINCLUDED

BEHAVIOR MATRIX

4つの違いを並べる

SAME “LOCKED” LOOK?

STATE実際の挙動

編集

フォーカス

フォーム送信

制約検証

disabledHTMLの機能

×できない

×Tabから外れる

×値を除外

×対象外

readonlyテキスト系のみ

×できない

○できる

○値を含む

×対象外

aria-disabled宣言だけの場合

○止まらない

○値を含む

○通常どおり

ARIAは機能を変えません。操作を止める場合は、挙動と見た目も別途実装します。

HTML RECIPE