<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>
є заміщеним елементом: він має природні розміри, як растрове зображення. Усталено його значення 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;
}
Результат
Технічний підсумок
Категорії вмісту | Потоковий вміст, оповідальний вміст, інтерактивний вміст, перелічений, підписний, скиданий і подавальний формовий елемент. |
---|---|
Дозволений вміст | Текст |
Пропуск тега | Немає; і початковий, і кінцевий теги – обов'язкові. |
Дозволені батьківські елементи | Усі елементи, що приймають оповідальний вміст. |
Неявна роль ARIA |
textbox
|
Дозволені ролі ARIA | Немає дозволених role |
Інтерфейс DOM | HTMLTextAreaElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-textarea-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
textarea
|
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 Так |
autocomplete
|
Chrome Full support 66 | Edge No support Ні | Firefox Full support 59 | Internet Explorer No support Ні | Opera No support Ні | Safari Full support Так | 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 |
Дивіться також
- Інші формові елементи: