Best Practice - ReadOnly vs Disabled in Form Controls

Question

I'm working on a website/web service. In one of my forms the user need to enter 2 values: A and B. Then when the user clicks the submit button some info appears in a separated view next to the form.

I have additional parameter C, this parameter gets its value from A and B (as a result of some Math calculation). Once the user changing A or B then C will be updated automatically.

The user can't directly update the value of C (only by updating A and/or B).

I can't decide whether the form-control (textbox) should be in ReadOnly state or Disable state.

I have noticed that both ReadOnly and Disable provide the same outcome: The user can read the value from the textbox but can't edit it. In the case of ReadOnly the textbox element appear the same as a regular textbox, while in the case of Disabled the textbox is grayed-out so the user can understand this textbox isn't editable.

Now since both ReadOnly and Disabled provide the same behavior (with a different appearance) I don't know which to decide? What are the guidelines for selecting between ReadOnly and Disabled? When should I prefer to use the one over the other???

Native Textbox

Material Design Textbox

Answer 1

I don't think that using any form control for C is the right thing here. Using a form control implies that, at some point, the user can directly change it (by clicking/tapping on it), which doesn't appear to be the case here.

To me, while C is a value based on other inputs, it could be considered merely text, and displayed as such.

Answer 2

ReadOnly

• This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant.
• The "readonly" attribute is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
• The browser doesn't add any visual style for "readonly" elements.

Disabled

• This attribute indicates that the form control is not available for interaction.
• The click event will not be dispatched on disabled controls.
• The value of the "disabled" control will not be submitted with the form.
• Disabled form elements do not receive focus and therefore are been skipped in tab navigation.
• Most browsers (Chrome, Firefox, Edge, IE and more) adds some style (grayed-out) to disabled elements.

User Experience

Since both ReadOnly and Disabled attributes give the user a way to view the value of the element but don't modify it. While one of them - disabled - provide a visual feedback, the designer needs to choose whether the user can differentiate between a standard element and a non-modified element.
If you want the user to identify the element is in non-modified mode, use "disabled".
If you want a non-modified element to appear like the rest of the form elements, use "readonly".

Answer 3

Functionally

Readonly controls cannot be changed by the user.

Disabled controls cannot be changed by the user, or interacted with -- tab, focus, included in form submission (exception: the text can still be selected). Additionally they have muted styling.

Best practice

Use readonly controls for values that cannot be changed by the user, but are still significant.

Use disabled for values are not applicable currently, but could be enabled in a different state.

For example, in your case, a readonly input makes sense. The control is just like the others, except that the user can't directly modify it.

In another example, suppose I was ordering a mug, and could add a custom message to it. I'd use a disabled input for the message, because it's irrelevant until I enable the checkbox.

Answer 4

If you let the input in readOnly and not in disabled, the user will think that if he edit the value of C then the value of A and B would be changed.

If the inputs of the values A, B and C have the same style then the users would not make the difference between an editable input and a non-editable input.

Also if nothing happens when he click on the input of the C value he will probably think that it's a bug.

I think that the Disabled Textbox is the better choice because the user will know just by looking on the input that it's not editable.