Загрузка...

Textarea в HTML

Ранее form="id" и form* отвечали за владение и маршрутизацию отправки. Textarea — другая задача: многострочное поле для сообщений и заметок. Однострочный input плохо подходит для абзацев. Берите textarea, когда нужно больше одной строки.

Зачем нужен textarea

Контакты, тикеты, био и отзывы требуют прокручиваемой высоты. Textarea отправляет текст одним именованным полем. Label, name и подсказки размера всё ещё нужны — но содержимое живёт между тегами, не в value как у input.

Прямой ответ

1) Напишите textarea с id, name, rows. 2) Свяжите label через for. 3) Текст по умолчанию между тегами — не value. 4) Опционально: placeholder, maxlength, readonly, disabled, required, wrap. 5) Многострочный ввод — не ассоциация form= прошлой лекции.

📊 Textarea attributes beginners use

Attribute Role Beginner tip
name Submit key Required if the text should post with the form
id Label hook Match label for= for accessible naming
rows Visible height hint Lines of height before scrolling
cols Visible width hint Prefer CSS width for responsive layouts
placeholder Soft hint Disappears when the user types
maxlength Character cap Browser-enforced upper bound
readonly / disabled Lock vs mute readonly still submits; disabled usually does not
wrap Soft/hard wrap Affects how line breaks are submitted (soft vs hard)

Форма отзыва: поле сообщения

Короткий feedback держит email как однострочный input и сообщение как textarea. Стартовый текст между тегами.

Labeled feedback textarea

html 
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>

<button type="submit">Send feedback</button>
</form>

Читаем демо отзыва

  • Многострочный контроль — textarea, не input
  • id совпадает с label for
  • name ключует отправляемый абзац
  • rows/cols намекают на размер
  • Текст по умолчанию между тегами
  • Держите labels ясными
  • form= здесь не нужен — поля внутри form

Размер, лимиты и wrap

Второе демо: био с maxlength, wrap=soft и CSS вместо cols. readonly на сводке только для чтения.

Bio size limits and readonly note

html 
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>

<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>

Читаем демо размера

  • maxlength ограничивает длину
  • wrap=soft для визуальных переносов без hard
  • CSS width и resize уточняют
  • readonly видно, но не правят
  • name всё ещё нужен для отправки
  • дальше: select для выбора из списка

Выбирать textarea или input

  • Короткая строка: input
  • Абзацы/сообщения: textarea
  • Размер через rows и CSS; cols скорее legacy
  • Содержимое по умолчанию между тегами — не value
  • Всегда label и name
  • Вкладывайте в form когда можно
  • Не путать с formaction/владением

Практика — собрать и изменить размер

  1. Скопируйте feedback; смените текст между тегами
  2. Уменьшите rows
  3. Добавьте maxlength
  4. Замените cols на CSS width
  5. Кратко попробуйте value и уберите
  6. Фраза: textarea между тегами; input с value
  7. Списки — в следующем select

Частые ошибки

  • Текст по умолчанию в value вместо между тегами
  • Забыть name
  • Без label
  • Однострочный input когда нужны строки
  • Путаница с form=/formaction
  • Только cols для адаптивной ширины
  • disabled вместо readonly

Итог

  • textarea = многострочный текст
  • label и обычно name
  • Текст по умолчанию между тегами
  • rows/CSS; опционально maxlength, placeholder, readonly
  • Не атрибуты связи с формой прошлой лекции
  • Далее: select

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 54 из 68
Html Урок