Тег <textarea>

Тег <textarea> (укр. – “текстове поле”) використовується для створення багаторядкових полів введення в HTML-формах, де користувач може ввести великі обсяги тексту. Це поле особливо корисне для введення коментарів, повідомлень або описів, коли потрібно більше простору для введення.

Атрибути

Специфічні атрибути

• rows — визначає кількість видимих рядків для поля вводу. Наприклад:

<textarea rows="4" name="comment"></textarea>

• cols — визначає кількість символів у одному рядку поля введення. Наприклад:

<textarea cols="50" name="description"></textarea>

• placeholder — текст-заповнювач, який відображається у порожньому полі введення, поки користувач не почне вводити текст. Наприклад:

<textarea placeholder="Введіть ваш коментар"></textarea>

• required — робить поле обов’язковим для заповнення перед відправленням форми. Наприклад:

<textarea name="message" required></textarea>

• readonly — забороняє змінювати текст у полі, роблячи його лише для читання. Наприклад:

<textarea name="info" readonly>Це лише для читання.</textarea>

• disabled — відключає поле, роблячи його недоступним для взаємодії. Наприклад:

<textarea name="feedback" disabled>Це поле неактивне.</textarea>

• maxlength — встановлює максимальну кількість символів, які можна ввести в поле. Наприклад:

<textarea maxlength="500" name="feedback"></textarea>

• wrap — вказує, як повинні оброблятися переноси рядків в тексті:
  • soft — переносити рядки лише в межах вікна поля.
  • hard — переносити рядки, зберігаючи переноси на сервері після відправки форми. Наприклад:

<textarea wrap="hard" name="message"></textarea>

• name — задає ім’я елемента для передачі даних на сервер. Наприклад:

<textarea name="user-message"></textarea>

Глобальні атрибути

Тег <textarea> підтримує всі глобальні атрибути HTML, такі як:

• id — унікальний ідентифікатор для елемента. Наприклад:

<textarea id="user-feedback" name="feedback"></textarea>

• class — клас для застосування стилів через CSS. Наприклад:

<textarea class="form-input" name="comments"></textarea>

• style — інлайн-стилізація елемента. Наприклад:

<textarea style="border: 1px solid black;" name="note"></textarea>

• title — опис елемента, що може бути відображений при наведенні. Наприклад:

<textarea title="Введіть ваші думки тут"></textarea>

• lang — визначає мову для контенту. Наприклад:

<textarea lang="uk" name="feedback"></textarea>

Приклад використання

<form>
  <label for="comment">Ваш коментар:</label>
  <textarea id="comment" name="comment" rows="4" cols="50" placeholder="Напишіть ваш коментар тут" required></textarea>

  <label for="message">Повідомлення:</label>
  <textarea id="message" name="message" rows="6" cols="60" placeholder="Поділіться вашим досвідом" maxlength="500"></textarea>

  <button type="submit">Надіслати</button>
</form>

Додаткові моменти

• Тег <textarea> часто використовується для введення великих обсягів тексту, тому важливо забезпечити користувачу можливість редагувати та переглядати текст без обмежень.
• Тег <textarea> не має атрибута value, на відміну від інших полів введення. Його значення повинно бути всередині самого елемента між відкриваючим і закриваючим тегами.
• Поля введення <textarea> можна стилізувати за допомогою CSS, додаючи такі властивості, як resize, щоб дозволити/заборонити користувачу змінювати розмір поля.
• Подібно до інших елементів форми, поле <textarea> можна перевіряти на правильність введених даних за допомогою атрибута required, а також за допомогою JavaScript, щоб додатково перевірити введений текст.
• Для забезпечення доступності важливо використовувати тег <label> із атрибутом for, що допомагає користувачам з обмеженими можливостями і покращує загальну зручність використання форми.