Многострочные поля ввода (textarea)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 20
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер HTML
В этом наборе заданий мы погрузимся в работу с элементом `<textarea>`. Этот тег — ваш главный инструмент, когда нужно создать поле для ввода нескольких строк текста. Он идеально подходит для форм обратной связи, полей для комментариев, написания отзывов или любых других мест, где одного простого поля `<input>` недостаточно. Мы начнем с самого простого — создания базового многострочного поля. Затем, шаг за шагом, будем его усложнять: добавим текст-подсказку, научимся управлять его размерами с помощью специальных атрибутов, свяжем его с подписью для удобства пользователей и доступности. Также мы рассмотрим, как сделать поле обязательным для заполнения, заблокировать его для редактирования и даже ограничить количество вводимых символов. Эти упражнения помогут вам уверенно использовать `<textarea>` в своих проектах.
Список тем

Создание многострочного поля

id: 37850_textarea-1

Давайте начнем с основ. Ваша задача — создать простое многострочное поле для ввода текста. В HTML для этого существует специальный парный тег.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<input1></input1>
Для создания многострочного текстового поля используется тег `<textarea>`. Так как это парный тег, не забудьте добавить закрывающую часть `</textarea>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление текста-подсказки

id: 37850_textarea-2

Пустое поле может сбивать с толку. Добавьте в `<textarea>` текст-подсказку, который будет исчезать, как только пользователь начнет вводить текст. Это улучшает пользовательский опыт.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea input1="Оставьте ваш комментарий здесь..."></textarea>
Чтобы добавить текст-подсказку внутрь поля ввода, используется атрибут `placeholder`. Его значением будет строка с текстом, который вы хотите показать.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Установка размеров поля

id: 37850_textarea-3

Иногда нужно задать начальный размер для текстового поля. Установите высоту поля в 5 строк и ширину в 30 символов, используя для этого специальные атрибуты.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
HTML
<textarea input1="5" input2="30"></textarea>
Для управления размерами `<textarea>` используются атрибуты `rows` (количество строк, высота) и `cols` (количество столбцов, ширина).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связь с подписью (label)

id: 37850_textarea-4

Чтобы форма была удобной и доступной, нужно связывать текстовые поля с их подписями. Свяжите `<label>` с `<textarea>` так, чтобы при клике на подпись курсор автоматически устанавливался в поле.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<label input1="user-feedback">Ваш отзыв:</label>
<textarea input2="user-feedback"></textarea>
Связь между `<label>` и полем ввода устанавливается с помощью атрибутов `for` и `id`. Значения этих атрибутов должны совпадать. Атрибут `for` ставится в тег `<label>`, а `id` — в тег `<textarea>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Имя поля для отправки на сервер

id: 37850_textarea-5

Чтобы данные из поля могли быть отправлены на сервер при отправке формы, ему необходимо присвоить имя. Добавьте полю атрибут `name` со значением `message`.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea id="msg" input1="message" placeholder="Введите сообщение"></textarea>
Для идентификации данных поля на сервере используется атрибут `name`. Когда форма отправляется, данные из этого поля будут переданы под именем, указанным в этом атрибуте.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательное поле

id: 37850_textarea-6

Сделайте текстовое поле обязательным для заполнения. Браузер не позволит отправить форму, пока пользователь не введет в это поле хотя бы какой-то текст.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea:invalid {
  border-color: #d9534f;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea placeholder="Это поле нельзя оставить пустым" input1></textarea>
Чтобы сделать поле обязательным, добавьте ему булев атрибут `required`. Ему не нужно значение, достаточно простого присутствия.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение длины текста

id: 37850_textarea-7

Часто бывает нужно ограничить максимальное количество символов, которое пользователь может ввести. Установите для поля ограничение в 150 символов.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea input1="150" placeholder="Максимум 150 символов"></textarea>
Для ограничения максимального количества символов в `<textarea>` используется атрибут `maxlength`. Его значением должно быть целое положительное число.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заблокированное поле

id: 37850_textarea-8

Иногда поле нужно отобразить, но запретить пользователю взаимодействовать с ним. Сделайте `<textarea>` неактивным. Его нельзя будет сфокусировать или редактировать.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea input1>Это поле заблокировано и его нельзя редактировать.</textarea>
Чтобы полностью заблокировать элемент формы, используется булев атрибут `disabled`. Данные из такого поля не отправляются на сервер.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поле только для чтения

id: 37850_textarea-9

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

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f4f7f9;
}

textarea[readonly] {
  background-color: #f9f9f9;
}

textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 16px;
}
HTML
<textarea input1>Этот текст можно скопировать, но не изменить.</textarea>
Для создания поля 'только для чтения' используется булев атрибут `readonly`. В отличие от `disabled`, такое поле можно сфокусировать, а его значение отправляется вместе с формой.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру