disabledとreadonlyは何が違う？編集できない入力欄とフォームデータを比べよう

入力欄を変更できなくしたいとき、disabledとreadonlyは似て見えるよね。でも、操作やフォームデータに含まれるかどうかが違うよ。架空の入力欄で比べてみよう。

このページでは、対応するテキスト入力を使って違いを知る。実際のフォームを送信せず、ブラウザ内で作ったデータだけを確認するよ。

読み取り専用と無効の違い

<input name="reference" value="A-100" readonly>
<input name="inactive" value="B-200" disabled>

readonlyはすべてのフォーム部品で使えるわけではない。今回の例はテキスト入力。selectやチェックボックスへ同じ属性を付ければ同じ意味になる、とは考えないでね。

作例でデータを組み立てる

1. readonly側の文字を選べるか試す。
2. キーボードのTabで、どの欄へ移動するか確認する。
3. 「データを確認」を押す。
4. referenceは出力に入り、inactiveは入らないことを見る。
5. 「通常の入力へ戻す」を押し、両方が編集できる状態で比べる。

最初へ戻すボタンで、値と属性を初期状態へ戻せる。作例はFormDataで内容を読むだけで、外部へは送らないよ。

サーバー側の保護にはならない

変更できない見た目でも、開発者ツールなどで値や属性を変えられる。価格・権限・本人のIDなどを信用する根拠として使わず、サーバー側で正しい値を決めて検証しよう。

仕様はreadonlyとdisabledのリファレンスを確認してね。入力欄の名前は、labelの基礎でも試せるよ。