input 属性の disabled と readonly の最大の違い「disabledは保存されないので注意！」

仕事でちょこちょこっとWebの入力画面を作っていて、ある項目を「管理者モードだと編集できるが、一般ユーザーモードだと閲覧しかできない」というようにしたかった。
属性の意味からすると、この場合設定すべき属性はまさに「readonly」なのだけど、readonlyは見た目が普通のinputと変わらないので、「入力できませんよ～」という表現性に乏しい。

なんかもう一つ同じような属性あったよな～、そうだそうだ「disable」。これにしておこう。

<input name=”aaa” type=”text” value=”hoge” disabled=”disabled” />

<input name=”aaa” type=”text” value=”fuga” readonly=”readonly” />

すると困ったことが起きた。保存したデータが壊れている。var_dump($_POST)してよくよく見ると、disableに設定したinputから何も受け取れずnullになっている。
そうか。disableにすると、フォームから情報の送信がされないのだ！

コレでは本末転倒なので、readonlyに切り替え、CSSで見た目を制御することにした。

<input style=”readonly” name=”aaa” type=”text” value=”fuga” readonly=”readonly” />

input.readonly{
       background-color:#c0c0c0;
       color:#666;
}

最初から横着せずにこうすればよかった。見た目を優先してHTML要素の選択を謝るなど、愚の骨頂である。現役時代は論理(html)と表現(css)の分離にあれほど邁進していたのに。