Многострочное поле Textarea

Многострочное поле — это поле ввода, которое позволяет работать с несколькими строками текста.

Когда использовать

Используйте многострочное поле для ввода длинных строк и больших текстов. Например, для паспортных данных, места рождения или комментария пользователя. Если значение, которое вводит пользователь, чаще всего состоит из 1–3 слов, следует использовать обычное поле ввода.

Описание работы

Минимальная высота многострочного поля ввода — 3 строки, чтобы пользователю было понятно, что это не инпут, и можно вводить большой текст. Если в форме много таких полей, можно ради экономии пространства уменьшить высоту каждого поля до 2 строк.

По мере ввода высота поля автоматически увеличивается и уменьшается так, что всегда свободна одна строка. При достижении 15 строк (чуть больше половины экрана) поле перестает расти и появляется полоса прокрутки. Это нужно, чтобы пользователь видел весь текст без прокрутки, и при этом по умолчанию поле было бы не очень высоким.

Пользователь вводит символ на последней свободной строке, добавляется ещё одна строка:

Название

Требования к названию многострочного поля такие же, как и у однострочного. Если назначение многострочного поля очевидно, то название можно разместить внутри поля в виде подсказки:

Размер

Правильно задавать высоту поля через html-атрибут «rows». Неправильно задавать высоту через css-аттрибут «height», потому что при изменении размера шрифта средствами браузера высота поля не увеличится, и им будет неудобно пользоваться.

Ширина поля должна быть в пределах 30–80 символов, то есть около 250–600 px. Узким полем неудобно пользоваться из-за частого переноса строк. Широкое поле допустимо только в WYSIWYG-редакторе.

Валидация

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

Дизайн

Состояния: