Interaktivní webové stránky a aplikace často vyžadují, aby uživatelé vyplňovali formuláře. Jedním z nejdůležitějších prvků formuláře je pole pro zadávání textu nebo input. Někdy však uživatelé toto pole nevyplní, což může vést k chybám nebo nesprávnému fungování systému.
Aby se takovým problémům předešlo, je možné vyplnit vstupní pole. V HTML existuje atribut required, který umožňuje určit, že pole musí být před odesláním formuláře nutně vyplněno. Zde je příklad:
V tomto příkladu vytvoříme textové pole pomocí značky a označíme atribut required. Prohlížeč nyní nedovolí odeslat formulář, dokud nebude pole vyplněno.
V některých případech však prohlížeče nepodporují atribut required nebo může uživatel tuto kontrolu obejít deaktivací JavaScriptu. Proto se také doporučuje přidat kontrolu na stranu klienta pomocí JavaScriptu. Zde je příklad jednoduché funkce, která zkontroluje, zda je pole plné:
function validateForm() >Nyní návštěvníci vašich webových stránek nebudou moci odeslat formulář, dokud nevyplní pole "Uživatelské jméno".
Přidání atributu "required" do HTML
Chcete-li přidat atribut "required" k prvku formuláře, jednoduše jej zapněte do příslušné značky. Například:
Příklad:
V tomto příkladu přidáváme atribut "required" do textového pole. To znamená, že uživatel musí před odesláním formuláře vyplnit toto pole, jinak formulář nebude odeslán.
Poznámka: povinné vyplnění lze také nastavit pro jiné typy polí, jako je "email", "number" a "checkbox".
Ikony povinného pole
Níže uvedená tabulka uvádí příklady ikon, které lze použít k označení povinnosti pole:
Hodnota je povinná
Je třeba vyplnit pole
Ikony lze přidat vedle pole pomocí HTML entity nebo znaků Unicode.
Chcete-li například přidat ikonu 🚫 k označení povinného pole, můžete použít následující kód:
Také, můžete použít ikony Místo textových popisů vedle pole, aby vizuálně atraktivnější a srozumitelnější pro uživatele.
Pomocí ikon pro povinná pole pomůžete uživatelům rychleji se zorientovat v vyplňování formuláře a snížíte počet chyb při odesílání dat.
Kontrola vyplnění inputu v JavaScriptu
JavaScript nám poskytuje možnost zkontrolovat, zda je povinný input před odesláním formuláře vyplněn. K tomu můžeme použít vlastnost required ve značce input .
Aby byl input povinný, je třeba přidat atribut required do značky input :
Když se uživatel pokusí odeslat formulář, JavaScript automaticky zkontroluje, zda je povinný input vyplněn. Pokud input zůstane prázdný, zobrazí se chybová zpráva a formulář nebude odeslán:
Chcete-li vyplnit input ve formuláři, můžete použít atribut required . Pokud uživatel nechá pole prázdné a pokusí se odeslat formulář, prohlížeč zobrazí upozornění, že toto pole je nutné vyplnit.
Kromě toho můžete přidat vlastní kontrolu vyplnění pole pomocí JavaScriptu. Můžete například napsat funkci, která zkontroluje, že input má alespoň jeden znak, a pokud je pole prázdné, zobrazí uživateli varování.
function validateForm() >document.querySelector("form").onsubmit = validateForm;Přidání upozornění při nevyplnění formuláře lze tedy implementovat pomocí atributu required v HTML a/nebo pomocí kontroly hodnoty pole v JavaScriptu.
Přizpůsobení varovné zprávy
Jedním ze způsobů přizpůsobení varovné zprávy je použití atributu required v Tegu input. Například:
Pokud se tedy pokusíte odeslat formulář s prázdným polem "username", prohlížeč automaticky zobrazí zprávu "Vyplňte prosím toto pole".
Pokud však chcete změnit text varovné zprávy, můžete použít JavaScript. Například následující kód změní zprávu na "toto pole je nutné vyplnit":
document.getElementById("username").setCustomValidity ("toto pole je nutné vyplnit");
V tomto příkladu je "username" hodnota atributu "id" u příslušného prvku. Můžete změnit text a vybrat vhodný identifikátor pro vaši položku.
Také můžete přidat stylizaci do výstražné zprávy pomocí CSS. Například:
V tomto příkladu se výstražná zpráva zobrazí v červeném rámečku. Můžete použít různé styly, abyste zdůraznili důležitost vyplňování povinných polí.
Tímto způsobem můžete upravit varovnou zprávu tak, aby odpovídala vašim potřebám a stylu vašeho webu. Pamatujte, že přizpůsobení varovné zprávy je lepší provádět s ohledem na lepší postupy a požadavky na přístupnost.
Osvětlení neobsazených polí
Chcete-li provést povinné vyplňování inputů v HTML a JavaScriptu, můžete přidat stylizaci pro nevyplněná pole. To uživateli pomůže snadněji určit, která pole vyžadují vyplnění, a učiní formulář srozumitelnějším.
K tomu lze použít CSS pseudoklass: required, který vybere všechna povinná pole. Pomocí CSS pak lze vlastnosti background-color změnit barvu pozadí nevyplněného pole tak, aby se lišilo od vyplněných polí.
V tomto příkladu budou mít všechna povinná pole světle červené pozadí. Pokud se uživatel pokusí odeslat formulář, aniž by vyplnil povinná pole, budou tato pole zvýrazněna, což mu pomůže chybu opravit.
Kromě změny pozadí lze použít i jiné způsoby, jak zvýraznit nevyplněná pole, například změnit barvu ohraničení nebo přidat ikonu upozornění vedle pole. Vše závisí na designu vašeho tvaru a požadavcích na uživatelský zážitek.
Při ověřování formuláře pomocí JavaScriptu je také možné přidat třídu s příslušnými styly pro nevyplněná pole. Například:
V tomto příkladu funkce validateForm přidává třídu "required" do nevyplněného pole, pokud neprošla kontrolou. Stylizace třídy "required" lze definovat v CSS pro zvýraznění nevyplněných polí.
Zvýraznění nevyplněných polí tak uživatelům pomůže snadněji identifikovat povinná pole ve formuláři a zabrání odeslání formuláře s nevyplněnými poli.
Malování povinných polí v HTML
HTML5 poskytuje vestavěné atributy pro zajištění povinného vyplnění polí formuláře. Někdy však může být nutné tato pole zvýraznit a vizuálně upozornit uživatele na jejich povinnost.
Pro malování požadovaných polí v HTML lze použít CSS. Vytvořte třídu, která nastaví požadované styly pro zobrazení těchto polí.
Příklad jednoduché třídy pro malování povinných polí:
.required-field
V tomto příkladu třída .required-field nastaví barvu pozadí tvarového pole na světle růžovou a přidá červenou hranici.
Chcete-li třídu aplikovat na povinná pole, musíte tuto třídu přidat k prvkům tvaru pomocí atributu class.
Příklad kódu pro použití třídy na vstupní pole:
V tomto příkladu třída .required-field se vztahuje na vstupní pole, které má atribut required, který činí pole povinným vyplnit.
Tedy při použití třídy .required-field, povinná pole budou vizuálně zvýrazněna a uživatelé budou moci snadno určit, která pole je třeba vyplnit.