1. 背景介绍
在html中，input标签是一个常用的表单元素，且input标签有多个属性可以用来定义输入框。其中，readonly和disable属性常常被用来控制输入框的只读和禁用状态。
2. readonly和disabled的区别
在实际应用中，readonly和disabled两个属性的表现会有所不同，使用的场景也不尽相同。接下来，我们分别从功能、外观和交互三个方面进行比较。
2.1 功能比较
readonly: 表示输入框只读，输入框内容不可编辑，默认可选中内容，可获取焦点。但是，在表单提交时，输入框的值会被提交。
input[type='text'][readonly] {
background-color: #eee;
}
disabled: 表示输入框禁用，输入框内容不可编辑，表单提交时输入框的值不会被提交。同时，输入框不可选中内容和获取焦点，失去焦点。
input[type='text'][disabled] {
background-color: #ddd;
}
2.2 外观比较
通过CSS可以很容易地自定义input标签的外观，因此readonly和disabled属性并不会对CSS造成什么影响。但是，在使用readonly属性时，输入框的文字会变成灰色，背景色也会变成浅灰色；而在使用disabled属性时，输入框的文字和背景色都会变成灰色。
2.3 交互比较
在实际应用中，readonly和disabled属性有不同的使用场景。readonly常常被用来限制用户对某些重要信息的修改，但是用户通过复制粘贴等方式可以绕过这个限制。而disabled常常被用来控制表单提交时的数据，同时禁止用户修改输入框的内容。在使用disabled属性时，我们应该注意到用户无法通过键盘输入内容，这意味着disabled属性适用于只读的信息展示，但不适用于输入框的值与其他字段有动态关联的情形。
3. 结论
综上所述，readonly和disabled的作用是相似的，但是其功能、外观和交互有所不同。在实际应用中，我们应该根据对应的需求来选择相应的属性。