From 08b722b365368e531d0de683aa2aae43d9aacf9b Mon Sep 17 00:00:00 2001
From: Vitalii Perehonchuk <brute18@gmail.com>
Date: Wed, 27 Mar 2024 11:44:51 +0200
Subject: [PATCH] update(HTML): web/html/element/textarea

---
 files/uk/web/html/element/textarea/index.md | 55 ++++++++++++++++-----
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/files/uk/web/html/element/textarea/index.md b/files/uk/web/html/element/textarea/index.md
index 0973f87862..2a534e79bf 100644
--- a/files/uk/web/html/element/textarea/index.md
+++ b/files/uk/web/html/element/textarea/index.md
@@ -133,15 +133,22 @@ textarea:valid {
 
 ### Базовий приклад
 
-Наступний приклад демонструє дуже просту текстову область з низкою рядів та колонок і певним початковим умістом.
+Наступний приклад демонструє текстову область з заданою кількістю рядів і колонок, певним усталеним вмістом і стилями CSS, що не дають користувачам робити елемент більшим за 500px завширшки і 130px заввишки:
 
 ```html
-<textarea name="textarea" rows="10" cols="50">Напишіть тут щось</textarea>
+<textarea name="textarea" rows="5" cols="15">Напишіть тут щось</textarea>
+```
+
+```css
+textarea {
+  max-height: 130px;
+  max-width: 500px;
+}
 ```
 
 #### Результат
 
-{{EmbedLiveSample('bazovyi-pryklad','600','150')}}
+{{EmbedLiveSample('bazovyi-pryklad')}}
 
 ### Приклад з використанням "minlength" і "maxlength"
 
@@ -153,9 +160,16 @@ textarea:valid {
 </textarea>
 ```
 
+```css
+textarea {
+  max-height: 130px;
+  max-width: 500px;
+}
+```
+
 #### Результат
 
-{{EmbedLiveSample('pryklad-z-vykorystanniam-minlength-i-maxlength','600','80')}}
+{{EmbedLiveSample('pryklad-z-vykorystanniam-minlength-i-maxlength')}}
 
 Зверніть увагу, що `minlength` не заважає користувачеві прибрати символи так, щоб кількість введених перейшла межу мінімуму, але робить значення, введене в `<textarea>`, недійсним. Також зверніть увагу, що навіть коли задано значення `minlength` (наприклад, 3), порожня `<textarea>` все одно вважається дійсною, якщо на додачу немає атрибута `required`.
 
@@ -171,30 +185,45 @@ textarea:valid {
   placeholder="Текст коментаря."></textarea>
 ```
 
+```css
+textarea {
+  max-height: 130px;
+  max-width: 500px;
+}
+```
+
 #### Результат
 
-{{EmbedLiveSample('pryklad-z-vykorystanniam-placeholder','600','100')}}
+{{EmbedLiveSample('pryklad-z-vykorystanniam-placeholder')}}
 
 > **Примітка:** Заповнювачі повинні застосовуватися лише для демонстрування типу даних, котрий повинен бути введений у форму; вони _не_ є заміною доброго елемента {{HTMLElement("label")}}, зв'язаного з полем. Дивіться розгорнуте пояснення в [Підписах `<input>`](/uk/docs/Web/HTML/Element/input#pidpysy).
 
-### Disabled і readonly
-
-Цей приклад демонструє два елементи `<textarea>`, один з яких має `disabled`, а інший – `readonly`. Пограйтесь з обома – і побачите різницю в поведінці: елемент `disabled` не можна жодним чином вибрати (а його значення – не подається), натомість елемент `readonly` можна вибрати, а його вміст – скопіювати (а ще – його значення подається); лишень не можна редагувати цей вміст.
+### Текстові області з disabled і readonly
 
-> **Примітка:** У браузерах, відмінних від Firefox, як то хромі, вміст текстової області з `disabled` може бути доступним для вибору й копіювання.
+Цей приклад демонструє два елементи `<textarea>`: один з атрибутом [`readonly`](/uk/docs/Web/HTML/Attributes/readonly), а інший – з атрибутом [`disabled`](/uk/docs/Web/HTML/Attributes/disabled).
+Не можна редагувати вміст жодного з них, але елемент з атрибутом `readonly` може отримувати фокус, і його значення подається в формах.
+Значення елемента з атрибутом `disabled` не подається, і він не може отримати фокус.
 
 ```html
-<textarea name="textarea" rows="5" cols="30" disabled>
-Я – вимкнена текстова область.
-</textarea>
 <textarea name="textarea" rows="5" cols="30" readonly>
 Я – текстова область лише для зчитування.
 </textarea>
+<textarea name="textarea" rows="5" cols="30" disabled>
+Я – вимкнена текстова область.
+</textarea>
+```
+
+```css
+textarea {
+  display: block;
+  resize: horizontal;
+  max-width: 500px;
+}
 ```
 
 #### Результат
 
-{{EmbedLiveSample('disabled-i-readonly','600','100')}}
+{{EmbedLiveSample('tekstovi-oblasti-z-disabled-i-readonly','','230')}}
 
 ## Технічний підсумок