Jak vytvořit formulář HTML (vysvětlené příklady)

Formuláře se používají ke shromažďování údajů od uživatelů, jako jsou kontaktní údaje, nebo k tomu, aby uživatelům umožňovaly interakci s webem, jako je přidávání komentářů nebo vyhledávání. V tomto článku se naučíme vytvořit základní formulář pomocí HTML.

Struktura HTML formuláře

Pomocí značky se vytvoří HTML formulář. V rámci této značky můžete mít řadu různých vstupních prvků, jako jsou textová pole, tlačítka, zaškrtávací políčka, přepínače a další.

vstupní prvky jdou sem

Vstupní prvky

Textová pole

Textová pole se vytvářejí pomocí značky s atributem typ položen na text. Například:

Název:




Telefon

Prvek používá se pro pole pro zadávání telefonních čísel.

Telefon:


datum

Prvek slouží k výběru data.

Datum narození:


Heslo

Prvek používá se pro pole pro zadání hesla. Text zadaný do tohoto pole se zobrazí jako tečky pro skrytí hesla.

Heslo:


Archiv

Prvek se používá k tomu, aby uživatel mohl vybrat soubor ze svého místního systému souborů.

Nahrát soubor:


Zaškrtávací políčko

Prvek používá se pro vstupní pole, která uživateli umožňují vybrat žádnou, jednu nebo více možností.

Souhlasím s pravidly a podmínkami

Rádio

Prvek používá se pro vstupní pole, která umožňují uživateli vybrat jednu možnost ze sady možností.

Rod:

Muž

Ženy

Číslo

Prvek používá se pro numerická vstupní pole.

Množství:


Rozsah

Prvek používá se pro vstupní pole, která musí obsahovat hodnotu z rozsahu hodnot.

Hlasitost:




Tlačítka

Tlačítka se vytvářejí pomocí značky s atributem typ položen na Předložit. Toto tlačítko po stisknutí odešle data formuláře. Například:

Název:




Zpracování zadávání formuláře

Po stisknutí tlačítka Odeslat jsou data formuláře odeslána ke zpracování. To se provádí jednou ze dvou metod: GET nebo POST, které jsou specifikovány pomocí atributu metoda Ve štítku .

metoda GET

Metoda GET odešle data formuláře jako součást adresy URL. Je to užitečné pro věci, jako je vyhledávání, kde data formuláře nejsou citlivá. Tato metoda má však omezení, pokud jde o délku dat, která lze odeslat.

vstupní prvky jdou sem

Metoda POST

Metoda POST odesílá data formuláře odděleně od adresy URL. To je bezpečnější a dokáže zpracovat mnohem větší množství dat, takže se používá pro věci, jako je odesílání kontaktních nebo přihlašovacích formulářů.

vstupní prvky jdou sem

V obou případech atribut akce se používá k určení adresy URL skriptu na straně serveru, který zpracuje data formuláře.

Příklad formuláře HTML se všemi prvky 

Zde je formulář, který používá všechny prvky, které jsme zkontrolovali v tomto článku:

Registrační formulář

Název:



Příjmení:



E-mailem:



Telefon:



Datum narození:



Heslo:



Nahrát soubor:



Souhlasím s pravidly a podmínkami


Rod:

Muž

Ženy

Množství:



Hlasitost:




Tento formulář obsahuje pole pro jméno, příjmení, email, telefon, datum narození, heslo, pole pro nahrání a soubor, zaškrtávací políčko pro podmínky, rádia pro volbu pohlaví a pole čísla a rozsahu pro množství a objem, respektive.

Tlačítko "Odeslat" na konci je to, které bude mít na starosti odeslání formuláře na adresu URL uvedenou v atributu akce Ze štítku tvar (v tomto případě "/submit_form"). Aby tento formulář fungoval na skutečné webové stránce, museli byste mít nakonfigurovaný server pro příjem a zpracování informací z tohoto formuláře v cestě "/submit_form".