Ako vytvoriť formulár HTML (vysvetlené príklady)

Formuláre sa používajú na zhromažďovanie údajov od používateľov, ako sú kontaktné informácie, alebo na umožnenie interakcie používateľov s webovou stránkou, napríklad uverejňovanie komentárov alebo vyhľadávanie. V tomto článku sa naučíme, ako vytvoriť základný formulár pomocou HTML.

Štruktúra HTML formulára

Pomocou značky sa vytvorí HTML formulár. V rámci tejto značky môžete mať množstvo rôznych vstupných prvkov, ako sú textové polia, tlačidlá, začiarkavacie políčka, prepínače a ďalšie.

vstupné prvky idú sem

Vstupné prvky

Textové polia

Textové polia sa vytvárajú pomocou značky s atribútom typu položený na text. Napríklad:

Názov:




Telefón

Prvok používa sa pre polia na zadávanie telefónnych čísel.

Telefón:


Dátum

Prvok slúži na výber dátumu.

Dátum narodenia:


heslo

Prvok používa sa pre polia na zadanie hesla. Text zadaný do tohto poľa sa zobrazí ako bodky, aby sa skrylo heslo.

heslo:


Archív

Prvok sa používa na to, aby umožnil používateľovi vybrať súbor zo svojho lokálneho systému súborov.

Nahrajte súbor:


Zaškrtávacie políčko

Prvok používa sa pre vstupné polia, ktoré umožňujú používateľovi vybrať žiadnu, jednu alebo viacero možností.

Súhlasím s podmienkami

Rádio

Prvok používa sa pre vstupné polia, ktoré umožňujú používateľovi vybrať jednu možnosť zo súboru možností.

Rod:

Muž

ženy

číslo

Prvok používa sa pre číselné vstupné polia.

Suma:


Rozsah

Prvok používa sa pre vstupné polia, ktoré musia obsahovať hodnotu z rozsahu hodnôt.

Objem:




Tlačidlá

Tlačidlá sa vytvárajú pomocou značky s atribútom typu položený na Predložiť. Toto tlačidlo po stlačení odošle údaje formulára. Napríklad:

Názov:




Spracovanie zadávania formulára

Po stlačení tlačidla Odoslať sa údaje formulára odošlú na spracovanie. To sa vykonáva jednou z dvoch metód: GET alebo POST, ktoré sú špecifikované pomocou atribútu metóda V označení .

GET metóda

Metóda GET odošle údaje formulára ako súčasť adresy URL. Je to užitočné pri veciach, ako sú vyhľadávania, kde údaje formulára nie sú citlivé. Táto metóda má však obmedzenia, pokiaľ ide o dĺžku odosielaných údajov.

vstupné prvky idú sem

metóda POST

Metóda POST odošle údaje formulára oddelene od adresy URL. Je to bezpečnejšie a dokáže spracovať oveľa väčšie množstvo údajov, takže sa používa na veci, ako je odosielanie kontaktných alebo prihlasovacích formulárov.

vstupné prvky idú sem

V oboch prípadoch atribút akcie sa používa na zadanie adresy URL skriptu na strane servera, ktorý spracuje údaje formulára.

Príklad HTML formulára so všetkými prvkami 

Tu je formulár, ktorý používa všetky prvky, ktoré sme preskúmali v tomto článku:

Registračný formulár

Názov:



Priezvisko:



E-mail:



Telefón:



Dátum narodenia:



heslo:



Nahrajte súbor:



Súhlasím s podmienkami


Rod:

Muž

ženy

Suma:



Objem:




Tento formulár obsahuje polia pre meno, priezvisko, email, telefón, dátum narodenia, heslo, pole na nahranie a súbor, začiarkavacie políčko pre zmluvné podmienky, rádiá na výber pohlavia a polia s počtom a rozsahom pre množstvo a objem, resp.

Tlačidlo „Odoslať“ na konci je tlačidlo, ktoré bude mať na starosti odoslanie formulára na adresu URL uvedenú v atribúte akcie Zo štítku tvar (v tomto prípade "/submit_form"). Aby tento formulár fungoval na skutočnej webovej stránke, museli by ste mať nakonfigurovaný server na prijímanie a spracovanie informácií z tohto formulára v ceste "/submit_form".