ユーザーにはいじってほしくない情報に、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で処理できるようになりました。