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

{{HTMLSidebar}}

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

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

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

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

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

Атрибути

Цей елемент включає глобальні атрибути.

autocomplete

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

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

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

autocorrect

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

on

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

off

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

autofocus

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

cols

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

disabled

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

form

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

maxlength

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

minlength

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

name

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

placeholder

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

Примітка: Заповнювач слід використовувати лише для демонстрування типу даних, котрий повинен бути введений у форму; заповнювачі не замінюють доброго елемента <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;
}

Приклади

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

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

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

Результат

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

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

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

Результат

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

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

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

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

Результат

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

Disabled і readonly

Цей приклад демонструє два елементи <textarea>, один з яких має disabled, а інший – readonly. Пограйтесь з обома – і побачите різницю в поведінці: елемент disabled не можна жодним чином вибрати (а його значення – не подається), натомість елемент readonly можна вибрати, а його вміст – скопіювати (а ще – його значення подається); лишень не можна редагувати цей вміст.

Примітка: У браузерах, відмінних від Firefox, як то хромі, вміст текстової області з disabled може бути доступним для вибору й копіювання.

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

Результат

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

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

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

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

Інші формові елементи:

• <form>
• <button>
• <datalist>
• <legend>
• <label>
• <select>
• <optgroup>
• <option>
• <input>
• <keygen>
• <fieldset>
• <output>
• <progress>
• <meter>