【HTML】disabledとreadonlyの違い【922日目】

HTMLのformを使う

Formタグを使うときに、
送信をしたいものと、入力を途中までしてもらったけど、
送信をしてほしくないものとかがある。

<form>
  <div>名前</div>
  <input type="text" name="name">
  <div>ニックネーム</div>
  <input type="text" name="nick-name">
</form>

名前

ニックネーム

データを送信したくない

このとき、ユーザーが設定で名前を使わずにニックネームだけを使うことにした。
そして、名前の入力欄を入力してほしくないし、サーバーにも送信したくない。

disabledを使う

<form>
  <div>名前</div>
  <input type="text" name="name" disabled>
  <div>ニックネーム</div>
  <input type="text" name="nick-name">
</form>

名前

ニックネーム

入力欄が灰色になり、入力ができなくなった。

このとき、送信ボタンを押したとしても、nameのデータは送信されない。

入力だけされたくない

今度は、入力をさせたくはないが、サーバー側の仕様の都合、
データの書き換えだけ禁止したい。

readonly

<form>
  <div>名前</div>
  <input type="text" name="name" readonly>
  <div>ニックネーム</div>
  <input type="text" name="nick-name">
</form>

名前

ニックネーム

readonlyは、disabledと異なり、選択は出来るが入力が出来ないのがわかる。
そして、仮に送信ボタンを押したとしたら、データはそのまま送られる。

とはいえ改変はされる

とはいえ、これらはHTMLで入力を制限しているだけなので、
HTMLをブラウザの検証機能とかで書き換えられると、意味をなさないので、
あくまでユーザーの誤操作防ぎや、誘導に使うに止めよう。

改変できない！アタックされない！ではないので気をつけましょうφ(･･

そして、自分はどちらが必要かを考えて、適切に使い分けましょうφ(･･