Vstupní masky uživatelům výrazně usnadňují zjištění požadovaného formátu pro vyplňování e-mailů, telefonních čísel, kreditních karet a dalších údajů. Přidáním masek do vašich formulářových vstupů jsou mnohem lepší a jejich provádění je velmi snadné, zejména při použití knihovny JS.
V tomto článku jsme pro vás připravili šablonu formuláře Bootstrap 4 se vstupními maskami připravenými k použití. Stejně jako všechny naše bonusy je použití zcela zdarma!
Šablona
Šablona je kompletně sestavena z komponent Bootstrap 4. Má čistý a moderní design, HTML je plně v souladu s frameworkem a CSS je samostatné, takže když jej použijete, nenaruší zbytek vašich stylů.
K vytvoření vstupních masek pro pole formuláře jsme použili jQuery Mask Plugin. Je opravdu snadno použitelný a implementovaný a má mnoho možností přizpůsobení.
Jak používat
Chcete-li šablonu použít, postupujte podle těchto jednoduchých kroků:
- Získejte archiv zip z části Stáhnout v horní části stránky a extrahujte jej.
- Vložte kód HTML do svého projektu. Ujistěte se, že na této stránce máte Bootstrap 4.
- Styly jsou umístěny v samostatném souboru CSS. Propojte soubor nebo zkopírujte jeho obsah a přidejte je do svých stylů.
- Přidejte jQuery Mask Plugin CSS a soubory JS a inicializujte je ve značce skriptu -
$('#birth-date').mask('00/00/0000');Ujistěte se, že jste za jQuery zahrnuli zásuvný modul Mask.
Vstupní masky v Bootstrap Studio
Dalším rychlým způsobem, jak nastavit vstupní masky, je použití Bootstrap Studio. Aplikace velmi usnadňuje vytvoření správného HTML, začlenění knihovny JavaScript a konfigurace masek podle vašich představ.
Připravili jsme jednoduchý návod krok za krokem, který pokryje vše, co potřebujete udělat. Můžete se na to podívat v sekci výukových programů Bootstrap Studio.
Zdarma pro komerční použití
Máte všechna práva na přizpůsobení a použití těchto šablon v osobních i komerčních projektech. Všechny naše odměny jsou 100% bezplatné, není vyžadováno uvedení zdroje (naše licenční stránka). Užijte si to!