Jak funguje formulář zpětné vazby?

Formuláře se používají na webových stránkách, mobilních aplikacích, chytrých televizích a jakýchkoli službách, které přijímají informace od uživatele. V tomto článku vytvoříme vlastní formulář zpětné vazby a pochopíme, jak to funguje.

Co je formulář a proč je potřeba?

Formulář je webová stránka nebo její část, která uživateli umožňuje odeslat na web svá data. Jedná se o online dotazník. Obsahuje otázky s různými možnostmi odpovědí a pole pro zadávání informací. Údaje z tohoto dotazníku jsou odesílány na server ke zpracování nebo prohlížení administrací stránek.

Bezplatný projekt kariérového poradenství

Udělejte si test a určete svůj směr v IT. Vyhrajte ceny, získejte dárky a plán osobního rozvoje prostřednictvím bezplatných průvodců a kariérních konzultací

Zúčastněte se zdarma

Nejčastěji se formuláře používají k autorizaci na webových stránkách a aplikacích. Obvykle vás požádají o zadání uživatelského jména a hesla nebo jiných přihlašovacích údajů, jako je e-mailová adresa. Tyto informace jsou zpracovány na serveru a ověřeny. Pokud je vše v pořádku, pak je uživateli povolen vstup na web. Dalším typem webového formuláře je registrace na akci. Umožňují organizátorům znát počet potenciálních návštěvníků a účastníkům oznámení o zahájení a změnách. Například při registraci na webinář uvede uživatel svou e-mailovou adresu, na kterou mu bude automaticky zaslána pozvánka, odkaz na přihlášení a záznam do online kalendáře. V tomto článku implementujeme formulář zpětné vazby. S jeho pomocí mohou uživatelé webu zanechat zpětnou vazbu, položit správě otázku nebo navrhnout vylepšení. Takové formuláře se často nacházejí v internetových obchodech nebo na stránkách poskytujících služby.

Staňte se Frontend Developerem
a vytvářet rozhraní služeb, která všichni používají

Rozložení formuláře

Vytvoření jakéhokoli formuláře začíná HTML rozložením stránky. V této fázi nastavujeme obecnou strukturu online dotazníku a polí, která může uživatel následně vyplnit. Vytvoříme formulář pro hodnocení produktu. Měl by obsahovat pole pro jméno zákazníka, e-mailovou adresu, tlačítko hodnocení a místo pro krátkou recenzi. Formulář se na stránku přidá pomocí tagu form>. Sděluje prohlížeči, že v dalším bloku bude uživatel moci poskytnout svá data, která pak budou odeslána na server.

• post – data budou odeslána na server v libovolném objemu. Tato metoda je vhodná pro velké formuláře nebo vyplňování databází.
• získat – v tomto případě budou data zapsána na adresu. Například form.com/form?name=Ivan&age=30&city=Moskva. Do adresy se vejdou pouze 3 tisíce znaků, takže tato metoda není vhodná pro velké formuláře. Tato metoda je také zranitelná, nelze ji použít k odesílání hesel, telefonních čísel a dalších důvěrných dat – ostatní uživatelé budou moci tyto informace přečíst v adresním řádku. Může to vypadat například takto: form.com/form?login=IvanSuperCute&password=qwerty.

Formulář musí obsahovat pole pro zadávání dat. To se provádí pomocí štítků a vstupních značek. První bude potřeba pro vytvoření titulku pro prvek a vstupní bude potřeba pro samotný prvek. Vytvoříme pole pro zadání názvu a zjistíme, jak to funguje:

Do štítku umístíme před vstupní pole text, který uživatel uvidí, a samotné pole nastavíme pomocí vstupu. Typ pole se nastavuje pomocí atributu type. Má následující hodnoty:

• text — zadejte jeden řádek;
• url — pole pro zadání URL;
• číslo – číslo;
• heslo — zadejte heslo, které automaticky nahrazuje znaky hvězdičkami;
• email – pole pro zadání emailové adresy s automatickým ověřením správnosti;
• tel – telefonní číslo.

Toto nejsou všechny hodnoty atributu type. Úplný seznam naleznete ve webových dokumentech MDN.

Nyní vytvoříme druhé pole, ve kterém požádáme uživatele o poskytnutí e-mailové adresy. Použijeme štítky a vstupní značky a uvedeme email jako hodnotu atributu type:

Z výsledného formuláře zjistíme uživatelské jméno a emailovou adresu pro odpověď. Nyní přidáme textové pole pro komentář, aby klient mohl zanechat recenzi. V HTML se to dělá pomocí tagu textarea>. Pojďme to zabalit do štítku> s názvem pole:

Formulář je téměř hotový, zbývá už jen přidat tlačítko pro odeslání dat. Udělejme to pomocí tagu button> a atributu submit. Zadejte text, aby uživatel okamžitě pochopil účel tlačítka.

Považuje se za dobrou formu upozornit uživatele, jaká vstupní data jsou od něj požadována. Například do pole křestní jméno může zadat příjmení, které však v databázi není potřeba. Popisky lze implementovat pomocí atributu zástupného symbolu. Musíte do něj umístit text, který bude viditelný ve vstupním poli. Pojďme přidat zástupné symboly do všech polí pro zadávání textu formuláře:

Styling formuláře

Pokud nás sledujete, pak s největší pravděpodobností vypadá formulář ve vašem prohlížeči jinak. Nebojte se, vše děláte správně, ale nepoužíváte styly CSS. HTML pouze vytváří kostru formuláře a popisuje prvky použité na stránce. Chcete-li přidat písma, barvy a vzory, musíte propojit styly.

Chcete-li to provést, musíte vytvořit soubor style.css ve složce projektu a přidat odkaz na řádek rel=”stylesheet” href=”style.css”> do tagu head> dokumentu HTML. S jeho pomocí prohlížeč pochopí, kde jsou popsány styly konkrétní stránky. Do samotného souboru style.css vložte následující kód a uložte:

Na formuláře můžete použít libovolné vlastnosti CSS výběrem značek HTML jako selektorů. Styly navíc umožňují implementovat animace a chování prvků, když na ně najedete kurzorem nebo kurzorem na klávesnici.

Čtěte také: Kde se začít učit HTML a CSS

Jak oživit formu?

Obdrželi jsme formulář zpětné vazby, pomocí kterého může uživatel zanechat svůj názor. Pokud jej zkusíte vyplnit a kliknete na tlačítko „Odeslat“, nic se nestane. Chcete-li odeslat formulář, musíte implementovat skript, který bude shromažďovat data pole a vkládat je do databáze nebo je odesílat e-mailem.

To lze provést téměř v jakémkoli programovacím jazyce. Obvykle používají jazyk, ve kterém je implementován celý backend webu. Vývojáři se tak nebudou muset obtěžovat s dalšími integracemi. V tomto článku napíšeme skript v PHP. Zde je jeho kód:

Skript musí být nahrán na server s nainstalovaným PHP a musí být zpřístupněn přístup ke čtení souborů. Nyní musíte přidat odkaz na skript do rozložení formuláře a zadat metodu zpracování dat:

Pokud nyní uživatel klikne na tlačítko „Odeslat“, všechna zadaná data budou zaslána jako dopis správci.

Frontend Developer PRO

Staňte se ostříleným frontend vývojářem – ovládněte HTML, CSS, JavaScript, TypeScript a React od nuly, vytvářejte responzivní weby a animace stránek, pracujte pro velké společnosti.

Daniil Shatukhin Editor ve společnosti Habr, tester a webový nadšenec