In dit artikel leren we hoe je een responsief aanmeldformulier maakt in HTML en CSS. We zullen ook zien hoe u eenvoudige wachtwoordvalidatie kunt toevoegen met javascript.
voor elk type website is een aanmeldingsformulier essentieel. Klanten hebben een gemakkelijke manier om meer te weten te komen over uw organisatie als u een inschrijfformulier op uw website. Nog belangrijker, u bent het toestaan van uw bedrijf om toegang te krijgen tot de juiste soort abonnees en hun gegevens (met hun toestemming, natuurlijk).
de code voor dit aanmeldingsformulier is eenvoudig en gemakkelijk te begrijpen. Voor ons gemak hebben we de styling en javascript-code opgenomen in het hoofd HTML-bestand. we hebben HTML-formulier gebruikt om een basisstructuur te geven aan het inschrijfformulier. We hebben geprobeerd om een neumorf ontwerp voor deze vorm te creëren.
voor de wachtwoordvalidatie hebben we regex pattern matching gebruikt met javascript. Om er meer over te lezen, bezoek – reguliere expressies. Voor dit specifieke ontwerp hebben we het wachtwoordpatroon zodanig ingesteld dat het alfanumeriek moet zijn met 8-15 tekens. Als het door de gebruiker ingevoerde wachtwoord niet het patroon volgt, verandert de rand van het invoerveld voor het wachtwoord in rood en als het overeenkomt, wordt het groen. Vergelijkbaar is voor Bevestig wachtwoord ook. Bovendien controleert het formulier ook of het in het invoerveld Wachtwoord bevestigen ingevoerde wachtwoord overeenkomt met het eerder ingevoerde wachtwoord of niet.
hier volgt de broncode voor het aanmeldingsformulier HTML. Wij raden u aan om de video hieronder te bekijken, samen met de code.
CODE:
u kunt de html-code van het aanmeldingsformulier downloaden via deze link.
ook lezen:
- Hoe maak je een responsieve transparante Login pagina in HTML en CSS?
- Hoe maak je een responsieve contact pagina template met behulp van HTML en CSS?
- Hoe maak ik een basis inlog-en registratieformulier met behulp van HTML en CSS?
- Hoe maak je een responsieve 404 pagina niet gevonden in HTML en CSS?