【PHP】フォームでdisabled属性を指定するとデータの送信がされない

ユーザーにはいじってほしくない情報に、disabled属性を指定したら、データが送信されない。

ボタン操作でデータを入力して、画面上データは見せておきたいけど、ユーザーに値の変更はしてほしくないって時にdisabled属性を付与したら、データ自体取得できなくなってしまいました。

そこで、disabled属性の特徴とそれに代わるreadonly属性について記事にしたいと思います。

記事のポイント
  • disabled属性について理解できる
  • readonly属性について理解できる
目次

disable属性とは

disable属性は、HTML要素に対して使用される属性であり、その要素を無効化(非アクティブ化)するために利用されます。

この属性が設定された要素は、ユーザーとの対話ができなくなり、クリックやフォーカスなどのイベントを受け付けません。

通常、ボタンや入力フィールドなどのユーザーが操作する要素でよく使用されます。

disable属性を指定すると、POSTやGETでデータの送信も制御されてしまいます。

<button disabled>クリックできないボタン</button>

JavaScriptを使用して動的にdisable属性を設定することもあります。

例えば、以下のように

<button id="myButton">クリックできるボタン</button>

<script>
  // JavaScriptでdisabled属性を設定する
  const myButton = document.getElementById('myButton');
  myButton.disabled = true; // ボタンを無効化
</script>

このようにすると、ボタンが最初から無効化されている状態となります。

無効な要素は、視覚的にも一般的には灰色などで表示され、ユーザーがその要素に対して操作できないことが視覚的に示されます。

これを元に、inputタグに値が入力されたらボタンを有効化する

などの処理を実装することができます。

readonly属性とは

readonly属性もまた、HTML要素に使用される属性で、その要素を読み取り専用にするために利用されます。

この属性が設定された要素は、ユーザーが値を変更できなくなり、視覚的にも読み取り専用の状態を示します。

主にテキスト入力フィールドやテキストエリアなどに適用されます。

<input type="text" value="読み取り専用の値" readonly>

このようにすることで、ユーザーはこのテキスト入力フィールドの値を変更できず、表示されている値を読むことしかできません。

まとめ

今回私がやりたかった操作は、ボタンで時間を入力したら、その値を変更せずにPOSTさせることでした。

なので、ここで使用すべきは、readonly属性

readonly属性をつけた値は、無事にPOSTで処理できるようになりました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

文系大学を卒業→病院事務として就職→病院専属のSE
として勤務(現在)
病院SEとして、院内専用システムの構築やネットワーク管理、セキュリティなどIT周りを全て1人で対応しています。
業務の分野が広く、知識も幅広く習得していますが、現在は、ひとつひとつの知識を深堀して、よりITに強い人材になれるよう学習に励んでいます。

目次