HTML атрибут: readonly

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

Попробуйте

Обзор

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

Атрибут readonly поддерживается типами text, search, url, tel, email, password, date, month, week, time, datetime-local, и number <input> и элементом управления формы <textarea>. Если он присутствует в любом из этих типов ввода и элементов, псевдокласс :read-only будет соответствовать. Если атрибут не включён, будет соответствовать псевдокласс :read-write.

Атрибут не поддерживается или не относится к <select> или типам ввода, которые изначально не изменяемы, таким как checkbox и radio или не могут, по определению, начинаться со значения, такого как тип ввода file. range и color, так как у них есть значения по умолчанию. Он также не поддерживается для hidden, так как нельзя ожидать, что пользователь заполнит скрытую форму. Также он не поддерживается ни для какого типа кнопок, включая image.

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

Когда у элемента ввода есть атрибут readonly, псевдокласс :read-only также применяется к нему. И наоборот, элементы ввода, которые поддерживают атрибут readonly, но атрибут не задан, соответствуют псевдоклассу :read-write.

Взаимодействие атрибутов

Разница между disabled и readonly заключается в том, что элементы управления только для чтения по-прежнему могут функционировать и доступны для фокусировки, в то время как отключённые элементы управления не могут получить фокус, не отправляются с формой и, вообще, не работают как элементы управления до тех пор, пока не будут включены.

Поскольку значение поля только для чтения нельзя изменить с помощью взаимодействия пользователя, required не оказывает никакого влияния на элементы ввода с заданным атрибутом readonly.

Единственный способ динамически изменить значение атрибута readonly — через скрипт.

Примечание: Атрибут required не разрешён для элементов ввода с указанным атрибутом readonly.

Использование

Браузеры отображают атрибут readonly.

Проверка ограничений

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

Пример

HTML

html

<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>

Результат

Спецификации

Спецификация
Стандарт HTML # attr-input-readonly
Стандарт HTML # attr-textarea-readonly

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`readonly`	1	12	1	≤12.1	≤4	18	4	≤12.1	≤3.2	1.0	4.4

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`readonly`	1	12	1	≤12.1	1	18	4	≤12.1	1	1.0	4.4

html.elements.input.readonly

Таблицы BCD загружаются только в браузере

html.elements.textarea.readonly

Таблицы BCD загружаются только в браузере

См. также

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly