サイト制作
HTMLのreadonlyとdisabledの違い 送信される値と操作を確認
2026-11-02
この記事には広告・アフィリエイトリンクが含まれます。
readonlyは対応する入力欄を編集不可にしても、通常のフォーム送信では値を残せます。disabledは無効化されたコントロールを送信対象から外します。見た目だけで使い分けないことが大切です。
大きな違いは、送信対象に残るかどうか
HTMLの入力欄を変更できなくしたいとき、readonlyとdisabledは同じ意味ではありません。readonlyは対応する欄を読み取り専用にし、disabledはコントロールを無効化します。
通常のHTMLフォーム送信では、disabledの値は送信されません。一方、readonlyの欄は、nameなど他の送信条件を満たしていれば値が送られます。画面に表示されていても、サーバーに届くとは限らないんですね。
フォーカスと対応する要素も違う
readonlyの入力欄は通常フォーカスを受け取り、内容を選択してコピーできます。disabledの欄は通常フォーカスを受け取りません。
ただしreadonlyが使えるのは、テキスト系のinputやtextareaなど、対応する要素・入力型です。select、チェックボックス、ボタンに付けても同じ読み取り専用の挙動にはなりません。対象の要素を先に確認しましょう。
CSSで灰色にするだけでは、どちらの属性の働きも再現できません。操作できない理由があるなら、近くに短い説明も添えると状況を伝えやすくなります。
会員番号を見せる例で考える
たとえば確認画面で、会員番号を表示してコピーできるようにし、通常のフォームにも含めたい場合は、対応するテキスト入力のreadonlyが候補です。一方、条件がそろうまで使わせない選択欄ならdisabledを検討します。
これは画面の操作方法の話です。属性はブラウザー側で変更できるため、編集不可の表示を、値の正しさの保証として扱ってはいけません。サーバー側で必要な値の検証や権限確認を行う前提で設計します。
見た目ではなく、送信結果まで確認する
確認用のフォームでは、通常・readonly・disabledの三つのテキスト欄に異なるnameを付け、同じ値を入れて送信すると差を追いやすくなります。テスト用の値を使い、送信内容にどのnameが含まれたかを確認してください。
JavaScriptで独自に送信データを組み立てる実装は、HTML標準の送信と異なる結果になる場合があります。Tabキーで移動できるか、コピーできるか、送信値が残るかを、実装した方式で確かめるところまでが使い分けです。
