Тег является одним из стандартных HTML-тегов, который используется для создания многострочного текстового поля в веб-формах. Это поле позволяет пользователям вводить текст, который может занимать несколько строк, что делает его особенно полезным для ввода больших объемов информации, таких как комментарии, сообщения или любые другие текстовые данные.
Синтаксис тега
<textarea name="имя" rows="число" cols="число">Текст по умолчанию</textarea>
В этом примере:
- name – это атрибут, который указывает имя текстового поля, используемое для отправки данных на сервер;
- rows – количество строк, отображаемых в текстовом поле;
- cols – количество символов, отображаемых в каждой строке.
Также можно указать текст по умолчанию, который будет отображаться внутри текстового поля, если оно пустое. Например:
<textarea name="comments" rows="5" cols="30">Введите ваши комментарии здесь...</textarea>
Это создаст текстовое поле с 5 строками и шириной, достаточной для отображения 30 символов.
Атрибуты тега
- placeholder – текст, который будет отображаться в поле до тех пор, пока пользователь не начнет вводить данные;
- required – указывает, что поле обязательно для заполнения перед отправкой формы;
- readonly – делает поле доступным только для чтения, запрещая пользователю вносить изменения;
- disabled – отключает поле, делая его недоступным для ввода;
- maxlength – ограничивает максимальное количество символов, которые можно ввести в текстовое поле;
- wrap – определяет, как текст будет переноситься внутри поля (значения могут быть soft или hard).
Пример использования тега
<form action="submit.php" method="post">
<label for="message">Ваше сообщение:</label>
<textarea name="message" rows="10" cols="50" placeholder="Введите ваше сообщение здесь..." required></textarea>
<br>
<input type="submit" value="Отправить">
</form>
В этом примере создается форма, в которой пользователю предлагается ввести сообщение. Поле сообщения имеет размер 10 строк и 50 столбцов, а также текст по умолчанию и требование к заполнению.
Стилизация текстового поля
textarea {
width: 100%;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
}
Этот код задает полное использование ширины контейнера, высоту 200 пикселей, рамку и внутренние отступы для лучшего визуального восприятия.
Важно отметить, что текстовое поле
Тег textarea широко используется во многих веб-приложениях, так как позволяет удобно вводить и редактировать текстовую информацию. Если вы разрабатываете формы на своем сайте, обязательно учитывайте необходимость использования многострочных текстовых полей для улучшения пользовательского опыта.