Основні елементи HTML-форми

Вивчаємо базові елементи HTML-форм: form, input та button для створення полів введення і кнопок.

Основні елементи HTML-форми

HTML-форми використовуються для отримання даних від користувача. За допомогою форм можна створювати поля введення, кнопки, пошук, авторизацію та інші елементи взаємодії.

form — основний контейнер форми.
input — поле для введення даних.
button — кнопка для виконання дії.

Тег form

Тег form створює область, у якій розміщуються всі елементи форми. Він об'єднує поля введення і кнопки.

<form>
  ...
</form>

Тег input

Тег input створює поле введення. За допомогою атрибута type можна змінювати його призначення.

<form>
  <input type="text">
</form>

type="text" — звичайне текстове поле.
type="password" — поле для пароля.
type="email" — поле для електронної пошти.
type="number" — поле для чисел.

Тег button

Тег button створює кнопку. При натисканні вона може відправляти форму або виконувати JavaScript-код.

<button>
  Відправити
</button>

Приклад простої форми

<form>
  <input type="text" placeholder="Ваше ім'я">

  <input type="email" placeholder="Email">

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

❗ Важливо:

Тег form сам по собі не створює красиву форму. Зовнішній вигляд задається за допомогою CSS.

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

📌 Завдання:

№1. Створіть форму.
№2. Додайте текстове поле input.
№3. Додайте кнопку button.
№4. Зробіть просту форму реєстрації.

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

<form>

</form>

💡 Показати підказку

Всередині form потрібно розмістити input для введення даних та button для відправлення форми.

✅ Показати відповідь

<form>
  <input 
    type="text"
    placeholder="Ім'я"
  >

  <input
    type="email"
    placeholder="Email"
  >

  <button>
    Зареєструватися
  </button>
</form>