Атрибут HTML: readonly

{{HTMLSidebar}}

Булів атрибут readonly (лише для зчитування), коли присутній, робить елемент незмінним, що означає, що користувач не може редагувати його.

Спробуйте його в дії

Огляд

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

Атрибут readonly підтримується типами <input> <a href="/uk/docs/Web/HTML/Element/input/text">text</a>, <a href="/uk/docs/Web/HTML/Element/input/search">search</a>, <a href="/uk/docs/Web/HTML/Element/input/url">url</a>, <a href="/uk/docs/Web/HTML/Element/input/tel">tel</a>, <a href="/uk/docs/Web/HTML/Element/input/email">email</a>, <a href="/uk/docs/Web/HTML/Element/input/password">password</a>, <a href="/uk/docs/Web/HTML/Element/input/date">date</a>, <a href="/uk/docs/Web/HTML/Element/input/month">month</a>, <a href="/uk/docs/Web/HTML/Element/input/week">week</a>, <a href="/uk/docs/Web/HTML/Element/input/time">time</a>, <a href="/uk/docs/Web/HTML/Element/input/datetime-local">datetime-local</a> і <a href="/uk/docs/Web/HTML/Element/input/number">number</a>, а також контрольним елементом форм <textarea>. Коли він присутній на будь-якому з них, спрацьовує збіг з псевдокласом :read-only. Якщо його немає, то спрацьовує збіг з псевдокласом :read-write.

Цей атрибут не підтримується та не стосується <select> і типів полів, які й так не можуть змінюватися, наприклад, <a href="/uk/docs/Web/HTML/Element/input/checkbox">checkbox</a> і <a href="/uk/docs/Web/HTML/Element/input/radio">radio</a>, або за визначенням не можуть зразу з'являтися зі значенням, наприклад, <a href="/uk/docs/Web/HTML/Element/input/file">file</a>. <a href="/uk/docs/Web/HTML/Element/input/range">range</a> і <a href="/uk/docs/Web/HTML/Element/input/color">color</a>, оскільки обидва ці типи мають усталені значення. Також не підтримується на <a href="/uk/docs/Web/HTML/Element/input/hidden">hidden</a>, адже не можна очікувати, що користувач заповнить поле, що є прихованим. Він також не підтримується на будь-якому з типів кнопок, включно з image.

Примітка: Лише текстові контрольні елементи можуть стати лише для зчитування, адже для решти контрольних елементів (як то полів для галочки та кнопок) немає змістовної відмінності між станами лише для зчитування та вимкненості, тому атрибут readonly не застосовується.

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

Взаємодія між атрибутами

Різниця між disabled і readonly полягає в тому, що поля лише для зчитування все одно можуть працювати та є фокусовними, натомість вимкнені поля не можуть отримати фокус та не подаються разом із формою та, як правило, не працюють як контрольні елементи, поки не будуть увімкнені.

У зв'язку з тим, що поле лише для зчитування не може бути змінено шляхом взаємодії з ним користувача, атрибут required не має жодної дії на поля, на котрих також заданий атрибут readonly.

Єдиний спосіб динамічно змінити значення атрибута readonly — це за допомогою сценарію.

Примітка: Атрибут required не дозволяється на полях, на яких заданий атрибут readonly.

Використовність

Браузери показують атрибут readonly.

Валідація обмежень

Якщо елемент – лише для зчитування, то значення такого елемента не може бути оновлено користувачем та не бере участі у валідації обмежень.

Приклад

HTML

<div class="group">
  <input type="text" value="Якесь значення" readonly="readonly" id="text" />
  <label for="text">Текстове поле</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Дата</label>
</div>
<div class="group">
  <input type="email" value="Якесь значення" readonly="readonly" id="email" />
  <label for="email">Електронна пошта</label>
</div>
<div class="group">
  <input type="password" value="Якесь значення" readonly="readonly" id="pwd" />
  <label for="pwd">Пароль</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Якесь значення</textarea>
  <label for="ta">Повідомлення</label>
</div>

Результат

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

{{Specifications}}

Сумісність із браузерами

{{Compat}}

Дивіться також

• :read-only та :read-write
• <input>
• <select>