readonly与disabled属性在css中区别

论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属性，这个需要看个人项目需求。