<textarea> – елемент текстової області

Елемент HTML <textarea> (текстова область) представляє контрольний елемент для редагування багаторядкового простого тексту, корисний тоді, коли є потреба дати користувачам змогу вводити чималу кількість тексту довільної форми, наприклад, коментар до відгуку чи форму зворотного зв'язку.

Спробуйте його в дії

Приклад вище демонструє низку можливостей <textarea>:

• Атрибут id, завдяки якому <textarea> пов'язується з елементом <label> для потреб доступності
• Атрибут name для задання імені пов'язаної порції даних, що надсилається на сервер при поданні форми.
• Атрибути rows і cols, що дають змогу задати точний розмір, котрий займе <textarea>. Задавати їх – добре для сталості, адже усталена логіка браузера може відрізнятися.
• Елемент <textarea> по-різному задає свій вміст у контекстах HTML і JavaScript:
  • У HTML початковий вміст <textarea> задається між його початковим і кінцевим тегами, а не в атрибуті value.
  • У JavaScript елементи <textarea> мають властивість value, якою можна скористатися для отримання чи задання поточного вмісту, а також defaultValue – для отримання та задання початкового значення (що рівносильно звертанню до текстового вмісту елемента HTML).

Крім цього, елемент <textarea> підтримує декілька атрибутів, спільних з елементом <input>, як то autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly та required.

Атрибути

Цей елемент приймає глобальні атрибути.

autocapitalize

Контролює те, чи додаються великі літери до тексту, введеного у поля вводу, а також, якщо так, то яким чином. Шукайте більше інформації на сторінці глобального атрибута autocapitalize.

autocomplete

Цей атрибут вказує, чи повинно значення контрольного елемента автоматично доповнюватися браузером. Можливі значення:

• off: Користувач мусить явно ввести значення в це поле при кожному використанні, або ж документ пропонує власний метод автодоповнення; браузер не доповнює вміст поля автоматично.
• on: Браузер може автоматично доповнити значення на основі значень, котрі користувач уводив при попередніх використаннях.
• <token-list>: Упорядкований набір розділених пробілами лексем подробиць автозаповнення, перед якими необов'язково стоїть розділова лексема, лексема групування даних оплати або доставлення чи лексема, що вказує на тип отримувача.

Елементи <textarea>, що не задають атрибут autocomplete, успадковують статус autocomplete, on або off від своєї форми-власника. Форма-власник – це або елемент <form>, нащадком якого є цей елемент <textarea>, або елемент форми, чий id заданий в атрибуті form елемента поля. Щоб отримати більше інформації, шукайте атрибут autocomplete у <form>.

autocorrect

Рядок, що вказує на те, чи треба вмикати автоматичне виправлення правопису й обробку текстових замін (якщо такі налаштовані), коли користувач редагує цю textarea. Дозволені значення:

on

Увімкнути автоматичні виправлення правопису й текстові заміни.

off

Вимкнути автоматичні виправлення правопису й текстові заміни.

autofocus

Цей булів атрибут дає змогу задати те, що контрольний елемент форми повинен отримати фокус при завантаженні сторінки. Лише один формовий елемент документа може мати такий атрибут.

cols

Видима ширина текстового контрольного елемента, задана в ширинах середнього символу. Якщо заданий, то мусить бути додатним цілим числом. Якщо не заданий, то усталене значення – 20.

dirname

Цей атрибут вживається для позначення напряму письма тексту, вміщеного в елементі.

disabled

Цей булів атрибут вказує, що користувач не може взаємодіяти з контрольним елементом. Якщо цей атрибут не задано, то контрольний елемент успадковує це налаштування від свого контейнерного елемента, наприклад – <fieldset>; якщо контейнерного елемента немає, коли заданий атрибут disabled, то контрольний елемент увімкнено.

form

Елемент форми, з котрим пов'язаний елемент <textarea> (його "форма-власник"). Значення атрибута мусить відповідати id елемента форми в тому самому документі. Якщо такий атрибут не задано, то елемент <textarea> мусить бути нащадком елемента форми. Цей атрибут дає змогу розміщувати елементи <textarea> будь-де в документі, а не лише серед нащадків елементів форм.

maxlength

Максимальна довжина рядка (у кодових одиницях UTF-16), котру може ввести користувач. Якщо це значення не задано, то користувач може ввести необмежену кількість символів.

minlength

Мінімальна довжина рядка (у кодових одиницях UTF-16), котру повинен увести користувач.

name

Ім'я контрольного елемента.

placeholder

Підказка користувачеві щодо того, що може бути введено в контрольний елемент.

[!NOTE] Заповнювач слід використовувати лише для демонстрування типу даних, котрий повинен бути введений у форму; заповнювачі не замінюють доброго елемента <label>, зв'язаного з полем. Дивіться докладне пояснення в Підписах <input>.

readonly

Цей булів атрибут вказує на те, що користувач не може змінювати значення контрольного елемента. На відміну від атрибута disabled, атрибут readonly не заважає користувачеві клацати чи вибирати контрольний елемент. Значення контрольного елемента лише для зчитування – подається з формою.

required

