w tym artykule dowiemy się, jak stworzyć responsywny formularz rejestracji w HTML i CSS. Zobaczymy również, jak dodać prostą weryfikację hasła za pomocą javascript.
dla każdego typu strony internetowej niezbędny jest formularz rejestracyjny. Klienci będą mieli łatwy sposób, aby dowiedzieć się więcej o Twojej organizacji, jeśli masz formularz rejestracyjny na swojej stronie internetowej. Co ważniejsze, pozwalasz swojej firmie uzyskać dostęp do odpowiedniego rodzaju subskrybentów i ich danych (oczywiście za ich zgodą).
Kod tego szablonu formularza rejestracji jest prosty i łatwy do zrozumienia. Dla naszej wygody umieściliśmy stylizację i kod javascript wewnątrz głównego pliku HTML. użyliśmy formularza HTML, aby nadać podstawową strukturę formularzowi rejestracji. Staraliśmy się stworzyć projekt neumorficzny dla tej formy.
do weryfikacji hasła użyliśmy dopasowania wzorców regex przy użyciu javascript. Aby dowiedzieć się więcej na ten temat odwiedź – wyrażenia regularne. Dla tego konkretnego projektu ustawiliśmy wzorzec hasła tak, aby był alfanumeryczny z 8-15 znakami. Jeśli hasło wprowadzone przez użytkownika nie podąża za wzorcem, krawędź pola wprowadzania hasła zmienia się na czerwoną, a jeśli pasuje, zmienia kolor na zielony. Podobnie jest z potwierdzeniem hasła. Ponadto formularz sprawdza również, czy hasło wprowadzone w polu Potwierdź hasło jest zgodne z wcześniej wpisanym hasłem, czy nie.
poniżej znajduje się kod źródłowy formularza rejestracji HTML. Zalecamy obejrzenie filmu osadzonego poniżej wraz z kodem.
kod:
możesz pobrać kod HTML formularza rejestracji z tego linku.
czytaj także:
- jak zrobić responsywną przejrzystą stronę logowania w HTML i CSS ?
- jak stworzyć responsywny szablon strony skontaktuj się z nami za pomocą HTML i CSS?
- jak zrobić podstawowy formularz logowania i rejestracji za pomocą HTML i CSS?
- jak zrobić responsywną stronę 404 Nie znalezioną w HTML i CSS?