HTML でフォームコントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更できないようにしたい場合もあります。たとえば、パスワード変更 Web ページでは、ユーザー名を表示するテキストボックスを変更できないようにする必要があります。

HTML で無効にする方法は 2 つあります。

1. コントロールタグにreadonly='readonly'属性を追加します。
2. コントロールタグにdisabled='disabled'属性を追加します。

例：

コードをコピー

コードは次のとおりです。

例のコントロールは両方とも編集できません。しかし、違いもいくつかあります。

文字通りの意味から、readonly 属性を持つコントロールは「読み取り専用」であり、disabled 属性を持つコントロールは「無効」であることがわかります。では、それらの違いは何でしょうか?

ユーザーは、マウスやキーボードを使用して読み取り専用コントロール (readonly 属性を使用するコントロール) の値を変更することはできませんが、プログラマーは JavaScript を使用して変更できます。フォームが送信されると、コントロールの名前と値がサーバーに送信され、サーバーに表示されるようになります。

無効なコントロール（disabled 属性を持つコントロール）は、ユーザーがマウスやキーボードで変更できず、サーバーからも見えません。つまり、フォームを送信しても、その名前と値はサーバーに送信されません。もちろん、プログラマーは JavaScript を使用して値を変更することもできます。

これがその違いです。違いを知った上で、どの方法をいつ使うべきかを知り、盲目になってはいけません。

<<: MySQL の削除に基づく構文エイリアスの問題

>>: Vue の基本リスナーの詳細な説明