Reactだとたいていの<form>でsubmitをpreventDefaultするので意識しないのですが、Next.jsはAPI Routesがあるので<form>のactionでそこに繋ぐことがあります。

このときユーザーに操作させない要素をdisabledにすることがあるのですが、操作を無効にする以外のdisabled属性の作用についてよく知らなかったのでその実験をしました。

disabledなフォーム要素 #link

<input>の値を保護しようとしてdisabledを設定すると、値が足らずサーバーがBadRequestを返すようになりました。足りていない値を確認するとdisabledを設定した要素のvalueでした。

いつもfetchで送っていたので気がつかなかったのですが、disabledな要素の値はフォームの送信に含まれません。

disabledなfieldset #link

フォームの要素は<fieldset>でグループにできます。この<fieldset>にはdisabledが指定できます。先の結果から予想するとdisabledにするとそのグループの値は送信されないでしょう。確認してみます。

3つ目の<fieldset>の中のv2-5とv2-6は送信されません。disabledな<fieldset>の中の値は送信されません。readonlyは送信されます。

disabledの使い所 #link

例えば「Q2で いいえ と答えた方は入力してください」のように文脈で無効である場合にはdisabledを使い、送信中の値の保護であればreadonly^[1]を使うようにしています。