What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?

html

form-handling

user-experience

input-fields

byAnton Shumikhin·Jul 22, 2024

A disabled input is non-interactive, it won't participate in form submissions. A readonly input is focusable, readable, but unalterable, and it will be submitted with the form.

<!-- Disabled: Can't click, won't submit. Like my cat on a busy day -->
<input type="text" disabled value="I'm like a statue" />

<!-- Readonly: Can't edit, but will submit. Like my broken keyboard -->
<input type="text" readonly value="Are you just gonna keep looking?" />

Use disabled to prevent any interaction and form submission, use readonly for displaying data that can't be edited but has to be submitted with the form.

Interaction and behavior: User and Input Field Dance Basics

disabled fields are like those invisible people at parties, they cannot be focused and are ignored in tab navigation.

readonly fields, though non-editable, are like party-goers in a flamboyant attire, they can be focused and participate in keyboard navigation.

readonly elements are social beings, they trigger and respond to events like click, focus, blur, etc. You can listen to these events using JavaScript.

disabled elements, however, are socially awkward. They won't respond to any user actions - clicked, hovered, focused, or defocused.

Form submission nuances: Under the Hood

Form Reset and Value Retention: What Stays, What Goes?

Behavioral differences step in when there's a form reset. A readonly field is like me on a Monday morning, it loses its memory and doesn't retain its value after a reset.

A disabled field, on the other hand, is a persistent friend who remembers everything, and keeps its value even after a form reset.

Fickle Browsers: The Browser Behavior Spectrum

Across various browsers, the rendering and functioning of disabled and readonly fields may vary, just like my mood on weekends. Thorough testing across different browsers can help ensure consistent behavior.

Experience and Design Considerations: Happy User, Happy Developer!

User-Input Feedback: Feedback Loop Essentials

Crucial for great User Experience is the visual feedback for user inputs. While disabled fields are like distant cold planets with no signs of activity, readonly fields are warm habitable ones but might need custom styling for better communication.

Design Decisions: When to Choose What?

If the goal is to prevent all sort of interaction and form submission, the disabled is your buddy. If you want to display un-editable data that needs to be submitted, go have a conversation with readonly.

Consistency in UI

Ensure your usage of disabled and readonly attributes is consistent, considering those who rely on assistive technologies. Consistency is the key to prevent any user confusion.