Как ввести многострочный текст в input type='text' HTML

Быстрый ответ

Для многострочного ввода стоит использовать HTML-элемент <textarea>, а не <input type="text">. Размер этого элемента можно настраивать через атрибуты rows и cols либо точнее – с помощью CSS:

<textarea rows="4" cols="50">Введите ваш текст здесь...</textarea>

Эффективность использования <textarea>

Элемент <textarea> позволяет вводить текст более одной строки и автоматически изменять свои размеры в соответствии с введенным содержимым. Чтобы сделать расположение элемента более гибким, можно задать ширину в процентах с помощью width: 100%;, что улучшает взаимодействие с текстовыми полями.

Улучшение <textarea>

Применение CSS и JavaScript к элементу <textarea> позволяет расширить возможности для настройки и взаимодействия:

• Контроль размеров: Параметры width и height в CSS дают возможность точно определить внешний вид поля ввода.
• Автоматическое изменение высоты: Функция auto_height(this) в событии onInput позволяет адаптировать высоту поля в соответствии с объемом текста в реальном времени.

function auto_height(elem) {
  // Сбрасываем высоту, чтобы она соответствовала текущему объему текста
  elem.style.height = '1px';
  elem.style.height = `${elem.scrollHeight}px`;
}

Чтобы функция JavaScript сработала, нужно добавить обработчик события к элементу <textarea>:

<textarea rows="1" onInput="auto_height(this)"></textarea>

Визуализация

<input type="text" /> предназначен для однострочного ввода текста. Это идеальное решение для коротких записей вроде "Здесь был Йода!":

Однострочный ввод: "Здесь был Йода!"

Когда требуется передать больший объем информации, на помощь приходит <textarea>:

<textarea rows="4" cols="50">
"Делай или не делай — нет попытки.
По-настоящему велико — умение видеть мир глазами ребенка.
Джедай использует Силу для познания и защиты, никогда — для нападения."
</textarea>

Вкратце о различиях:

Однострочный ввод = Короткое сообщение 🦉
Многострочный ввод = Обширный рассказ 🦖

Работаем с <textarea>

С <textarea> можно работать весьма гибко. Представляем несколько примеров использования:

Адаптивность к размерам экрана

Используйте процентные значения ширины в CSS для масштабирования <textarea> по размеру окна браузера, исключив жесткие ограничения атрибутов.

Подробнее об этом расскажет наш спикер на видео

Начальные параметры отображения

Настройте миниатюрное поле ввода с <textarea>, задав атрибут rows с минимальным значением и возможностью динамического расширения с помощью JavaScript для улучшения доступности и внешнего вида.

Кастомизация стилей

Обеспечьте единство и читаемость дизайна текстовых полей, применив к <textarea> свой CSS-класс, например .auto_height { /* стили */ }, для интеграции в общую стилистику формы.

Полезные материалы

1. <textarea>: Текстовый элемент – HTML: HyperText Markup Language | MDN — Подробное описание HTML-элемента <textarea>.
2. HTML textarea tag – W3Schools — Руководство по работе с многострочным текстовым вводом.
3. The W3C Markup Validation Service — Инструмент для проверки корректности HTML-кода на соответствие стандартам.
4. HTML Standard — Официальная спецификация HTML-элемента <input>.
5. WebAIM: Создание доступных форм – Доступные элементы управления формами — Рекомендации по созданию доступных элементов управления форм, включая <textarea>.