Как да създадете HTML формуляр (обяснени примери)

Формулярите се използват за събиране на данни от потребители, като информация за контакт, или за да позволят на потребителите да взаимодействат с уебсайта, като например да публикуват коментари или да извършват търсения. В тази статия ще научим как да създадем основен формуляр с помощта на HTML.

Структура на HTML формуляр

HTML формуляр се създава с помощта на етикета. В рамките на този етикет можете да имате различни елементи за въвеждане, като текстови полета, бутони, квадратчета за отметка, радио бутони и други.

входните елементи влизат тук

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

Текстови полета

Текстовите полета се създават с помощта на етикета с атрибута Тип поставен върху текст. Например:

Име:




Телефон

Елементът използвани за полета за въвеждане на телефонни номера.

телефон:


Дата

Елементът използва се за избор на дата.

Рождена дата:


Парола

Елементът използвани за полета за въвеждане на пароли. Текстът, въведен в това поле, се показва като точки, за да се скрие паролата.

Парола:


Архив

Елементът се използва, за да позволи на потребителя да избере файл от своята локална файлова система.

Качи файл:


Квадратче за отметка

Елементът използвани за полета за въвеждане, които позволяват на потребителя да избере нито една, една или няколко опции.

Приемам правилата и условията

Радио

Елементът използвани за полета за въвеждане, които позволяват на потребителя да избере една опция от набор от опции.

Пол:

човек

Жени

Номер

Елементът използвани за цифрови полета за въвеждане.

Количество:


Обхват

Елементът използвани за полета за въвеждане, които трябва да съдържат стойност от диапазон от стойности.

Сила на звука:




Бутони

Бутоните се създават с помощта на етикета с атрибута Тип поставен върху Изпращане. При натискане този бутон ще изпрати данните от формуляра. Например:

Име:




Обработка на въвеждане на формуляр

При натискане на бутона за изпращане данните от формуляра се изпращат за обработка. Това се прави чрез един от двата метода: GET или POST, които са посочени с помощта на атрибута метод В етикета .

GET метод

Методът GET изпраща данните от формуляра като част от URL адреса. Полезно е за неща като търсения, където данните от формуляра не са чувствителни. Този метод обаче има ограничения по отношение на дължината на данните, които могат да бъдат изпратени.

входните елементи влизат тук

POST метод

Методът POST изпраща данните на формуляра отделно от URL адреса. Това е по-сигурно и може да обработва много по-голямо количество данни, така че се използва за неща като изпращане на формуляри за контакт или вход.

входните елементи влизат тук

И в двата случая атрибутът действие се използва за указване на URL адреса на сървърния скрипт, който ще обработва данните от формуляра.

Примерен HTML формуляр с всички елементи 

Ето формуляр, който използва всички елементи, които разгледахме в тази статия:

Формуляр за регистрация

Име:



Фамилия:



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



телефон:



Рождена дата:



Парола:



Качи файл:



Приемам правилата и условията


Пол:

човек

Жени

Количество:



Сила на звука:




Този формуляр има полета за собствено име, фамилия, имейл, телефон, дата на раждане, парола, поле за качване на файл, поле за отметка за правила и условия, радиостанции за избор на пол и полета за номер и диапазон за количество и обем, съответно.

Бутонът „Изпращане“ в края е този, който ще отговаря за изпращането на формуляра до URL адреса, посочен в атрибута действие На етикета форма (в този случай "/submit_form"). За да работи този формуляр на истински уебсайт, ще трябва да имате сървър, конфигуриран да получава и обработва информацията от този формуляр в пътя "/submit_form".