Vytvořte svůj první HTML formulář

V tomto tutoriálu se dozvíte, jak vytvořit svůj první jednoduchý formulář v HTML. Formuláře jsou nezbytnou součástí webových aplikací a umožňují uživatelům zadávat informace a odesílat je na server. V tomto krok za krokem průvodci se seznámíte s základní strukturou HTML formuláře a pochopíte, jak různé prvky spolupracují při přenosu dat.

Nejdůležitější poznatky

• HTML formulář je definován pomocí značky <form>.
• Atributy action a method určují, kam budou data odeslána a jaká metoda bude použita.
• Formulářová pole jsou obvykle definována pomocí značek <input>, <label> a <button>.
• Data mohou být odeslána na server buď pomocí GET nebo POST.

Postupný návod

1. Vytvoření základní struktury HTML

Nejprve potřebujete jednoduchý HTML dokument jako základní strukturu. Ujistěte se, že máte základní strukturu HTML dokumentu:

2. Přidání značky Form

Dalším krokem je definování formuláře. Přidejte značku -Tag a zadejte atributy action a method. Zde je jednoduchý příklad, kde action určuje URL, kam budou data odeslána, a method je nastaven na GET pro přenos dat přes URL.

3. Vytvoření štítku Label a pole pro vstup

V formuláři si chcete vytvořit označené pole pro vstup. K tomu použijete značku -Tag pro označení a -Tag pro samotné vstupní pole. Ujistěte se, že atribut for štítku odpovídá id vstupního pole.

4. Přidání tlačítka Odeslat

Pro odeslání dat formuláře potřebujete tlačítko. To je realizováno pomocí značky -Tag a mělo by mít typ submit, aby se formulář odeslal po kliknutí

5. Testování formuláře

Po vytvoření formuláře je čas jej otestovat v prohlížeči. Zadejte příklad do vstupního pole a klikněte na tlačítko Odeslat. Měli byste vidět, že po odeslání formuláře se zadaná data pošlou přes URL na uvedenou akci.

6. Úpravy atributů vstupu

Pro zobrazení změn ve vstupních polích můžete upravit atributy značky -Tag. Například změňte atribut jméno, aby se data rozlišila. Příkladem může být změna názvu vstupního pole z jména na křestní jméno.

7. Přenos dat a typ požadavku

Před dalším testováním je důležité vědět, že metoda GET pošle data v URL a metoda POST pošle data v těle HTTP požadavku. Můžete změnit typ požadavku úpravou atributu metody v značce -Tag.

8. Simulace odezvy serveru

Po testování vašeho formuláře pravděpodobně nemáte k dispozici skutečný server, můžete upravit URL akce tak, aby simulovala jinou HTML stránku, na kterou jsou uživatelé přesměrováni po odeslání formuláře. Vytvořte nový HTML soubor, který například obsahuje poděkovací stránku.

9. Řešení problémů a ladění

Pokud při odesílání formuláře dochází k chybám, zkontrolujte nástroje sítě ve vašem prohlížeči. Zde uvidíte, zda byl formulář úspěšně odeslán a jaká data byla odeslána. Zároveň sledujte možné chyby 404, které naznačují, že cílová URL nebyla nalezena.

10. Závěr a další kroky

Nyní máte základní pochopení tvorby HTML formulářů. Můžete tuto techniku rozšířit pro vytvoření složitějších formulářů obsahujících různé typy vstupů a validací. V dalším tutoriálu se dozvíte, jak reagovat na vstupy do formulářů pomocí JavaScriptu a provádět asynchronní přenosy dat.

Shrnutí

V tomto tutoriálu jste se seznámili se strukturou a fungováním vašeho prvního HTML formuláře. Nyní víte, jak vytvářet vstupní pole, popisky a tlačítka a jak jsou odeslaná data přenášena buď přes URL nebo v těle POST požadavku.