Zaškrtávacie políčka sú nevyhnutnou súčasťou webových formulárov, najmä ak ide o poskytnutie používateľom možnosti pozitívneho výberu, ako je napríklad súhlas s VOP alebo prihlásenie k odberu spravodaja. V tomto návode sa zaoberám základnými aspektmi zaškrtávacích políčok, objasňujem ich fungovanie a poskytujem krokové pokyny, ako ich môžete použiť vo vašich formulároch.
Zaškrtávacie políčka umožňujú nielen jednoduché áno/nie voľby, ale môžu byť aj rozumne kombinované s inými prvkami formulárov. Tento návod vám poskytne potrebné znalosti na správnu implementáciu a používanie zaškrtávacích políčok.
Najdôležitejšie poznatky
- Zaškrtávacie políčka sú ideálnymi nástrojmi pre binárne rozhodnutia vo formulároch.
- Ak zaškrtávacie políčko nie je aktivované, nebude odoslané.
- Štandardná hodnota nezaškrtnutého zaškrtávacieho políčka sa považuje za prázdnu.
- Môžete mať zaškrtávacie políčka predvolene aktivované pomocou atribútu 'checked'.
- Pochopenie fungovania zaškrtávacích políčok je rozhodujúce pre správne manipulovanie s údajmi vo formulároch.
Krokový návod
Krok 1: Vytvorenie zaškrtávacích políčok
Začnite tým, že vytvoríte vaše zaškrtávacie políčka v HTML. Na identifikáciu ich hodnôt pri odoslaní formulára budete potrebovať atribút type="checkbox" a vlastnosť name pre každé zaškrtávacie políčko.
V tomto príklade vytvoríme dve zaškrtávacie políčka: jedno pre súhlas s VOP a druhé pre prijatie newslettra. Obe zaškrtávacie políčka sú identifikované podľa názvov "accept TNCs" a "receive Newsletter".
Krok 2: Nastavenie formulára
Nastavte váš formulár pomocou metódy GET alebo POST. V tomto príklade používame GET metódu, aby sme mohli vidieť výber v URL parametri.
Tu je jednoduchý príklad formulára s zaškrtávacie políčka. Uistite sa, že zaškrtávacie políčka sú zahrnuté v značke <form>, aby boli údaje správne spracované.
Krok 3: Kontrola odoslaných údajov
Odošlite formulár bez aktívneho zaškrtávacieho políčka. Zistíte, že sa nič nezobrazí v URL adrese.
Zvláštnosťou zaškrtávacích políčok je, že ak nie sú označené, neodosielajú žiadnu hodnotu. To znamená, že sa nezobrazia v URL parametroch, čo zanechá požadovanú položku prázdnu v prípade GET metódy.
Krok 4: Pridanie hodnôt k zaškrtávacím políčkam
Aktivujte prvý zaškrtávacie políčko a znova odošlite formulár. Zobrazia sa iba aktívne zaškrtávacie políčka v odoslaných údajoch.
Odoslané budú iba tie zaškrtávacie políčka, ktoré boli skutočne vybrané. V tomto prípade uvidíte konkrétny názov a hodnotu pre aktívne zaškrtávacie políčko v údajoch formulára.
Krok 5: Definovanie predvolenej hodnoty
Aby ste zaškrtávacie políčko mohli predvolene nastaviť ako vybraté, pridajte atribút checked k príslušnému zaškrtávaciemu políčku.
Ak použijete atribút checked, zaškrtávacie políčko bude pri načítaní stránky už aktivované. Toto je užitočné, ak chcete, aby niektoré možnosti boli predvolene vybrané.
Krok 6: Spracovanie vstupov používateľa
Ak používateľ odošle vstupy formulára, skontrolujte hodnoty zaškrtávacích políčok. Očakávajte iba mená zaškrtnutých políčok v odoslaných údajoch.
Je dôležité zabezpečiť, aby vaše backend (napríklad server ako Node.js s Express) dokázal primerane reagovať na prázdne alebo neexistujúce hodnoty.
Zhrnutie
V tejto príručke si osvojil základy zaškrtávacích políčok vo webových formulároch. Teraz vieš, ako vytvárať zaškrtávacie políčka, ako chápať ich fungovanie a ako zabezpečiť, že údaje sú správne odosielané. Zaškrtávacie políčka ponúkajú jednoduchý spôsob zaznamenávania používateľských preferencií a mali by byť zohľadnené v každom webovom formulári.
Často kladené otázky
Aký je rozdiel medzi zaškrtávacími políčkami a prepínačmi (Radio-Buttons)?Zaškrtávacie políčka umožňujú viacero výberových možností, zatiaľ čo prepínače (Radio-Buttons) dovoľujú iba jeden výber z mnohých.
Prečo sa nezobrazuje žiadne zaškrtávacie políčko v URL parametroch, ak nie je označené?Neoznačené zaškrtávacie políčko nemá žiadnu hodnotu a preto nie je odoslané so zaslanými formulárnymi údajmi.
Ako nastavím zaškrtávacie políčko predvolene na "označené"?Pridajte atribút checked k zaškrtávaciemu políčku vo vašom HTML.
Môžem aktivovať viacero zaškrtávacích políčok súčasne?Áno, používatelia môžu naraz vybrať viacero zaškrtávacích políčok vo formulári.
