Пошук уроків, статей та іншого контенту
Додавайте багаторядкові поля textarea та налаштовуйте їхній розмір і початковий текст.
textarea<textarea> — це HTML-елемент для введення багаторядкового тексту. На відміну від <input type="text">, він дає змогу користувачеві вводити текст у кілька рядків.
textarea використовують для:
коментарів;
повідомлень;
описів;
адрес;
відгуків;
іншого тексту, який може бути довшим за один рядок.
Базовий приклад:
<textarea></textarea>Браузер відобразить поле, у якому можна вводити текст.
Щоб користувач розумів призначення поля, додайте елемент <label>:
<label for="comment">Ваш коментар:</label>
<textarea id="comment"></textarea>Значення атрибута for у <label> має збігатися зі значенням id у <textarea>.
Тепер підпис пов’язаний із полем. Якщо натиснути на текст підпису, поле отримає фокус.
nameАтрибут name задає ім’я поля. Воно потрібне, щоб ідентифікувати значення textarea під час надсилання форми.
<label for="message">Повідомлення:</label>
<textarea id="message" name="message"></textarea>У цьому прикладі:
id="message" пов’язує поле з <label>;
name="message" задає ім’я даних поля.
Зазвичай для поля форми використовують обидва атрибути.
Початковий текст записують між відкривальним і закривальним тегами <textarea>:
<textarea name="description">Це початковий текст.</textarea>Користувач побачить цей текст у полі та зможе його змінити.
На відміну від елемента <input>, початкове значення textarea не задають через атрибут value.
Правильно:
<textarea>Початковий текст</textarea>Не варто робити так:
<textarea value="Початковий текст"></textarea>Атрибут value не використовується для початкового тексту textarea.
rows і colsАтрибут rows задає приблизну кількість видимих рядків:
<textarea rows="5"></textarea>Таке поле буде приблизно заввишки у п’ять рядків.
Атрибут cols задає приблизну ширину поля:
<textarea rows="5" cols="40"></textarea>У цьому прикладі поле має приблизно п’ять рядків заввишки та сорок символів завширшки.
Повний приклад:
<label for="review">Ваш відгук:</label>
<textarea id="review" name="review" rows="6" cols="50"></textarea>Значення rows і cols визначають початковий розмір поля. Вони не обмежують кількість тексту, який можна ввести.
Для точнішого налаштування розміру використовують CSS-властивості width і height:
<label for="message">Повідомлення:</label>
<textarea id="message" name="message"></textarea>textarea {
width: 300px;
height: 120px;
}Розмір можна вказати також відносно батьківського елемента:
textarea {
width: 100%;
min-height: 120px;
}У цьому випадку поле займатиме всю доступну ширину, але його висота буде не меншою за 120px.
Браузер зазвичай дозволяє користувачеві змінювати розмір textarea, перетягуючи його нижній правий кут.
За потреби це можна заборонити:
textarea {
resize: none;
}Також можна дозволити змінювати розмір лише вертикально:
textarea {
resize: vertical;
}Або лише горизонтально:
textarea {
resize: horizontal;
}Найчастіше для багаторядкових полів використовують resize: vertical, щоб користувач міг збільшити висоту поля, але не ламав ширину форми.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Форма відгуку</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 30px auto;
padding: 0 16px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
textarea {
display: block;
width: 100%;
min-height: 120px;
box-sizing: border-box;
padding: 10px;
font: inherit;
resize: vertical;
}
button {
margin-top: 12px;
padding: 8px 16px;
}
</style>
</head>
<body>
<h1>Залиште відгук</h1>
<form>
<label for="review">Ваш відгук:</label>
<textarea
id="review"
name="review"
rows="5"
placeholder="Напишіть кілька речень..."
required
></textarea>
<button type="submit">Надіслати</button>
</form>
</body>
</html>У цьому прикладі:
<form> містить поле та кнопку;
<label> описує призначення поля;
id пов’язує поле з підписом;
name задає ім’я поля;
rows задає початкову висоту;
placeholder показує підказку, поки поле порожнє;
required не дозволяє надіслати порожнє поле;
CSS задає ширину, висоту, відступи та можливість змінювати висоту поля.
Початковий текст і підказка мають різне призначення.
Початковий текст уже є значенням поля:
<textarea>Цей текст можна відредагувати.</textarea>Підказка placeholder зникає після введення користувачем власного тексту:
<textarea placeholder="Введіть ваш коментар"></textarea>Початковий текст використовують, коли поле вже має певне значення. placeholder використовують для короткої інструкції або прикладу.
Не варто використовувати placeholder замість <label>. Підпис залишається видимим і краще пояснює призначення поля.
valueДля textarea початковий текст записують між тегами:
<textarea>Початковий текст</textarea>А не через value:
<textarea value="Початковий текст"></textarea>labelПоле без підпису може бути незрозумілим користувачеві:
<textarea name="text"></textarea>Краще додати опис:
<label for="text">Текст повідомлення:</label>
<textarea id="text" name="text"></textarea>rows і обмеженням текстуrows задає лише видиму висоту поля. Він не обмежує кількість рядків, які можна ввести.
placeholderПідказка не повинна бути єдиним поясненням поля:
<textarea placeholder="Введіть адресу"></textarea>Краще додати підпис:
<label for="address">Адреса:</label>
<textarea id="address" name="address" placeholder="Вулиця, будинок, квартира"></textarea><textarea> створює поле для введення багаторядкового тексту.
Початковий текст записують між відкривальним і закривальним тегами.
rows задає приблизну кількість видимих рядків.
cols задає приблизну ширину поля.
Розмір також можна налаштувати за допомогою CSS-властивостей width і height.
name задає ім’я поля у формі.
label пояснює призначення поля та покращує доступність.
placeholder показує підказку, але не замінює <label>.
Властивість resize керує можливістю користувача змінювати розмір поля.