Тег <textarea>: многострочный текст
Как добавить поле сообщения, задать начальное значение и сохранить удобство редактирования.
Зачем нужен этот элемент
textarea предназначена для текста из нескольких строк: сообщения, комментария или кода. В отличие от input, начальное значение записывается между открывающим и закрывающим тегами, а не в атрибут value.
Указывайте связанный label и name для отправки. Начальную высоту удобно задать rows, а внешние размеры — CSS. Не запрещайте пользователю изменение высоты без причины: длинное сообщение удобнее читать в увеличенном поле.
Синтаксис и пример
<label for="message">Ваш вопрос</label><br>
<textarea id="message" name="message" rows="4" maxlength="1000" style="width:100%;max-width:400px;resize:vertical">Как начать изучать CSS?</textarea>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| rows | Количество видимых строк как начальный ориентир. |
| maxlength | Клиентское ограничение длины. |
| resize | CSS-настройка ручного изменения размера. |
| Содержимое | Начальный текст между тегами. |
Частая ошибка
Отступы и переносы внутри textarea могут стать частью начального текста. Не добавляйте форматирование исходника, если оно не должно попадать в поле.
Небольшая практика
Введите несколько абзацев и увеличьте высоту поля. Затем задайте max-width: 100%, чтобы оно не выходило за контейнер.
Разберите также <label>, <form>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.