今回の仕上がり
表示しておきたい値をdisabledで編集不可にすると、FormDataからその値が抜けることがあります。readonlyとdisabledは、どちらも利用者による編集を止めますが、フォームのデータを組み立てるときの扱いが違います。
文字列の入力欄を3つ並べ、通常欄に「星」、readonly欄に「月」、disabled欄に「雲」を設定しました。下の例は外部送信せず、ブラウザ内で組み立てた値だけを表示します。
3つの入力欄を試す
- 通常欄をクリックすると文字を編集できます。readonly欄とdisabled欄は編集できません。
- 「含まれる値を表示」を押します。変更していない場合、normalは星、readonlyは月と表示され、disabledの項目はありません。
- 通常欄へフォーカスを置いてTabを押すとreadonly欄へ進みます。次のTabではdisabled欄を飛ばしてボタンへ移ります。
<input name="normal" value="星">
<input name="readonly" value="月" readonly>
<input name="disabled" value="雲" disabled>
const values = new FormData(form);nameはデータの項目名です。この比較では3欄ともnameを付け、属性の違いだけを調べています。実験用のsubmit処理ではpreventDefault()で送信を止めています。コード全体はZIPのexample.htmlで確認できます。
使い分けと注意点
MDNのreadonlyの説明でも、readonlyはフォーカス可能でフォームのデータに含まれる一方、disabledは含まれないと案内されています。値を表示したままフォームへ含めたい文字入力では、どちらの動作が必要かを確かめて選びます。
readonlyはselectやcheckboxなど、すべての部品で使える属性ではありません。また、どちらの属性もサーバー側の権限や入力検証の代わりにはなりません。利用者が変更できないはずの値でも、サーバーでは受け取った値の妥当性を確認する必要があります。
2026年10月21日、隔離したEdgeでPC・375px幅と明暗、Tab移動を確認しました。スマホ実機・スクリーンリーダー・実送信は未確認です。最近のX投稿は取得できず、話題性は確認していません。HTML・CSS・JavaScriptは編集部の自作・CC0です。ボタンのtype指定と数値の空欄と0は別の実験で確認できます。