Як створити HTML-форму (пояснення прикладів)

Форми використовуються для збору даних від користувачів, таких як контактна інформація, або для того, щоб дозволити користувачам взаємодіяти з веб-сайтом, наприклад, залишати коментарі чи виконувати пошук. У цій статті ми дізнаємося, як створити базову форму за допомогою HTML.

Структура HTML-форми

Форма HTML створюється за допомогою тегу. У цьому тегу ви можете мати різноманітні елементи введення, такі як текстові поля, кнопки, прапорці, перемикачі тощо.

сюди входять елементи введення

Вхідні елементи

Текстові поля

Текстові поля створюються за допомогою тегу з атрибутом типу покладений на текст. Наприклад:

Ім'я:




Телефон

Елемент використовується для полів введення номера телефону.

телефон:


Дата

Елемент використовується для вибору дати.

Дата народження:


Пароль

Елемент використовується для полів введення пароля. Текст, введений у це поле, відображається у вигляді крапок, щоб приховати пароль.

Пароль:


Архів

Елемент використовується, щоб дозволити користувачеві вибрати файл із локальної файлової системи.

Завантажити файл:


Прапорець

Елемент використовується для полів введення, які дозволяють користувачеві не вибрати жоден, один або декілька варіантів.

Я приймаю положення та умови

радіо

Елемент використовується для полів введення, які дозволяють користувачеві вибрати одну опцію з набору опцій.

Стать:

людина

жінки

Номер

Елемент використовується для числових полів введення.

сума:


Діапазон

Елемент використовується для полів введення, які повинні містити значення з діапазону значень.

обсяг:




кнопки

Кнопки створюються за допомогою тегу з атрибутом типу покладений на подати. Після натискання цієї кнопки дані форми будуть відправлені. Наприклад:

Ім'я:




Обробка введення форми

Після натискання кнопки надсилання дані форми надсилаються на обробку. Це робиться за допомогою одного з двох методів: GET або POST, які вказуються за допомогою атрибута метод В етикетці .

Метод GET

Метод GET надсилає дані форми як частину URL-адреси. Це корисно для таких речей, як пошук, де дані форми не є конфіденційними. Однак цей метод має обмеження щодо довжини даних, які можна надіслати.

сюди входять елементи введення

Метод POST

Метод POST надсилає дані форми окремо від URL-адреси. Це більш безпечно та може обробляти набагато більший обсяг даних, тому він використовується для таких речей, як контакти або подання форми входу.

сюди входять елементи введення

В обох випадках атрибут дію використовується для вказівки URL-адреси серверного сценарію, який оброблятиме дані форми.

Приклад HTML-форми з усіма елементами 

Ось форма, яка використовує всі елементи, які ми розглянули в цій статті:

Реєстраційний формуляр

Ім'я:



Прізвище:



Електронна пошта:



телефон:



Дата народження:



Пароль:



Завантажити файл:



Я приймаю положення та умови


Стать:

людина

жінки

сума:



обсяг:




У цій формі є поля для імені, прізвища, електронної пошти, телефону, дати народження, пароля, поле для завантаження файл, прапорець для умов і положень, радіостанції для вибору статі, а також поля для кількості та діапазону для кількості та обсягу, відповідно.

Кнопка «Надіслати» в кінці — це та, яка відповідає за надсилання форми за URL-адресою, указаною в атрибуті дію етикетки форму (у цьому випадку "/submit_form"). Щоб ця форма працювала на реальному веб-сайті, потрібно мати сервер, налаштований на отримання та обробку інформації з цієї форми в шляху "/submit_form".