Сделать все поля формы HTML 'readonly' или 'disabled'

Быстрый ответ

Если вы хотите сделать HTML-форму доступной только для чтения, всего одна строка кода на JavaScript справится с этой задачей:

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

Этот код устанавливает атрибут disabled для всех элементов формы — текстовых полей, кнопок, выпадающих списков и т.д., делая их недоступными для интеракции пользователя. Отметим, что этот метод не блокирует отправку формы посредством скриптов. Он только предотвращает изменения в форме, сделанные пользователем.

Нюансы формы в режиме "только для чтения"

Переход формы в режим только для чтения или неактивный может быть полезен, когда нужно показать информацию, исключив возможность её редактирования. Атрибут Readonly обычно применяется ко всем полям формы. Но для отключения всей формы можно вложить активные элементы в тег <fieldset> и применить к нему атрибут disabled.

<fieldset>: крепость элементов формы

Все элементы формы можно разместить внутри тега <fieldset disabled="disabled">:

<form>
  <fieldset disabled="disabled">
    <!-- Ваши элементы формы теперь неактивны -->
  </fieldset>
</form>

Такой подход позволяет сделать только для чтения все элементы сразу, без необходимости применять атрибут к каждому элементу по отдельности.

Подробнее об этом расскажет наш спикер на видео

Редко используемый атрибут inert

Для особого подхода можно воспользоваться атрибутом inert:

<form inert>
  <!-- Ваша форма в режиме "только для чтения" -->
</form>

Поддержка этого атрибута в браузерах ограниченная, однако и он обеспечивает формам режим "только для чтения".

Навигация по вкладкам с неактивными элементами

Отключение элементов приводит к их исключению из навигации по вкладкам. Это отличается от поведения readonly и может быть более предпочтительным в зависимости от требуемого пользовательского опыта.

CSS-наложение: искусственный эффект недоступности формы

С применением CSS можно создать эффект недоступности формы:

.form-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 10;
}

Это создаёт визуальное препятствие, не влияя на атрибуты формы.

jQuery: легкое отключение

С помощью jQuery можно легко отключить форму:

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

Убедитесь, что библиотека jQuery подключена к вашему проекту, если вы собираетесь использовать этот метод.

От элементов управления к статической информации

На страницах подтверждения заказов или операций можно заменить элементы формы статическим текстом, что позволяет отобразить отправленные данные без возможности их редактирования.

<p>Имя: Джон Доу</p>
<p>Email: johndoe@example.com</p>

Выбор метода блокировки: Readonly против Disabled

Если вам нужно заблокировать возможность изменений, но при этом сохранить фокусировку на элементах, лучше выбрать readonly.

Стилизация числовых полей в режиме "только для чтения"

Чтобы визуально выделить состояние только для чтения, примените соответствующие стили через CSS:

input[readonly], textarea[readonly], select[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

CSS в сочетании с JavaScript позволяет динамически управлять стилями и состоянием форм.

Визуализация

Если сравнить HTML-форму с магазином:

🏪🔒 До: Покупатели (пользователи) могут свободно выбирать и редактировать товары (элементы формы). 🏪💬 После: Товары (данные формы) доступны для просмотра за стеклом витрины (readonly), но их нельзя изменить.

Теперь магазин открыт для просмотра, но закрыт для покупок: 👀✅ Посетители видят все товары. 👐❌ Но они не могут их изменить или купить.

Полезные материалы

1. Справочник по HTML-атрибутам | MDN — подробный справочник HTML-атрибутов.
2. HTML input readonly Attribute — более детальное описание атрибута readonly.
3. HTML form readonly SELECT tag/input – Stack Overflow — обсуждение на Stack Overflow: формы только для чтения.
4. jQuery prop() Method — описание метода prop() в jQuery, для управления свойствами HTML-элементов.
5. The Current State of Styling Selects in 2019 | CSS-Tricks — последние тенденции в стилизации select 2019 года.