Форми

Форми є ключовим інструментом для збору даних користувача та їх надсилання на сервер для обробки. Вони складаються з різних елементів форми, які дозволяють користувачам вводити дані. Однак у цьому курсі ми не будемо надсилати жодних даних на сервер, оскільки це потребує додаткових знань, що виходять за межі цього курсу.

У всіх прикладах коду використовується атрибут onsubmit="return false". Цей атрибут за замовчуванням запобігає надсиланню форми на сервер.

Створення форм

Використовуйте тег <form>, щоб створити інтерактивну форму.

<form>
  <!-- Form elements go here -->
</form>

Елементи форми

Форми містять мітки та різні типи полів введення (текст, пароль, email тощо). Мітки пов'язують текст із полями введення та підвищують доступність. Більше про мітки та типи полів введення ви дізнаєтесь у наступних розділах.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Надсилання форми

Форма надсилається за допомогою кнопки з type="submit".

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Ось базовий приклад форми.