読み取り専用と無効の微妙な違いの詳細な説明

「読み取り専用」と「無効」はどちらも、ユーザーがフォームフィールドの内容を変更できないようにします。しかし、それらの間には微妙な違いがあり、次のようにまとめられます。

Readonly は入力 (テキスト / パスワード) とテキストエリアにのみ有効ですが、disabled はすべてのフォーム要素に有効です。ただし、フォーム要素が無効にされた後、POST または GET 経由でフォームを送信すると、この要素の値は渡されませんが、readonly は値を渡します (readonly は値の変更を受け入れ、送り返すことができますが、disable は変更を受け入れますが、データを送り返しません)。

より一般的な状況は次のとおりです。

フォームでは、ユーザー固有の識別コードが事前に入力されており、ユーザーはそれを変更できません。ただし、送信時に値を渡す必要があります。この場合、その属性を readonly に設定する必要があります。

ユーザーが正式にフォームを送信した後、管理者が情報を確認するまで待つ必要があることがよくあります。これにより、ユーザーはフォーム内のデータを変更できず、表示のみが可能になります。disabled にはさまざまな要素があるため、このときに使用する必要があります。ただし、送信ボタンも無効にする必要があることに注意してください。そうしないと、ユーザーがこのボタンを押した限り、データベース操作ページで整合性チェックが実行されないと、データベース内の値がクリアされます。この場合、無効ではなく読み取り専用を使用すると、フォームに入力 (テキスト/パスワード) とテキストエリア要素のみがある場合は問題ありません。選択などの他の要素がある場合は、ユーザーは値を書き換えて Enter キーを押して送信できます (Enter はデフォルトの送信トリガーキーです)。

多くの場合、JavaScript を使用して、ユーザーが送信ボタンを押した後にそのボタンを無効にすることがあります。これにより、ネットワーク状態が悪い環境でユーザーが送信ボタンを繰り返しクリックして、データベースにデータが重複して保存されることを防ぐことができます。

disabled 属性と readonly 属性にはいくつかの類似点があります。たとえば、両方を true に設定すると、フォーム属性は編集できなくなります。js コードを書くときに、これら 2 つの属性を混在させるのはよくあることです。実際、これら 2 つの属性にはいくつかの違いがあります。

入力項目の disabled が true に設定されている場合、フォーム入力項目はフォーカスを取得できず、入力項目に対するすべてのユーザー操作 (マウスクリックやキーボード入力など) が無効になります。最も重要な点は、フォームが送信されたときに、フォーム入力項目が送信されないことです。
Readonly は、テキストを入力できるテキスト入力ボックスなどの入力項目にのみ適用されます。true に設定すると、ユーザーは対応するテキストを編集できなくなりますが、そのテキストにフォーカスすることはできます。また、フォームを送信すると、入力項目がフォームの項目として送信されます。

<<: jQueryはすべてのショッピングカート機能を実装します

>>: MySQL の null 制約のケースの説明