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)の分離にあれほど邁進していたのに。
初めまして。
両方の 属性の意味がよく分かりました。
ありがとうございます!