論readonly與disabled在css中區別

之前在項目中遇到的一個問題，現在想把它記錄下來。
當項目需求上需要在文本框中禁用輸入某個值的時候，我第一個反應是用了disabled，因為之前一直接觸的都是disabled。但當我需要提交FROM表單的時候，發現文本框的值根本不能提交過去，這個時候我就覺得很奇怪了，為什么使用disabled這個屬性的值不會提交呢？后來經過詢問與了解，便知道，還有另外一個在文本框，文本域中顯示只讀模式的屬性元素readonly。
如圖使示：

disabled屬性在網頁中顯示出來是這個效果：

readonly屬性在網頁中顯示出來則是這個效果：

個人認為在樣式上disabled屬性比readonly屬性更為可觀，但你需要后臺獲取值的時候，readonly屬性就可以發揮它的作用，這是在功能上比disabled更勝一籌的。如果設置了disabled屬性，在后臺是獲取不到登錄名的值的。但你不需要傳值的時候，disabled屬性就比readonly屬性的范圍更廣，但readonly屬性只對< input >和< textarea> 標簽有效，disabled屬性< textarea>,< input>,< label>,< option>,< select> ，< button>, 等等標簽都有效，沒有readonly屬性局限的多。
使用disabled即使在頁面上不能改變值，但還有一種方法，即是通過JavaScript，可以通過給value賦值來改變值。
disabled與readonly雖然都能夠做到在輸入框中不能更改內容，但還是有基本的區別的，如果需要讓值進行提交還是要用readonly屬性，這個需要看個人項目需求。