Основа для Створення Форми

Елемент HTML <form> є основним будівельним блоком для створення інтерактивних форм на веб-сторінці. Він служить контейнером для всіх елементів форми. Розглянемо приклад базової форми:

Примітка

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

Пояснення атрибутів форми:

• Атрибут name надає чіткий ідентифікатор для форми на веб-сторінці. І сервер, і клієнт використовують цей ідентифікатор для обробки даних форми. Ім'я форми може містити цифри, підкреслення, тире та символи англійського алфавіту, але не повинно містити пробілів;
• autocomplete визначає, чи можуть веб-браузери заповнювати поля форми автоматично. Він може бути встановлений у значення "on" або "off" і застосований до окремих елементів форми;
• novalidate вказує, що браузери не повинні виконувати перевірку полів форми. Це може бути корисно, якщо ви хочете обробляти валідацію вручну за допомогою JavaScript;
• Метод method визначає HTTP-метод, який використовується для відправки даних форми на сервер. Два найпоширеніші методи - це GET і POST. Ця тема буде детально розглянута в курсі JavaScript.

Форма включає наступні елементи форми:

• Елемент <input> дозволяє користувачам вводити різні типи даних, такі як текст, числа, дати тощо. У цьому прикладі ми використовуємо type="email" для поля електронної пошти і type="password" для поля пароля;
• Елемент <label> допомагає організувати і структурувати форму. Він також надає мітку для кожного поля введення, вказуючи, за що воно відповідає;
• Елемент <button> з type="submit" використовується для відправки даних форми на сервер при натисканні. За замовчуванням, коли натискається кнопка submit, дані з полів вводу відправляються на сервер, а веб-сторінка перезавантажується. Однак цю поведінку можна змінити за допомогою JavaScript.

Примітка

Коли користувач натискає <button type="submit">, всі дані, введені в input елементи, надсилаються на сервер, а веб-сторінка перезавантажується. Це поведінка за замовчуванням.