In this article I will explain with an example, the difference between ReadOnly and Disabled attributes in HTML.
The ReadOnly and Disabled attributes though work in same manner i.e. restrict the User from inputting data in the Form elements in HTML, there are still differences in both.
ReadOnly Attribute
The ReadOnly attribute as the name suggests makes the element ReadOnly i.e. the element will be enabled but its contents cannot be edited.
1. Only some elements such as HTML INPUT elements like TextBox and TEXTAREA can be set as ReadOnly.
2. Cursor is shown in ReadOnly TextBox or TextArea.
3. Focus can be set in ReadOnly element.
4. ReadOnly elements are focused during TAB navigation.
5. Data of ReadOnly elements is sent to server during Form Submission (Form POST).
6. Appears as normal element in Browser.
Example
<input type = "text" readonly = "readonly" />
Disabled Attribute
The Disabled attribute as the name suggests makes the element Disabled i.e. the element is disabled completely.
1. All elements can be set as Disabled.
2. Cursor is not shown in Disabled TextBox or TextArea.
3. Focus cannot be set in Disabled element.
4. Disabled elements are not focused during TAB navigation.
5. Data of Disabled elements is not sent to server during Form Submission (Form POST).
6. Appears greyed out in Browser.
Example
<input type = "text" disabled = "disabled" />
Screenshot
![Difference between ReadOnly and Disabled in HTML]()
