Създай своята първа HTML форма

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

Най-важни заключения

• HTML формата се дефинира с тага <form>.
• Атрибутите action и method определят къде ще бъдат изпратени данните и коя метод ще бъде използвана.
• Полетата на формуляра обикновено се дефинират с <input>, <label> и <button>.
• Данните могат да бъдат изпратени на сървъра чрез GET или POST метод.

Поетапно ръководство

1. Създайте основната HTML структура

Първо ви е нужен прост HTML документ като основа. Уверете се, че имате основната структура на HTML документ:

2. Добавете таг за формуляр

Следващата стъпка е да дефинирате формуляра. Добавете тага - и са необходими атрибутите action и method. Ето прост пример, където action посочва URL адреса, на който данните ще бъдат изпратени, а method е зададен на GET за предаване на данни през URL адреса.

3. Създайте етикет и поле за въвеждане

Във формуляра искате да създадете етикетирано поле за въвеждане. За целта използвайте тага за етикет и тага за самото поле за въвеждане. Уверете се, че for атрибута на етикета съвпада с id на полето за въвеждане.

4. Добавете бутон за изпращане

За да изпратите данните от формуляра, ви е необходимо бутон. Това се постига чрез тага и трябва да има тип submit, за да формуляра се изпраща, когато бутонът се натисне

5. Тестване на формуляра

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

6. Промяна на атрибутите на полетата за въвеждане

За да видите как се променят полетата за въвеждане, можете да промените атрибутите на тага. Например, променете name атрибута, за да разграничите предаваните данни. Например, промяната на името на полето за въвеждане от name на first name.

7. Предаване на данни и тип на заявката

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

8. Симулиране на сървърната реакция

Тъй като вероятно нямате реален сървър на разположение за тестване на формуляра си, можете да промените action URL адреса, за да симулирате друга HTML страница, към която потребителите да бъдат препратени след изпращането на формуляра. Създайте нов HTML файл с благодарителна страница например.

9. Отстраняване на проблеми и дебъгване

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

10. Заключение и поглед за бъдещето

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

Резюме

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