Багаторядковий текст у формах: як працює HTML-елемент Textarea

Що таке <textarea>?

<textarea> – це HTML-елемент, який дозволяє користувачам вводити довгі текстові повідомлення. На відміну від звичайного текстового поля (<input type="text">), яке призначене для коротких відповідей, <textarea> надає більше місця для вводу тексту.

Основна структура

Ось як виглядає базовий приклад <textarea>:

<form>
  <label for="comments">Ваші коментарі:</label>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
  <input type="submit" value="Відправити">
</form>

Атрибути

• rows: Визначає кількість рядків текстової області.
• cols: Визначає кількість символів у кожному рядку.
• name: Ім’я елемента форми, яке буде використовуватись при відправці даних.
• id: Унікальний ідентифікатор для елемента, корисний для зв’язування з <label>.

Як працює <textarea>?

Коли користувач вводить текст у <textarea>, цей текст зберігається всередині тегу при відправці форми. Наприклад, якщо ви ввели “Привіт, світ!” у нашому прикладі, дані будуть відправлені на сервер разом з ім’ям comments.

Приклад з попередньо заповненим текстом

Можна також додати текст за замовчуванням, який буде відображений у текстовій області при завантаженні сторінки:

<form>
  <label for="comments">Ваші коментарі:</label>
  <textarea id="comments" name="comments" rows="4" cols="50">Цей текст з'явиться за замовчуванням.</textarea>
  <input type="submit" value="Відправити">
</form>

Стилізація <textarea>

Ви можете змінювати зовнішній вигляд <textarea> за допомогою CSS. Наприклад:

<style>
  textarea {
    border: 2px solid #000;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
  }
</style>

<form>
  <label for="comments">Ваші коментарі:</label>
  <textarea id="comments" name="comments" rows="4" cols="50">Цей текст з'явиться за замовчуванням.</textarea>
  <input type="submit" value="Відправити">
</form>

Це додасть рамку, відступи та змінить шрифт для вашого текстового поля.

Переваги використання <textarea>

• Гнучкість: Ви можете легко налаштувати розмір текстової області під потреби вашого проекту.
• Зручність: Користувачі можуть вводити великий обсяг тексту без обмежень.
• Легкість у використанні: Простий у реалізації та налаштуванні.