Controlling Text Input Editability in HTML

HTML <input> elements of type text are designed to accept user input. However, there are scenarios where you might want to display text within an input field without allowing the user to modify it. This tutorial explains how to control the editability of text inputs using HTML attributes and briefly touches on CSS approaches.

Using the readonly Attribute

The most straightforward way to make a text input non-editable is by using the readonly attribute. Adding readonly to the input element prevents the user from typing into or modifying the input’s value. The displayed value remains visible, but it’s effectively read-only.

<input type="text" value="3" class="field left" readonly>

You can also write it as readonly="readonly", though the shorter form is preferred and equally effective.

Using the disabled Attribute

Another attribute you can use is disabled. While it also prevents editing, it behaves slightly differently than readonly. A disabled input is visually distinct (typically grayed out) and doesn’t participate in form submissions. The value of a disabled field is not sent with the form data.

<input type="text" value="Example" disabled>

Key Differences Between readonly and disabled

| Feature | readonly | disabled |
|—|—|—|
| Editability | Prevents editing | Prevents editing |
| Form Submission | Value is submitted with the form | Value is not submitted |
| Visual Appearance | Typically appears normal | Typically grayed out |
| Focus | Can receive focus | Cannot receive focus |

Choose readonly when you want to display a value that’s part of the form data but shouldn’t be changed. Use disabled when you want to completely exclude the field from form processing and visually indicate that it’s inactive.

CSS-Based Approach (Use with Caution)

While generally not the preferred method for controlling editability (as it relies on visual trickery rather than semantic meaning), you can use CSS to visually prevent editing. The pointer-events: none; CSS property will prevent the input field from responding to mouse clicks and other pointer events. However, the user can still technically focus on the input and type into it, so this approach doesn’t provide true protection against modification.

input {
  pointer-events: none;
}

Best Practices

• Prioritize HTML Attributes: Use readonly or disabled whenever possible for semantic clarity and proper form handling.
• Consider Accessibility: Ensure that any non-editable fields are clearly indicated to users, especially those using assistive technologies. The visual cues provided by the disabled attribute are helpful in this regard.
• Avoid CSS-Only Solutions: Relying solely on CSS to prevent editing can be problematic, as it doesn’t prevent users from manually modifying the input value.