Атрибут rows тега <textarea>

Описание

Атрибут rows в теге <textarea> определяет видимую высоту текстового поля в строках текста. Это атрибут физического размера, влияющий на отображение элемента без прокрутки.

Пример использования:
<textarea rows="5"> Это текстовое поле отображает 5 строк текста без прокрутки. Попробуйте ввести несколько строк, чтобы увидеть поведение. </textarea>

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

  • 1 row ≈ высота одной строки текста в текущем шрифте
  • Минимальное допустимое значение - 1
  • Если не указан, браузер использует значение по умолчанию (обычно 2)
  • Реальная высота может отличаться в зависимости от CSS-стилей

Рекомендации:

  • Используйте вместе с cols для базовых размеров
  • Для точного контроля размеров лучше использовать CSS (height)
  • Выбирайте значение в зависимости от ожидаемого объема текста
  • Тестируйте отображение с разными шрифтами

Пример с адаптивным дизайном:

<style> .adaptive-textarea { width: 100%; min-height: calc(1.5em * 3); /* 3 строки */ max-height: 300px; resize: vertical; } </style> <textarea rows="3" class="adaptive-textarea"> Адаптивное текстовое поле с минимальной высотой в 3 строки </textarea>

Ограничения:

  • Неточность из-за различий в высоте строк
  • Может переопределяться CSS-свойствами
  • Не учитывает line-height в расчетах
  • Плохо адаптируется под мобильные устройства

Сравнение с CSS:

Характеристика Атрибут rows CSS height
Точность Приблизительная Точная
Адаптивность Нет Да
Зависимость от шрифта Сильная Слабая
Рекомендация Для простых случаев Для профессиональных решений

Пример хорошей практики:

<div class="textarea-wrapper"> <label for="description">Описание:</label> <textarea id="description" rows="4" style="min-height: calc(1.5em * 4);"> </textarea> <div class="hint">Рекомендуем 3-5 предложений</div> </div> <style> .textarea-wrapper { margin-bottom: 1rem; } .hint { font-size: 0.8em; color: #666; } </style>

Примечание: Для современных адаптивных интерфейсов:

  • Используйте CSS-свойства min-height и max-height
  • Рассмотрите единицы измерения em, rem, vh
  • Добавляйте возможность изменения размера (resize)
  • Используйте медиа-запросы для адаптации