disabledなフォーム要素はsubmitされない
公開 ( 更新) 履歴 (7)
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]を使うようにしています。