disabledなフォーム要素はsubmitされない

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

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

disabledなフォーム要素

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

disabledなinputのあるフォーム

このページにGETするので送信するとアドレスバーのクエリ文字列で値を確認できます。おそらく{'?v1-1=value1&v1-2=value2'}になるはずです。

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

disabledなfieldset

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

2つ目の<fieldset>の中のv2-3とv2-4は送信されません。disabledな<fieldset>の中の値は送信されません。

disabledの使い所

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