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

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

Для створення поля, у яке користувач може вводити кілька рядків тексту, використовується тег textarea.

На відміну від input, який використовується для короткого тексту, textarea дозволяє вводити великі об'єми інформації: повідомлення, коментарі, описи тощо.

Базовий синтаксис textarea

<textarea>
Текст всередині поля
</textarea>

Текст, який знаходиться між відкриваючим і закриваючим тегом textarea, буде показаний всередині поля.

Атрибути textarea

• rows — задає кількість рядків поля.
• cols — задає ширину поля у символах.
• placeholder — показує підказку всередині поля.
• name — ім'я поля для відправки форми.
• disabled — робить поле недоступним для введення.

Приклад багаторядкового поля

<form>
  <label for="message">
    Ваше повідомлення:
  </label>

  <textarea 
    id="message"
    name="message"
    rows="5"
    cols="30"
    placeholder="Введіть текст..."
  ></textarea>

</form>

Textarea у формах

Найчастіше textarea використовується у формах зворотного зв'язку, коментарях та анкетах.

<form>

  <label>
    Ім'я:
    <input type="text">
  </label>

  <br><br>

  <label>
    Коментар:
    <textarea
      rows="4"
      placeholder="Ваш коментар">
    </textarea>
  </label>

  <br><br>

  <button>
    Надіслати
  </button>

</form>

<textarea>
Текст за замовчуванням
</textarea>

Практичне завдання

<!-- Початковий код -->

<form>

</form>

<form>

  <label for="text">
    Повідомлення:
  </label>

  <textarea
    id="text"
    name="text"
    rows="5"
    cols="40"
    placeholder="Введіть повідомлення">
  </textarea>

</form>