V tomto návode sa naučíš, ako vytvoriť svoj prvý jednoduchý formulár v HTML. Formuláre sú neoddeliteľnou súčasťou webových aplikácií a umožňujú používateľom zadať informácie a odoslať ich na server. V tomto postupnom sprievodcovi sa naučíš základnú štruktúru HTML formulára a pochopíš, ako rôzne prvky spolupracujú pri prenose údajov.
Najdôležitejšie poznatky
- HTML formulár sa definuje pomocou značky <form>.
- Atribúty action a method určujú, kam sa údaje zasielajú a aká metóda sa používa.
- Formulárové polia sa zvyčajne definujú pomocou značiek <input>, <label> a <button>.
- Údaje môžu byť zasielané na server buď pomocou GET alebo POST metódy.
Postup krok za krokom
1. Vytvorenie základnej štruktúry HTML
Najprv potrebuješ jednoduchý HTML dokument ako základnú štruktúru. Uistite sa, že máte základnú štruktúru HTML dokumentu:
2. Pridanie značky Form
Ďalším krokom je definovanie formulára. Pridáte značku -Tag a budete potrebovať atribúty action a method. Tu je jednoduchý príklad, kde action určuje URL, na ktorú sa údaje zasielajú, a metóda je nastavená na GET, aby údaje boli odoslané cez URL.
3. Vytvorenie štítku a vstupného poľa
V formulári chcete vytvoriť označené vstupné pole. Na označenie použite značku -Tag a na samotné vstupné pole značku -Tag. Dávajte pozor, aby atribút for štítku zodpovedal id vstupného poľa.
4. Pridanie tlačidla Odošliť
Na odoslanie údajov formulára potrebujete tlačidlo. Toto sa realizuje pomocou značky -Tag a malo by mať typ submit, aby sa formulár odoslal kliknutím.
5. Testovanie formulára
Po vytvorení formulára je čas ho otestovať v prehliadači. Do vstupného poľa zadajte príklad a kliknite na tlačidlo Odošliť. Mali by ste vidieť, že po odoslaní formulára sa zadané údaje zasielajú prostredníctvom URL na zadanú akciu.
6. Upravenie atribútov vstupu
Aby ste videli zmeny vo vstupných poliach, môžete prispôsobiť atribúty značky -Tag. Napríklad môžete zmeniť atribút name, aby ste odlišili odosielané údaje. Príkladom môže byť zmenu názvu vstupného poľa z názvu na meno.
7. Prenos údajov a typ požiadavky
Pred ďalším testovaním je dôležité vedieť, že metóda GET zasiela údaje v URL, zatiaľ čo POST zasiela údaje v tele HTTP požiadavky. Môžete zmeniť typ požiadavky upravením atribútu metóda v značke -Tag.
8. Simulácia reakcie servera
Keď pri testovaní vášho formulára pravdepodobne nemáte k dispozícii skutočný server, môžete upraviť URL akcie, aby sa simulovala iná HTML stránka, na ktorú budú používatelia presmerovaní po odoslaní formulára. Vytvorte nový HTML súbor, ktorý napríklad obsahuje stránku s poďakovaním.
9. Odstraňovanie chýb a ladienie
Ak sa vyskytnú chyby pri odosielaní formulára, skontrolujte sieťové nástroje prehliadača. Tu uvidíte, či sa formulár úspešne odoslal a aké údaje sa odosielajú. Dávajte pozor aj na možné chyby 404, ktoré signalizujú, že cieľová URL nebola nájdená.
10. Záver a budúcnosť
Teraz máš základné pochopenie pre vytváranie HTML formulárov. Túto techniku môžeš rozšíriť na tvorbu zložitejších formulárov obsahujúcich rôzne typy vstupov a validácie. V ďalšom tutoriáli sa naučíš, ako reagovať na vstupy formulára pomocou JavaScriptu a vykonávať asynchrónne prenosy dát.
Zhrnutie
V tomto tutoriáli si spoznal štruktúru a fungovanie svojho prvého HTML formulára. Teraz vieš, ako vytvárať vstupné polia, označenia a tlačidlá a ako sa odosielajú dáta cez URL alebo v tele POST požiadavky.
Často kladené otázky
Aký je rozdiel medzi GET a POST?GET prenáša dáta cez URL, zatiaľ čo POST posiela dáta v tele požiadavky.
Čo musím uviesť v action-Attribute?V action-Attribute uvediete URL, na ktorú majú byť formulárne dáta odoslané.
Ako sa môžem uistiť, že moje formulár funguje?Skúste formulár v prehliadači a overte dáta odoslané prostredníctvom sieťových nástrojov.
Ako môžem vytvoriť viacero vstupných polí v jednom formulári?Pridajte ďalšie -Tagy pod prvý -Tag a uistite sa, že každému pridáte jedinečný atribút name.
Čo sa deje po odoslaní formulára?Po odoslaní GET požiadavky sa stránka znovu načíta a dáta sa zobrazia v URL. Pri POST požiadavke závisí reakcia od rovnakého servera.
