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

Однострочное поле ввода подходит для имени, телефона или e-mail. Для всего, что длиннее фразы, нужен textarea: в нём можно нажимать Enter, текст переносится по словам, а при необходимости появляется прокрутка. Это стандартное поле для «Комментария к заказу», текста отзыва, описания задачи в форме заявки.

В отличие от input, у textarea нет атрибута value: значение по умолчанию пишут между открывающим и закрывающим тегами. Отсюда частая ошибка — отступы и переносы внутри тега тоже попадают в поле.

Пример разметки

<label for="msg">Опишите задачу</label>
<textarea id="msg" name="message" rows="5"
  maxlength="2000" required></textarea>

<style>
  textarea { width: 100%; min-height: 6em; resize: vertical; }
</style>

• rows и cols задают начальный размер в строках и символах, но ширину обычно задают CSS.
• maxlength и minlength ограничивают длину текста.
• wrap="hard" вставляет реальные переносы при отправке там, где строка перенеслась визуально; по умолчанию soft.
• Свойство CSS resize разрешает или запрещает растягивать поле мышью.

В браузерах на Chromium появилось свойство field-sizing: content, при котором поле растёт по мере набора текста. Поддерживается оно пока не везде, поэтому остальным браузерам нужен запасной вариант с фиксированной высотой или небольшим скриптом.

Как обработать на сервере

Перевод строки браузер отправляет как пару символов \r\n. При выводе введённого текста его сначала экранируют, а затем превращают переносы в теги: в PHP это nl2br( esc_html( $text ) ) для WordPress. Для очистки в WordPress есть sanitize_textarea_field() — в отличие от sanitize_text_field(), она сохраняет переносы строк.

Чего избегать

• Подсказка только в placeholder без метки поля: при наборе текста она исчезает.
• resize: none без запаса высоты — длинный текст становится неудобно проверять.
• Крошечное поле в две строки там, где ждут развёрнутый ответ: человек подсознательно пишет меньше.

Куда дальше попадает текст из поля — на почту, в CRM или 1С, — описано в статье о приёме заявок с сайта.