Многострочное поле textarea (HTML)

Тег <textarea> нужен, когда пользователю надо ввести не одну строчку, а целый абзац или больше — комментарий, описание, код, текст статьи. Главная сложность тут не в том, чтобы «сделать побольше», а в том, чтобы размер был предсказуемым, не ломал соседние элементы и нормально вёл себя на мобильных.

Что вообще можно задать у textarea

Есть два пути: через HTML‑атрибуты и через CSS. Они решают разные задачи.

• Атрибуты rows и cols — это «базовый размер» для старых браузеров и для семантики. Они задают примерное количество строк и символов в строке.
• **CSS-размеры (width, height, max-width и т. д.) **— это то, что реально управляет вёрсткой.

Если вы делаете современную вёрстку, CSS важнее. Но rows и cols всё равно полезно оставить: они дают понятный базовый размер, если стили по какой‑то причине не загрузятся.

<textarea name="comment" rows="5" cols="40"></textarea>

Как задать высоту: строки vs пиксели

Вариант 1: фиксированная высота в CSS

Самый простой вариант для форм, где размер должен быть одинаковым всегда:

textarea {
  height: 120px;
  width: 100%;
}

Плюсы: предсказуемо, легко контролировать в сетке. Минусы: если шрифт у пользователя крупнее, строки могут «сплющиться» или текст не влезет в одну строку.

Вариант 2: высота через line-height и em

Более гибкий вариант: высота привязана к размеру шрифта:

textarea {
  line-height: 1.5;
  height: calc(1.5em * 5); /* 5 строк */
  width: 100%;
  box-sizing: border-box;
}

Так поле будет масштабироваться вместе с размером шрифта. Это особенно важно для доступности.

Важно: всегда ставьте box-sizing: border-box. Иначе width: 100% будет включать padding и border, и поле вылезет за контейнер.

Ширина и адаптивность

Для форм почти всегда лучше делать ширину в процентах и ограничивать сверху:

textarea {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

Почему так:

• width: 100% — поле занимает всю ширину контейнера (удобно на мобильных).
• max-width — не даёт ему стать слишком широким на больших экранах.
• box-sizing: border-box — гарантирует, что padding и border не увеличат итоговую ширину.

Не ломаем вёрстку: частые ошибки и решения

Ошибка 1: жёсткие пиксели без ограничений. Поле становится слишком широким на больших экранах и слишком узким на маленьких. Решение — проценты + max-width.

Ошибка 2: забыли box-sizing. Из‑за padding поле вылезает за границы родителя. Решение — глобально или локально:

*, *::before, *::after {
  box-sizing: border-box;
}

Ошибка 3: textarea внутри flex‑контейнера без ограничений. В Flexbox элемент может растянуться непредсказуемо. Решение:

.form-group {
  display: flex;
  flex-direction: column;
}
 
textarea {
  width: 100%;
  min-width: 0; /* важно для Flex: предотвращает переполнение */
  height: 200px;
}

Атрибут min-width: 0 нужен, чтобы width: 100% корректно работал внутри Flex.

Ошибка 4: нет вертикального скролла при большом вводе. Если пользователь введёт много текста, строки могут растянуться и сломать сетку. Решение: разрешите прокрутку и ограничьте высоту:

textarea {
  max-height: 400px;
  overflow-y: auto;
}

Теперь поле не станет бесконечно высоким, но пользователь сможет прокрутить содержимое.

Запрещаем или разрешаем изменение размера

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

Чтобы запретить изменение размера:

textarea {
  resize: none;
}

Чтобы разрешить только по вертикали (чтобы не ломалась ширина колонок):

textarea {
  resize: vertical;
}

Чтобы разрешить по горизонтали (редко нужно):

textarea {
  resize: horizontal;
}

Чаще всего используют resize: vertical — пользователь может подстроить высоту под свой текст, но сетка не ломается.

Пример готовой формы (HTML + CSS)

<form>
  <label for="comment">Комментарий:</label>
  <textarea id="comment" name="comment" rows="6" cols="40" placeholder="Расскажите подробнее…"></textarea>
</form>

form {
  max-width: 600px;
}
 
label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
 
textarea {
  width: 100%;
  max-width: 100%;
  height: 160px;
  max-height: 400px;
  resize: vertical;
  padding: 12px;
  line-height: 1.5;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}

Такой вариант:

• Не сломает вёрстку на любом экране.
• Будет масштабироваться с размером шрифта.
• Позволит пользователю подстроить высоту, но не ширину.
• Не выйдет за пределы контейнера.

Итог

1. Всегда ставьте box-sizing: border-box.
2. Делайте ширину в процентах (width: 100%) и ограничивайте сверху (max-width).
3. Высоту задавайте либо в px, либо через em/line-height, чтобы она была предсказуемой.
4. Ограничьте максимальную высоту (max-height) и включите скролл (overflow-y: auto).
5. Управляйте изменением размера: чаще всего подходит resize: vertical.
6. Оставляйте rows и cols в HTML как базовый размер.
7. Связывайте textarea с <label> через for и id — это важно для доступности и для удобства клика по подпис