readonly: запрет изменения без отключения поля

Назначение

Атрибут readonly позволяет показывать значение поддерживаемого текстового поля без возможности редактирования пользователем.

Как это работает

Такое поле остаётся доступным для фокусировки и обычно участвует в отправке формы при наличии name. Атрибут применим не ко всем видам контролов: например, select не получает режим только для чтения через readonly.

Пример

<label for="order-code">Код учебного заказа</label>
<input id="order-code" name="order_code" value="DEMO-042" readonly>

Что должно получиться

Код доступен для чтения, выделения и копирования. Ограничение действует на обычный ввод в интерфейсе, но не служит контролем полномочий на сервере.

Граница применения и частая ошибка

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

Самостоятельная проверка

Выделите и скопируйте код клавиатурой. Сравните с disabled, затем снимите readonly и проверьте, что обычное редактирование снова работает.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Формы HTML
• Элемент input
• Проверка с клавиатуры