Що робить <textarea> і коли його варто використовувати?
Елемент <textarea> використовується для введення багаторядкового тексту: коментарів, відгуків, повідомлень, описів та будь-яких інших даних, які не вміщуються в одне коротке поле <input>.
На відміну від <input type="text">, призначеного для одного рядка, <textarea> дозволяє користувачу писати декілька рядків тексту і навіть використовувати перенесення.
1. Приклад базового використання
<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. Основні атрибути
Атрибут Призначення Приклад nameІм'я поля (ключ для надсилання даних) name="comment"rowsКількість видимих рядків rows="5"colsШирина поля в символах cols="40"placeholderПідказка всередині поля placeholder="Введіть повідомлення..."maxlengthМаксимальна кількість символів maxlength="500"requiredРобить поле обов'язковим requiredreadonlyЛише для читання (не можна редагувати) readonlydisabledВимикає поле (неактивне) disabledwrapКерує перенесенням рядків (soft або hard) wrap="soft"
| Атрибут | Призначення | Приклад |
|---|---|---|
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"> | <textarea> |
|---|---|---|
| Кількість рядків | Лише один | Декілька |
| Перенесення рядків | Немає | Є |
| Розмір | Фіксований | Можна змінювати (тягнути мишею) |
| Призначення | Короткі дані (ім'я, email, логін) | Довгі тексти (коментар, повідомлення, опис) |
Приклад порівняння:
<input type="text" name="title" placeholder="Заголовок">
<textarea name="description" placeholder="Опис"></textarea>Перше - для короткого заголовка, друге - для довгого опису.
4. Значення за умовчанням
Текст між відкривальним і закривальним тегом <textarea> вважається початковим значенням:
<textarea name="text">Текст за умовчанням</textarea>5. Як надсилаються дані
Під час відправлення форми браузер передає вміст <textarea> як значення, пов'язане з його name:
Приклад:
<textarea name="message">Привіт!</textarea>Сервер отримає:
message=Привіт!6. Коли використовувати
Використовуйте його, коли потрібно:
- отримати багато тексту (відгук, коментар, лист, опис);
- дати користувачу можливість вводити перенесення рядків;
- зібрати контент вільної форми, а не обмежений короткими полями.
Підсумок:
| Властивість | Значення |
|---|---|
| Тег | <textarea> (парний) |
| Призначення | Багаторядкове поле вводу |
| Ключові атрибути | name, rows, cols, placeholder, maxlength |
Відмінність від <input> | Підтримує декілька рядків і перенесення |
| Використовується для | Коментарів, повідомлень, описів, форм зворотного зв'язку |
Простими словами:
<textarea> - це "блокнот" всередині сайту, де користувач може написати розгорнутий текст.
Якщо <input> - це поле для "імені",
то <textarea> - поле для "думки".
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.