readonly атрибут HTML

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

Попробуйте

<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" value="Adam" />

<label for="age">Age:</label>
<input id="age" name="age" type="number" value="42" readonly />

<label for="hobbies">Hobbies:</label>
<textarea id="hobbies" name="hobbies" readonly>Baseball</textarea>

label {
  display: block;
  margin-top: 1em;
}

input:read-only,
textarea:read-only {
  background-color: silver;
}

Обзор

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

Атрибут readonly поддерживается текстовыми элементами управления формами, включая:

• элементы <input> следующих типов:
  • text
  • search
  • tel
  • url
  • email
  • password
  • date
  • month
  • week
  • time
  • datetime-local
  • number
• <textarea>

Этот атрибут не имеет значения для других элементов, включая <select> и <button>. Он также не применяется к нетекстовым элементам ввода, в том числе:

• hidden
• range
• color
• checkbox
• radio
• file
• submit
• image
• reset
• button

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

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

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

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

Изменить значение атрибута readonly динамически можно только с помощью скрипта.

Удобство использования

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

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

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

Пример

HTML

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

Результат

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

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

html.elements.input.readonly

html.elements.textarea.readonly

См. также

• :read-only и :read-write
• <input>
• <select>