Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить <textarea> і коли його варто використовувати?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Елемент `<textarea>`** використовується для введення багаторядкового тексту: коментарів, відгуків, повідомлень, описів та будь-яких інших даних, які не вміщуються в одне коротке поле `<input>`. На відміну від `<input type="text">`, призначеного для одного рядка, `<textarea>` дозволяє користувачу писати декілька рядків тексту і навіть використовувати перенесення. **Ключове:** використовуйте `<textarea>`, коли потрібно отримати багато тексту та дозволити перенесення рядків.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<textarea>` використовується для **введення багаторядкового тексту**: коментарів, відгуків, повідомлень, описів та будь-яких інших даних, які не вміщуються в одне коротке поле `<input>`. На відміну від `<input type="text">`, призначеного для **одного рядка**, `<textarea>` дозволяє користувачу писати **декілька рядків тексту** і навіть використовувати **перенесення**. --- ### 1. Приклад базового використання ```html <form action="/feedback" method="post"> <label for="message">Ваш відгук:</label><br> <textarea id="message" name="message" rows="4" cols="40" placeholder="Напишіть тут..."></textarea> <br> <button type="submit">Надіслати</button> </form> ``` Результат: з'явиться велике текстове поле, у якому можна писати багаторядкове повідомлення. --- ### 2. Основні атрибути <textarea> | Атрибут | Призначення | Приклад | |---|---|---| | `name` | Ім'я поля (ключ для надсилання даних) | `name="comment"` | | `rows` | Кількість видимих рядків | `rows="5"` | | `cols` | Ширина поля в символах | `cols="40"` | | `placeholder` | Підказка всередині поля | `placeholder="Введіть повідомлення..."` | | `maxlength` | Максимальна кількість символів | `maxlength="500"` | | `required` | Робить поле обов'язковим | `required` | | `readonly` | Лише для читання (не можна редагувати) | `readonly` | | `disabled` | Вимикає поле (неактивне) | `disabled` | | `wrap` | Керує перенесенням рядків (`soft` або `hard`) | `wrap="soft"` | --- ### 3. Відмінність від <input type="text"> | Критерій | `<input type="text">` | `<textarea>` | |---|---|---| | Кількість рядків | Лише один | Декілька | | Перенесення рядків | Немає | Є | | Розмір | Фіксований | Можна змінювати (тягнути мишею) | | Призначення | Короткі дані (ім'я, email, логін) | Довгі тексти (коментар, повідомлення, опис) | Приклад порівняння: ```html <input type="text" name="title" placeholder="Заголовок"> <textarea name="description" placeholder="Опис"></textarea> ``` Перше - для короткого заголовка, друге - для довгого опису. --- ### 4. Значення за умовчанням Текст між відкривальним і закривальним тегом `<textarea>` вважається **початковим значенням**: ```html <textarea name="text">Текст за умовчанням</textarea> ``` --- ### 5. Як надсилаються дані Під час відправлення форми браузер передає вміст `<textarea>` як значення, пов'язане з його `name`: Приклад: ```html <textarea name="message">Привіт!</textarea> ``` Сервер отримає: ```javascript message=Привіт! ``` --- ### 6. Коли використовувати <textarea> Використовуйте його, коли потрібно: - отримати **багато тексту** (відгук, коментар, лист, опис); - дати користувачу можливість **вводити перенесення рядків**; - зібрати **контент вільної форми**, а не обмежений короткими полями. --- ### Підсумок: | Властивість | Значення | |---|---| | Тег | `<textarea>` (парний) | | Призначення | Багаторядкове поле вводу | | Ключові атрибути | `name`, `rows`, `cols`, `placeholder`, `maxlength` | | Відмінність від `<input>` | Підтримує декілька рядків і перенесення | | Використовується для | Коментарів, повідомлень, описів, форм зворотного зв'язку | --- **Простими словами:** `<textarea>` - це **"блокнот" всередині сайту**, де користувач може написати розгорнутий текст. Якщо `<input>` - це поле для "імені", то `<textarea>` - поле для "думки".Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.