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

公開 ( 更新)履歴 (7)

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

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

disabledなフォーム要素 #link

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

disabledなinputのあるフォーム

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

現在のクエリ文字列: なし

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

disabledなfieldset #link

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

disabledなfieldsetのあるフォーム

このページにGETするので送信するとアドレスバーのクエリ文字列で値を確認できます。

現在のクエリ文字列: なし

<fieldset>
<fieldset readonly>
<fieldset disabled>

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

disabledの使い所 #link

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