HTML-тег <textarea>

HTML-тег <textarea> используется для определения многострочного поля ввода, в которое пользователи могут вводить большой объём текста. Он обычно используется в формах для комментариев, отзывов и в любых ситуациях, требующих расширенного ввода данных. В отличие от тега <input> с type="text" , тег <textarea> допускает перенос текста и предоставляет больше места для контента.

Тег <textarea> требует открывающего и закрывающего тега, а любой текст между ними служит содержимым по умолчанию.

Базовый синтаксис тега HTML <textarea>

Базовая структура элемента <textarea> следующая:

<textarea name="name" rows="rows" cols="cols">
    Default text goes here.
</textarea>

Атрибут name указывает имя поля, а rows и cols определяют видимый размер текстовой области.

Пример простого <textarea>

Вот пример простого <textarea> для отзывов пользователей:

<!DOCTYPE html>
<html>
    <body>
        <h2>Feedback Form</h2>
        <form>
            <label for="feedback">Your Feedback:</label>

            <textarea id="feedback" name="feedback" rows="4" cols="50">
Enter your feedback here...
            </textarea>


            <button type="submit">Submit</button>
        </form>
    </body>
</html>

Пояснение: <textarea> предоставляет многострочное поле ввода с 4 строками и 50 столбцами, содержащее по умолчанию текст-заполнитель.

Атрибуты HTML-тега <textarea>

Имя: Указывает имя текстовой области, используемой для отправки формы.
строки: определяет количество видимых строк текста.
cols: Определяет ширину текстовой области в символах.
Заполнитель: отображает текст-заполнитель, если текстовая область пуста.
maxlength: Указывает максимально допустимое количество символов.
обязательно: обеспечивает заполнение текстовой области перед отправкой формы.
только для чтения: делает текстовую область нередактируемой.
отключено: отключает текстовую область.
Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Пример с дополнительными атрибутами

Следующий пример включает различные атрибуты для лучшего контроля:

<!DOCTYPE html>
<html>
    <body>
        <h2>Contact Us</h2>
        <form>
            <label for="message">Message:</label>

            <textarea id="message" name="message" rows="6" cols="40" placeholder="Enter your message here..." maxlength="500" required></textarea>


            <button type="submit">Send</button>
        </form>
    </body>
</html>

Пояснение: В этом примере используются атрибуты placeholder , maxlength и required для расширения функциональности.

Стилизация тега <textarea> с помощью CSS

Элемент <textarea> можно стилизовать с помощью CSS для улучшения его внешнего вида:

<!DOCTYPE html>
<html>
    <head>
        <style>
            textarea {
                width: calc(100% - 20px);
                height: 150px;
                padding: 10px;
                font-family: Arial, sans-serif;
                font-size: 14px;
                border: 1px solid #ccc;
                border-radius: 5px;
                resize: vertical;
            }
        </style>
    </head>
    <body>
        <h2>Styled Textarea</h2>
        <textarea placeholder="Type your text here..."></textarea>
    </body>
</html>

Стилизация текстовой области Тег с помощью CSS

Результат: Текстовая область оформлена скругленными углами, отступами и изменяемыми размерами высоты для удобства использования.

Практическое применение тега <textarea>

Формы обратной связи: позволяют пользователям отправлять подробные отзывы или комментарии.
Системы обмена сообщениями: создайте поля ввода для написания сообщений или электронных писем.
Редакторы кода: используйте <textarea> для написания и редактирования фрагментов кода.
Динамический контент: динамическое заполнение и управление текстовыми областями с помощью JavaScript для интерактивных веб-приложений.