Dans cet article, nous allons apprendre à créer un formulaire d’inscription réactif en HTML et CSS. Nous verrons également comment ajouter une validation de mot de passe simple en utilisant javascript.
Pour tout type de site web, un formulaire d’inscription est indispensable. Les clients auront un moyen facile d’en savoir plus sur votre organisation si vous avez un formulaire d’inscription sur votre site Web. Plus important encore, vous permettez à votre entreprise d’accéder au bon type d’abonnés et à leurs données (avec leur permission, bien sûr).
Le code de ce modèle de formulaire d’inscription est simple et facile à comprendre. Pour notre commodité, nous avons inclus le style et le code javascript dans le fichier HTML principal. nous avons utilisé le formulaire HTML pour donner une structure de base au formulaire d’inscription. Nous avons essayé de créer un design neumorphique pour ce formulaire.
Pour la validation du mot de passe, nous avons utilisé le pattern matching regex en utilisant javascript. Pour en savoir plus à ce sujet, visitez – Expressions régulières. Pour cette conception particulière, nous avons défini le modèle de mot de passe de sorte qu’il soit alphanumérique avec 8 à 15 caractères. Si le mot de passe entré par l’utilisateur ne suit pas le modèle, la bordure du champ de saisie du mot de passe devient rouge et si elle correspond, elle devient verte. Similaire est également pour confirmer le mot de passe. De plus, le formulaire vérifie également si le mot de passe entré dans le champ de saisie confirmer le mot de passe correspond ou non au mot de passe précédemment entré.
Voici le code source du formulaire d’inscription HTML. Nous vous recommandons de regarder la vidéo intégrée ci-dessous avec le code.
CODE:
Vous pouvez télécharger le code HTML du formulaire d’inscription à partir de ce lien.
Lire aussi:
- Comment créer une Page de connexion Transparente et Réactive en HTML et CSS?
- Comment créer un modèle de page contactez-nous réactif en utilisant HTML et CSS?
- Comment créer un formulaire de connexion de base et un formulaire d’inscription en utilisant HTML et CSS?
- Comment rendre la page Responsive 404 introuvable en HTML et CSS?