Comment créer un formulaire de connexion avec HTML et CSS
Un formulaire de connexion permet à un utilisateur de s’authentifier avant d’accéder à son compte.
Dans ce tutoriel, je vais vous apprendre à :
- structurer une page de connexion avec avec HTML ;
- la mettre en forme avec CSS.
Avant de commencer, voici le rendu final de notre formulaire de connexion
Commençons par :
- Structurer notre page de connexion avec HTML
En utilisant un éditeur de texte un peu intelligent (sublime, vs code, etc…), il vous suffit juste de taper un point d’exclamation (!), puis valider sur la touche entrée de votre clavier et vous aurez automatiquement l’essentiel du code HTML.
NB : Nous allons insérer nos code dans le corps (body) de notre code HTML
- Commençons par définir une balise div qui va nous aider à regrouper nos codes de connexion :
- A l’intérieur de la balise div, déclarons ensuite notre formulaire de connexion :
- A l’intérieur de la balise form, définissons notre titre du premier niveau :
- En suite, nous allons définir les zones de textes où l’utilisateur devra faire la saisie de ses identifiants, ainsi que le bouton de connexion
Bravo, nous venons de créer notre formulaire de connexion avec HTML. Passons maintenant à la deuxième phase.
2. La mettre en forme avec CSS
Nous allons maintenant mettre en forme notre page de connexion HTML avec le style CSS
- Commençons par changer la couleur de fond de notre page
- Définissons les marge de notre container
- Mettons en forme maintenant formulaire
- Mettons en forme notre titre du premier niveau
- Mise en forme de zones de texte en plein largeur
- Définissons un style pour tous les boutons
- Déclarons qu’en pausons le curseur sur notre bouton de connexion, que cette dernière change de couleur
Et voilà, nous venons de terminer la mise en forme de notre page de connexion HTML mais n’oubliez pas de mettre en relation notre page HTML et CSS. Pour ce faire, nous allons ajouter ce code sur notre fichier HTML.
Pour clore, dans ce tuto, nous avons présenter comment créer un formulaire de connexion avec HTML et CSS.
Vous pouvez avoir l’intégralité de code source abordés dans cet article sur mon compte Github.
Si vous avez de question, n’hésitez pas à nous contacté sur LinkedIn.
Si vous avez aimé, n’hésitez pas de partager le lien de l’article avec vos ami-e-s.