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

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

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

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

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

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

Атрибути

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

autocapitalize

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

autocomplete

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

  • off: Користувач мусить явно ввести значення в це поле при кожному використанні, або ж документ пропонує власний метод автодоповнення; браузер не доповнює вміст поля автоматично.
  • on: Браузер може автоматично доповнити значення на основі значень, котрі користувач уводив при попередніх використаннях.

Якщо атрибут autocomplete не заданий на елементі <textarea>, то браузер використовує значення атрибута autocomplete форми-власника елемента <textarea>. Форма-власник – це або елемент <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> є заміщеним елементом: він має природні розміри, як растрове зображення. Усталено його значення displayinline-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;
}

Результат

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

Категорії вмісту Потоковий вміст, оповідальний вміст, інтерактивний вміст, перелічений, підписний, скиданий і подавальний формовий елемент.
Дозволений вміст Текст
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Усі елементи, що приймають оповідальний вміст.
Неявна роль ARIA textbox
Дозволені ролі ARIA Немає дозволених role
Інтерфейс DOM HTMLTextAreaElement

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
textarea
Chrome Full support Так
Edge Full support 12
Firefox Full support Так
footnote
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support Так
footnote
Opera Android Full support Так
Safari on iOS Full support Так
footnote
Samsung Internet Full support Так
autocomplete
Chrome Full support 66
Edge No support Ні
footnote
Firefox Full support 59
Internet Explorer No support Ні
Opera No support Ні
Safari Full support Так
footnote
WebView Android Full support 66
Chrome Android Full support 66
Firefox for Android Full support 59
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet Full support 9.0
cols
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
dirname
Chrome Full support 17
Edge Full support 79
Firefox No support Ні
Internet Explorer No support Ні
Opera Full support 12.1
Safari Full support 6
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android No support Ні
Opera Android Full support 12.1
Safari on iOS Full support 6
Samsung Internet Full support 1.0
disabled
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
form
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
maxlength
Chrome Full support 4
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 5
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 5
Samsung Internet Full support 1.0
minlength
Chrome Full support 40
Edge Full support 17
Firefox Full support 51
Internet Explorer No support Ні
Opera Full support 27
Safari Full support 10.1
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 51
Opera Android Full support 27
Safari on iOS Full support 10.3
Samsung Internet Full support 4.0
name
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
placeholder
Chrome Full support 4
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 5
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 5
Samsung Internet Full support 1.0
Line breaks in placeholder
Chrome Full support 36
Edge Full support 12
Firefox Full support 59
Internet Explorer Full support 10
Opera Full support 23
Safari No support Ні
WebView Android Full support 37
Chrome Android Full support 36
Firefox for Android Full support 59
Opera Android Сумісність невідома; будь ласка, оновіть. ?
Safari on iOS No support Ні
Samsung Internet Full support 3.0
readonly
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
required
Chrome Full support 4
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 5
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 5
Samsung Internet Full support 1.0
rows
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 4
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 3
Samsung Internet Full support 1.0
spellcheck
Chrome Full support Так
Edge Full support 12
Firefox Full support Так
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support Так
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
wrap
Chrome Full support 16
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 6
Opera Full support 12.1
Safari Full support 6
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 12.1
Safari on iOS Full support 6
Samsung Internet Full support 1.0

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