Zaškrtávací políčka jsou nezbytným prvkem ve webových formulářích, zejména pokud jde o poskytnutí uživatelům možnosti opt-in, například akceptování obchodních podmínek nebo odběr newsletteru. V této příručce osvětluji základní aspekty zaškrtávacích políček, vysvětluji jejich fungování a poskytuji ti postupné pokyny, jak zaškrtávací políčka použít ve svých formulářích.
Zaškrtávací políčka nejsou pouze pro jednoduché ano/ne výběry, ale mohou být také smysluplně kombinována s jinými prvky ovládání formulářů. Tato příručka ti poskytuje potřebné znalosti k tomu, jak zaškrtávací políčka správně implementovat a používat.
Nejdůležitější poznatky
- Zaškrtávací políčka jsou ideální nástroje pro binární rozhodování ve formulářích.
- Pokud není žádné zaškrtnuté zaškrtávací políčko, nebude odesláno.
- Výchozí hodnota nezaškrtnutého zaškrtávacího políčka se považuje za prázdnou.
- Zaškrtávací políčka můžou být výchozí označená pomocí použití atributu 'checked'.
- Rozumění fungování zaškrtávacích políček je podstatné pro správné zacházení s daty ve formulářích.
Postupná příručka
Krok 1: Vytvoření zaškrtávacích políček
Začni tím, že vytvoříš zaškrtávací políčka v HTML. Pro každé zaškrtávací políčko potřebuješ atribut type="checkbox" a vlastnost name, aby byla identifikována jejich hodnota při odeslání formuláře.
V tomto příkladu vytvoříme dvě zaškrtávací políčka: jedno pro souhlas s obchodními podmínkami a jedno pro příjem newsletteru. Obě zaškrtávací políčka jsou identifikována názvy "přijmout PODMÍNKY" a "přijmout newsletter".
Krok 2: Nastavení formuláře
Nastav svůj formulář pomocí metody GET nebo POST. V tomto příkladu používáme metodu GET, abychom mohli vidět výběr v URL parametru.
Zde je jednoduchý příklad formuláře s zaškrtávacími políčky. Upozorni, že zaškrtávací políčka jsou uzavřena v značce <form>, aby byly data správně zpracována.
Krok 3: Kontrola odeslaných dat
Odešli formulář, aniž by bylo znovu aktivováno nějaké zaškrtávací políčko. Zjistíš, že se v URL nezobrazí nic.
Zvláštností zaškrtávacích políček je, že pokud nejsou zaškrtnuta, neodesílají žádnou hodnotu. To znamená, že se nezobrazují v URL parametrech, což v případě metody GET zanechá příslušný záznam prázdný.
Krok 4: Přidání hodnot k zaškrtávacím políčkům
Aktivuj první zaškrtávací políčko a opět odešli formulář. Budou zobrazena pouze aktivovaná zaškrtávací políčka v odeslaných datech.
Bude odesláno pouze to zaškrtávací políčko, které bylo skutečně vybráno. V tomto případě uvidíš specifický název a hodnotu aktivovaného zaškrtávacího políčka ve formulářových datech.
Krok 5: Definování výchozí hodnoty
Chceš-li automaticky nastavit zaškrtávací políčko jako vybrané, přidej k příslušnému zaškrtávacímu políčku atribut checked.
Pokud použiješ atribut checked, bude zaškrtávací políčko při načítání stránky již aktivováno. Toto je užitečné, pokud chceš, aby byly určité možnosti výchozím nastavením vybrány.
Krok 6: Zpracování vstupů uživatele
Když uživatel odešle formulářové vstupy, zkontroluj hodnoty zaškrtávacích políček. Očekávej, že budou v odeslaných datech pouze názvy zaškrtnutých políček.
Je důležité zajistit, aby tvoje zálohování (například server jako Node.js s Express) bylo schopno adekvátně reagovat na prázdné nebo neexistující hodnoty.
Shrnutí
V této příručce jste se naučili základy zaškrtávacích polí v webových formulářích. Nyní víte, jak vytvářet zaškrtávací pole, jak fungují, a jak zajistit, že data budou správně předána. Zaškrtávací pole poskytují jednoduchý způsob, jak zaznamenávat preference uživatelů, a měla by být zohledněna v každém webovém formuláři.
