Skip to content

Commit f5e9fa6

Browse files
teplostanskisolarrust
teplostanski
and
solarrust
authored
Добавляет доку про атрибут readonly (#5674)
* Добавляет статью про атрибут readonly * Добавляет демку к статье про атрибут readonly * Update html/readonly/index.md Co-authored-by: Alena Batitskaia <[email protected]> * Update html/readonly/demos/index.html Co-authored-by: Alena Batitskaia <[email protected]> * Update html/readonly/index.md Co-authored-by: Alena Batitskaia <[email protected]> * Вносит правки --------- Co-authored-by: Alena Batitskaia <[email protected]>
1 parent a2a2b83 commit f5e9fa6

File tree

3 files changed

+230
-29
lines changed

3 files changed

+230
-29
lines changed

‎html/readonly/demos/index.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
4+
<head>
5+
<title>Поля только для чтения — Атрибут readonly — Дока</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
11+
<style>
12+
*,
13+
*::before,
14+
*::after {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
html {
21+
color-scheme: dark;
22+
}
23+
24+
body {
25+
min-height: 100vh;
26+
padding: 50px;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
background-color: #18191C;
31+
color: #FFFFFF;
32+
font-family: "Roboto", sans-serif;
33+
font-size: 18px;
34+
}
35+
36+
form {
37+
width: 80%;
38+
max-width: 500px;
39+
display: flex;
40+
flex-direction: column;
41+
gap: 20px;
42+
}
43+
44+
.form-group {
45+
display: flex;
46+
flex-direction: column;
47+
gap: 8px;
48+
}
49+
50+
label {
51+
font-weight: 500;
52+
}
53+
54+
input {
55+
width: 300px;
56+
border: 1px solid #FFFFFF;
57+
border-radius: 6px;
58+
padding: 10px 15px;
59+
background-color: transparent;
60+
color: #FFFFFF;
61+
font-size: 16px;
62+
font-weight: 300;
63+
font-family: inherit;
64+
-webkit-appearance: none;
65+
appearance: none;
66+
}
67+
68+
input:focus {
69+
border-color: #2E9AFF;
70+
outline: none;
71+
}
72+
73+
input[readonly] {
74+
border-color: #FF8630;
75+
cursor: not-allowed;
76+
}
77+
78+
input[readonly]:focus {
79+
border-color: #2E9AFF;
80+
outline: none;
81+
}
82+
83+
input[disabled] {
84+
border-color: #979797;
85+
background-color: #9797971A;
86+
color: #979797;
87+
cursor: not-allowed;
88+
}
89+
90+
.hint {
91+
margin-top: 4px;
92+
color: #979797;
93+
font-size: 14px;
94+
}
95+
96+
@media (max-width: 768px) {
97+
body {
98+
padding: 30px;
99+
}
100+
101+
form {
102+
width: 100%;
103+
}
104+
}
105+
</style>
106+
</head>
107+
108+
<body>
109+
<form>
110+
<div class="form-group">
111+
<label for="editable">Обычное поле</label>
112+
<input type="text" id="editable" value="Можно редактировать">
113+
<p class="hint">Это поле можно редактировать</p>
114+
</div>
115+
116+
<div class="form-group">
117+
<label for="readonly">Поле только для чтения</label>
118+
<input type="text" id="readonly" value="Нельзя редактировать" readonly>
119+
<p class="hint">Поле с атрибутом readonly можно выделить и скопировать</p>
120+
</div>
121+
122+
<div class="form-group">
123+
<label for="disabled">Неактивное поле</label>
124+
<input type="text" id="disabled" value="Полностью неактивно" disabled>
125+
<p class="hint">Поле с атрибутом disabled нельзя редактировать и получить фокус</p>
126+
</div>
127+
</form>
128+
</body>
129+
130+
</html>

‎html/readonly/index.md

+83-29
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,117 @@ title: "Атрибут `readonly`"
33
description: "Этим атрибутом помечают поля формы, которые доступны только для чтения."
44
authors:
55
- tanugladkih
6+
- teplostanski
67
related:
78
- js/boolean
89
- html/form
910
- css/pseudoclasses
1011
tags:
1112
- doka
12-
- placeholder
1313
---
1414

1515
## Кратко
1616

17-
Атрибут `readonly` добавляется полям формы, которые пользователь не сможет редактировать. Они будут доступны только для чтения.
17+
Атрибут `readonly` делает поля формы доступными только для чтения. Пользователь не сможет изменить значение такого поля, но сможет выделить и скопировать текст.
1818

1919
## Пример
2020

21-
В данном примере нельзя отредактировать дату своего рождения:
22-
2321
```html
2422
<form>
25-
<div class="group">
26-
<input type="date" value="1995-04-04" readonly="readonly" id="date">
27-
<label for="date">Дата рождения</label>
23+
<div>
24+
<label for="username">Имя пользователя</label>
25+
<input type="text" value="Алиса" readonly id="username">
26+
</div>
27+
28+
<div>
29+
<label for="comment">Комментарий</label>
30+
<textarea readonly id="comment">
31+
Этот текст нельзя отредактировать
32+
</textarea>
2833
</div>
2934
</form>
3035
```
3136

37+
## Как понять
38+
39+
Иногда нужно показать пользователю информацию в поле формы, но при этом запретить её редактирование. Например:
40+
41+
- отображение данных из профиля, которые нельзя изменить;
42+
- показ результатов расчётов;
43+
- демонстрация значений по умолчанию.
44+
45+
В таких случаях пригодится атрибут `readonly`.
46+
47+
Этот атрибут позволяет:
48+
49+
- выделять и копировать текст;
50+
- полю ввода получать фокус с клавиатуры;
51+
- отправлять данные из поля ввода на сервер;
52+
- стилизовать элемент через CSS при помощи псевдокласса.
53+
54+
<iframe title="Поля только для чтения" src="demos/" height="500"></iframe>
55+
3256
## Как пишется
3357

34-
Атрибут `readonly` булевый, его можно добавить со значением: `readonly="readonly"`, или без него — `<input type="text" readonly>`.
58+
`readonly` — это булевый атрибут, поэтому его можно записать двумя способами:
3559

36-
Атрибут `readonly` можно использовать для [`<textarea>`](/html/textarea/) и [`<input>`](/html/input/) со следующими типами:
60+
```html
61+
<!-- Полная запись -->
62+
<input readonly="readonly">
63+
<!-- Сокращённая запись -->
64+
<input readonly>
65+
```
3766

38-
- `text`,
39-
- `search`,
40-
- `url`,
41-
- `tel`,
42-
- `email`,
43-
- `password`,
44-
- `date`,
45-
- `month`,
46-
- `week`,
47-
- `time`,
48-
- `datetime-local`,
49-
- `number`.
67+
В ARIA есть атрибут [`aria-readonly`](/a11y/aria-readonly/), который делает то же самое. Но лучше использовать нативный атрибут HTML, а ARIA применять только для элементов, где `readonly` не поддерживается:
5068

51-
Не используется:
69+
```html
70+
<!-- ARIA для кастомных элементов -->
71+
<custom-input aria-readonly="true">
72+
Нередактируемый текст
73+
</custom-input>
74+
```
5275

53-
- с тегом [`<select>`](/html/select/);
54-
- с любым типом кнопок (даже если это изображение);
55-
- если у поля есть атрибут [`hidden`](/html/hidden/).
76+
### Где можно использовать
5677

57-
Также для полей с атрибутом `readonly` не сработает атрибут [`required`](/html/required/).
78+
Атрибут `readonly` работает с:
5879

59-
## Как понять
80+
- [`<textarea>`](/html/textarea/)
81+
- [`<input>`](/html/input/) следующих типов:
82+
- `text`
83+
- `search`
84+
- `url`
85+
- `tel`
86+
- `email`
87+
- `password`
88+
- `date`
89+
- `month`
90+
- `week`
91+
- `time`
92+
- `datetime-local`
93+
- `number`
94+
95+
### Где не работает
96+
97+
Атрибут `readonly` нельзя использовать с:
98+
99+
- [`<select>`](/html/select/)
100+
- любыми типами кнопок в `<input>`
101+
- полями с атрибутом [`hidden`](/html/hidden/)
60102

61-
Есть разница между [`disabled`](/html/disabled/) и `readonly`. Так, поля, доступные только для чтения (`readonly`), по-прежнему могут получать фокус и будут отправляться вместе с формой в отличие от неактивных полей (`disabled`).
103+
Также поле с `readonly` нельзя сделать обязательным через [`required`](/html/required/).
62104

63105
## Подсказки
64106

65-
💡 Поле с атрибутом `readonly` можно стилизовать при помощи псевдокласса `:read-only`, а поля без этого атрибута - `:read-write`.
107+
💡 Не путайте `readonly` с [`disabled`](/html/disabled/). Неактивные поля (`disabled`) не получают фокус и не отправляются с формой, а поля только для чтения (`readonly`) — получают и отправляются.
108+
109+
💡 Для стилизации полей с `readonly` используйте псевдокласс [`:read-only`](/css/read-only/), а для редактируемых полей — [`:read-write`](/css/read-write/).
110+
111+
💡 В JavaScript можно проверить, доступно ли поле для редактирования, через свойство `readOnly`:
112+
113+
💡 Поля с `readonly` всё ещё можно изменить через JavaScript или инструменты разработчика. Не используйте этот атрибут для защиты важных данных.
114+
115+
💡 Хотя поле с `readonly` можно выделить и получить на него фокус, пользователи не могут изменить его значение с клавиатуры.
116+
117+
💡 При отправке формы поля с `readonly` передаются на сервер, в отличие от полей с `disabled`.
118+
119+
💡 Атрибут `readonly` не влияет на события поля. Можно использовать все события, как с обычным полем.

‎html/readonly/practice/teplostanski.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
🛠 Для улучшения UX добавляйте визуальную подсказку, что поле нельзя редактировать:
2+
3+
```css
4+
[readonly] {
5+
background-color: #f5f5f5;
6+
cursor: not-allowed;
7+
}
8+
```
9+
10+
🛠 Если нужно временно запретить редактирование поля, удобно переключать `readonly` через JavaScript:
11+
12+
```js
13+
const toggleReadOnly = (event) => {
14+
const input = document.querySelector('input')
15+
input.readOnly = !input.readOnly
16+
}
17+
```

0 commit comments

Comments
 (0)