How can I make an entire HTML form "readonly"?

html

responsive-design

best-practices

css

byNikita Barsukov·Nov 7, 2024

Turn your HTML form readonly instantly by employing this JavaScript one-liner:

document.querySelectorAll('form :input').forEach(input => input.disabled = true);

This action applies disabled to all form inputs at once, including textareas, buttons, and select elements. Consequently, user interaction is obstructed, mimicking a readonly state. Do keep in mind: This technique doesn't prevent form submission via scripts, it merely restricts user modification.

The hidden depths of a readonly form

The ability to switch a form to readonly or disabled is extremely valuable when seeking to only display information while prohibiting any changes. Readonly generally applies to individual elements, but disabled can extend to an entire form leveraging the neat trick of wrapping the included inputs in a <fieldset> tag and assigning the disabled attribute.

`<fieldset>`: the bastion of elements

Consider wrapping all form elements within a <fieldset disabled="disabled">:

<form>
  <fieldset disabled="disabled">
    <!-- An island of tranquility amidst an ocean of chaos (your form elements) -->
  </fieldset>
</form>

This technique achieves a readonly effect for all form elements, eliminating the need to place the attribute on each element individually.

The elusive `inert` attribute

Incorporate the truly elusive inert attribute for an unusual approach:

<form inert>
  <!-- Form content swims in the tranquil waters of inactivity -->
</form>

Though support for this attribute across browsers isn't widespread, it certainly introduces a scenario where the form behaves as if it's readonly, prohibiting interactions.

When form elements are designated as disabled, being accessible through tab navigation isn't possible. This distinction differs from readonly, and is best fitted based on the user experience you aim to deliver.

CSS Overlay: the mirage of a readonly form

Garner a readonly illusion by overlaying a CSS layer above the form:

.form-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 10; /* Trying to highlight my existence! */
}

This method paints a visual constraint without necessarily altering the form attributes.

jQuery: lending a helping hand

If you're using jQuery, disabling a form can be achieved effortlessly:

$('#yourFormId :input').prop('disabled', true);

However, ensure jQuery library is uniquely included in your project for this purpose.

The transition from controls to static information

On confirmation pages, consider substituting form controls with static text. This helps the user see what data was submitted without hinting at any possibility of editing.

<p>Name: John Doe</p>
<p>Email: [email protected]</p>

Choosing your guardian: Readonly vs. Disabled

Opt for readonly if you aim to prevent changes but uphold focus ability. It allows interaction with the form sans any data alteration.

Styling readonly forms: A dress-up game

Use the magic wand of CSS to concoct a readonly disguise:

input[readonly], textarea[readonly], select[readonly] {
  background-color: #eee;
  cursor: not-allowed; /* Cursor is on a 'not-allowed' vacation */
}