Цей атрибут задає те, що користувач мусить увести значення перед поданням форми.

rows

Число видимих рядів тексту в контрольному елементі. Якщо вказаний, то мусить бути доданим цілим числом. Якщо не заданий, то усталене значення – 2.

spellcheck

Задає, чи підпадає <textarea> під перевірку правопису з боку браузера чи ОС. Значенням можуть бути:

• true: Вказує на те, що елемент потребує перевірки правопису й граматики.
• default : Вказує на те, що елемент повинен працювати згідно з усталеною логікою, можливо, на основі значення spellcheck батьківського елемента.
• false : Вказує, що елемент не повинен перевірятися на правопис.

wrap

Вказує на те, як контрольний елемент повинен обробляти розриви рядків при поданні форми. Можливі значення:

• hard: Браузер автоматично вставляє розриви рядка (CR+LF), щоб жоден рядок не був ширшим за контрольний елемент; також, щоб це працювало, повинен бути заданий атрибут cols.
• soft: Браузер пересвідчується, що всі розриви рядка у введеному значенні поля є парами CR+LF, але до значення не додаються жодні додаткові розриви.
• off : Подібне до soft, але змінює вигляд на white-space: pre, щоб сегменти рядків, котрі виходять за межі cols, не переходили на новий рядок, а <textarea> ставав прокрутним по горизонталі.

Якщо цей атрибут не заданий, усталеним значенням є soft.

Оформлення засобами CSS

<textarea> є заміщеним елементом: він має природні розміри, як растрове зображення. Усталено його значення display – inline-block. У порівнянні з іншими елементами форми його порівняно легко оформлювати, адже його рамкову модель, шрифти, колірну гаму тощо легко змінити за допомогою звичайного CSS.

Оформлення форм HTML пропонує трохи корисних порад щодо оформлення елементів <textarea>.

Ненадійність базової лінії

Специфікація HTML не визначає, де лежить базова лінія <textarea>, тож різні браузери ставлять її в різних місцях. У Gecko базова лінія <textarea> знаходиться на базовій лінії першого рядка текстової області, натомість в інакших браузерах вона може бути внизу рамок <textarea>. Не слід використовувати на цьому елементі vertical-align: baseline; наслідки – непередбачувані.

Контроль можливості зміни розмірів текстової області користувачем

У більшості браузерів користувач може змінювати розміри <textarea>: у правому куті помітна ручка для перетягування, за допомогою котрої можна змінити розміри елемента на сторінці. Ця можливість контролюється властивістю CSSresize – усталено змінювання розмірів увімкнене, але його можна явно вимкнути, застосувавши resize зі значенням none:

textarea {
  resize: none;
}

Оформлення дійсних і недійсних значень

Дійсні та недійсні значення елемента <textarea> (наприклад, ті що лежать в межах і поза межами, встановленими minlength, maxlength чи required) можуть бути підсвічені за допомогою псевдокласів :valid та :invalid. Наприклад, щоб надати текстовій області різні межі залежно від того, має вона дійсне чи недійсне значення:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Приклади

Базовий приклад

Наступний приклад демонструє текстову область з заданою кількістю рядів і колонок, певним усталеним вмістом і стилями CSS, що не дають користувачам робити елемент більшим за 500px завширшки та 130px заввишки:

<textarea name="textarea" rows="5" cols="15">Напишіть тут щось</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

Приклад з використанням "minlength" і "maxlength"

Цей приклад має мінімальну й максимальну кількість символів – 10 і 20, відповідно. Спробуйте й подивіться.

<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Напишіть тут щось…
</textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

Зверніть увагу, що minlength не заважає користувачеві прибрати символи так, щоб кількість введених перейшла межу мінімуму, але робить значення, введене в <textarea>, недійсним. Також зверніть увагу, що навіть коли задано значення minlength (наприклад, 3), порожня <textarea> все одно вважається дійсною, якщо на додачу немає атрибута required.

Приклад з використанням "placeholder"

Цей приклад має заданий заповнювач. Зауважте, як він зникає, коли почати друкувати в полі.

<textarea
  name="textarea"
  rows="5"
  cols="30"
  placeholder="Текст коментаря."></textarea>

textarea {
  max-height: 130px;
  max-width: 500px;
}

Результат

[!NOTE] Заповнювачі повинні застосовуватися лише для демонстрування типу даних, котрий повинен бути введений у форму; вони не є заміною доброго елемента <label>, зв'язаного з полем. Дивіться розгорнуте пояснення в Підписах <input>.

Текстові області з disabled і readonly

Цей приклад демонструє два елементи <textarea>: один з атрибутом readonly, а інший – з атрибутом disabled. Не можна редагувати вміст жодного з них, але елемент з атрибутом readonly може отримувати фокус, і його значення подається в формах. Значення елемента з атрибутом disabled не подається, і він не може отримати фокус.

<textarea name="textarea" rows="5" cols="30" readonly>
Я – текстова область лише для зчитування.
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
Я – вимкнена текстова область.
</textarea>

textarea {
  display: block;
  resize: horizontal;
  max-width: 500px;
}

Результат

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Інші формові елементи:
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>