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

Webページの作成では、フォームを使うことが多いですね。しかし、時には、フォーム上のコントロールを変更できないようにしたい場合があります。例えば、パスワードの変更ページでは、ユーザー名を表示するテキストボックスは変更できないようにする必要があります。
htmlで無効化する方法は2つあります。
1. controlタグにreadonly='readonly'属性を追加します。
2. コントロールラベルにdisabled='disabled' 属性を追加します。
例 

この例の2つのコントロールは、どちらも変更不可です。しかし、両者にはいくつかの違いがあります
文字通り、readonlyプロパティを持つコントロールはquot;read-only"、disabledプロパティを持つコントロールはquot;disabled"ということが分かっています。では、両者の違いは何でしょうか？
読み取り専用のコントロール（readonlyプロパティを使用するもの）とは、ユーザーがマウスやキーボードで値を変更することはできませんが、プログラマーがjavascriptで値を変更することは可能なものです。コントロールの名前と値は、フォームが送信されたときにサーバーに送信されるため、サーバーからは見えていることになります。
これが両者の違いです。この違いを理解した上で、どのタイミングでどの方法を使えばいいのかがわかるはずです。