Как ввести многострочный текст в 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 { /* стили */ }
, для интеграции в общую стилистику формы.
Полезные материалы
- <textarea>: Текстовый элемент – HTML: HyperText Markup Language | MDN — Подробное описание HTML-элемента
<textarea>
. - HTML textarea tag – W3Schools — Руководство по работе с многострочным текстовым вводом.
- The W3C Markup Validation Service — Инструмент для проверки корректности HTML-кода на соответствие стандартам.
- HTML Standard — Официальная спецификация HTML-элемента
<input>
. - WebAIM: Создание доступных форм – Доступные элементы управления формами — Рекомендации по созданию доступных элементов управления форм, включая
<textarea>
.