Login/register form en CSS3, Html5 (+Bootstrap)

Présentation

Pour parfaire le design de votre site web, un formulaire de login élégant et efficace est nécessaire.

Dans un premier temps les services qui offrent un template complet (connexion, enregistrement, mot de passe) puis ceux qui proposent la connexion et l'enregistrement et enfin les simples templates de login.

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 52 templates au





 

Fenêtre de connexion, d'enregistrement et de mot de passe oublié

Adventures in Missions

Caractéristiques

  • Avec fenêtre modale
  • Javascript, jQuery
  • Contrôle présence des champs pas top !
  • Contrôles de cohérence password ou email (erreur sur le contrôle email)
  • Show password

Image cliquable pour voir l'exemple

login/registration/password form

Références

Site web

[Créé / modifié] [28-02-2019 / [28-02-2019]

Avan C. sur CodePad.co

- Aspect moderne assez réussi !

Caractéristiques

  • En CSS pur
  • "Reset" pour le mot de passe oublié
  • Aucun contrôle ni champ géré

Image cliquable pour voir l'exemple

template de login, register form en CSS pur

Références

Site web

[Créé / modifié] [28-02-2021 / 28-02-2021]

Begovic Marin

- Un des rares template à traiter le mot de passe oublié

Caractéristiques

  • Avec fenêtre modale
  • Bootstrap 3.3.7
  • Javascript, jQuery
  • Contrôle présence champs
  • Aucun contrôle de cohérence password ou email

Image cliquable pour voir l'exemple

template de login, register form avec Bootstrap

Références

Site web

[Créé / modifié] [24-12-2018 / 24-12-2018]

Carlsson Emil - Jonkoping, Suède

- Proposition très complète

Caractéristiques

  • Avec fenêtre modale
  • CSS, Normalize.css, jQuery
  • Contrôle de cohérence de l'email (un peu bizarre)
  • Icônes, terms, show password.
  • Le top !

Image cliquable pour voir l'exemple

menu avec connexion/enregistrement/oubli du mot de passe

Références

Site web

Site de l'auteur

[Créé / modifié] [14-01-2021 / 14-01-2021]

Html Codex

Caractéristiques

  • Simple template avec 3 pages, une par action
  • HTML5 et CSS3 purs
  • Aucune dépendance
  • Contrôles de cohérence de l'email et de présence des champs obligatoires
  • Logo ajustable facilement
  • Très simple et facile à utiliser

Image cliquable pour voir l'exemple

template de connexion, indcription gratuit en html5 et css3

Références

Site web

[Créé / modifié] [15-03-2021 / 15-03-2021]

Mykhalchuk Andrew

Caractéristiques

  • CSS, Animate.css, Javascript, jQuery, Parsley.js
  • Bootstrap 3.3.5
  • Avec fenêtre modale
  • Contrôles de cohérence de l'email et de présence des champs obligatoires
  • Envoi effectif
  • Très complet

Image cliquable pour voir l'exemple

formulaire de login/register gratuit tres complet

Références

Site web

[Créé / modifié] [01-02-2021 / 01-02-2021]

Nedev Kamen 2

Caractéristiques

  • Javascript, jQuery
  • Aucun contrôle
  • Quand on quitte la fenêtre de 'login', on ne peut plus y revenir

Image cliquable pour voir l'exemple

cré un formulaire de login par prisme rectangulaire rotatif

Références

Site web

[Créé / modifié] [04-09-2020 / 04-09-2020]

 

Fenêtre de connexion et d'enregistrement

Batura Anna

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • Javascript, jQuery
  • Aucun contrôle
  • Pas responsive, dommage !

Image cliquable pour voir l'exemple

template de login/registration gratuit

Références

Site web

[Créé / modifié] [18-06-2020 / 18-06-2020]

Eckhart Alexander

Caractéristiques

  • Passage de la connexion à l'enregistrement par rotation
  • Bootstrap 3.3.4
  • Javascript, jQuery
  • Contrôle de présence champs avec signalement par vibration
  • Contrôle de cohérence du mot de passe entre les deux saisies

Image cliquable pour voir l'exemple

login form avec effet de rotation pour passer aau mode registration

Références

Site web

[Créé / modifié] [24-12-2018 / 24-12-2018]

Hasan Mohamed

Caractéristiques

  • Passage de le connexion à l'enregistrement par double glissement
  • 2 états : Desktop; Tablette, mobile
  • CSS, Javascript, jQuery
  • Bootstrap 3.3.7
  • Contrôle : Présence des champs obligatoires; Cohérence de l'email
  • Envoi de la demande
  • Template très complet et très sympa

Image cliquable pour voir l'exemple

login/registration form construit avec jQuery et Bootstrap

Références

Site web

[Créé / modifié] [21-11-2020 / 21-11-2020]

Hazelton Ian

Caractéristiques

  • CSS, Normalize.css, jQuery
  • Aucun contrôle de présence des champs
  • Contrôle de cohérence de l'email
  • Envoi de la demande
  • Très jolie proposition
  • Utilité du 'reset' discutable

Image cliquable pour voir l'exemple

menu proposant une solution de connexion/enregistrement originale

Références

Site web

[Créé / modifié] [14-01-2021 / 14-01-2021]

Helper Script

Caractéristiques

  • Simple template
  • CSS, JS, pas d'autre dépendance
  • Contrôles de cohérence de l'email seulement
  • Simple à utiliser

Image cliquable pour voir l'exemple

template de connexion, indcription avec CSS et Javascript seuls

Références

Site web

[Créé / modifié] [15-03-2021 / 15-03-2021]

Hermanson Eric

Caractéristiques

  • Javascript, jQuery
  • Normalize
  • Contrôle présence champs et cohérence email

Image cliquable pour voir l'exemple

login form

Références

Site web

[Créé / modifié] [23-12-2018 / 23-12-2018]

Izi Modal - Dolza Marcelo

Caractéristiques

  • Avec fenêtre modale
  • Belle transition d'affichage de la fenêtre
  • Par Dolza Marcelo
  • Javascript, jQuery
  • La validation est accompagnée d'une vibration de la fenêtre toute entière, on ne sait pas pourquoi
  • Une fois la zone saisie le 'label' disparait
  • Sortie uniquement par la croix

Image cliquable pour voir l'exemple

une très belle login form à partir d'une modal window

Références

Site web

[Créé / modifié] [07-09-2020 / 07-09-2020]

Kvist Daniel

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • CSS, Normalize.css, Javascript
  • Belle transition
  • Aucun contrôle de présence des champs
  • Contrôle de cohérence de l'email
  • Joli effet de transparence

Image cliquable pour voir l'exemple

installer rapidement une login/registration form sur son site web

Références

Site web

[Créé / modifié] [07-09-2020 / 07-09-2020]

Nauval Azhar Muhamad

Caractéristiques

  • Javascript, jQuery, Popper.js
  • Bootstrap 4.3
  • Contrôles de présence des champs et de validité de l'adresse mail
  • Show password
  • Design agréable

Image cliquable pour voir l'exemple

cré un formulaire de login simple et complet avec Bootstrap

Références

Site web

[Créé / modifié] [31-102020 / 31-10-2020]

Oliva Alonso Ricardo - Neumorphisme

- Neumorphisme ou soft UI : Donner du réalisme en jouant sur la profondeur grâce aux ombres
- Pas responsive

Caractéristiques

  • CSS, JS rien d'autre
  • Les deux fenêtres glissent très joliment l'une sur l'autre
  • Design tendance

Image cliquable pour voir l'exemple

cré un formulaire de login simple et complet avec Bootstrap

Références

Site web

[Créé / modifié] [19-04-2021 / 19-04-2021]

Sami Yousef

Caractéristiques

  • Passage de le connexion à l'enregistrement par recouvrement circulaire après déplacement du bouton
  • 2 états (discutables): Desktop, tablette; Mobile
  • CSS, Javascript, jQuery
  • Bootstrap
  • Aucun contrôle ni envoi de la demande
  • Template design

Image cliquable pour voir l'exemple

login/registration template design

Références

Site web

[Créé / modifié] [21-11-2020 / 21-11-2020]

Santos Dany

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • Belles transitions
  • Javascript, jQuery
  • Aucun contrôle
  • Pas responsive

Image cliquable pour voir l'exemple

login form avec transition mais sans controle

Références

Site web

[Créé / modifié] [21-04-2019 / 21-04-2019]

SmartEyeApps 2 + Sign in

Caractéristiques

  • CSS, jQuery, Popper.js
  • Bootstrap 4
  • Réseaux sociaux prévus
  • Aucun contrôle

Image cliquable pour voir l'exemple

template gratuit de login form

Références

Site web

[Créé / modifié] [02-08-2020 / 02-08-2020]

Sorosky Josh

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement de la partie basse
  • CSS, Javascript, jQuery
  • Aucun contrôle
  • Fenêtre de bonjour aprè connexion
  • Fenêtre de message après inscription
  • Après envoi, la fenêtre se referme joliment

Image cliquable pour voir l'exemple

template gratuit de login/registration avec de belles transitions de fin

Références

Site web

[Créé / modifié] [26-08-2020 / 26-08-2020]

Tabak Kristina

Caractéristiques

  • CSS, Javascript, jQuery, Popper.js
  • Bootstrap 4.3
  • Contrôle de présence des champs
  • Contrôle de cohérence de l'adresse mail
  • Ensemble cohérent

Image cliquable pour voir l'exemple

login/registration form avec Bootstrap 4.3

Références

Site web

[Créé / modifié] [07-12-2020 / 07-12-2020]

Talanov Nikolay

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • Superbe transition pour passer du mode connexion au mode enregistrement
  • CSS presque pur, à peine de Javascript
  • Aucun contrôle
  • Pas responsive, dommage !

Image cliquable pour voir l'exemple

fenetre de connexion, enregistrement en CSS pur

Références

Site web

[Créé / modifié] [23-12-2018 / 23-12-2018]

Tran Andy

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • Transition trop brutale
  • Javascript, jQuery
  • Contrôle d'existence uniquement sur la partie login
  • Pas responsive

Image cliquable pour voir l'exemple

login form

Références

Site web

[Créé / modifié] [21-04-2019 / 21-04-2019]

Tran Andy 2

Caractéristiques

  • Passage du 'login' au 'sign in' par double glissements : Le 'login' s'échappe par le haut et le 'sign in' apparait par le bas
  • Transitions agréables
  • Javascript, jQuery
  • Aucun contrôle
  • Pas responsive
  • Habite à San Fransisco, CA

Image cliquable pour voir l'exemple

login form de login et de sign in

Références

Site web

Site de l'auteur

[Créé / modifié] [11-02-2021 / 11-02-2021]

Tympanus - Tuto

Caractéristiques

  • Avec tutoriel
  • Passage de le connexion à l'enregistrement par fondu enchaîné
  • Pur CSS3/HTML5
  • Contrôle présence champs
  • Contrôles de cohérence email
  • Pas responsive

Image cliquable pour voir l'exemple

login form

Références

Site web

[Créé / modifié] [22-05-2020 / [22-05-2020]

Vineeth.TR

Caractéristiques

  • Passage de le connexion à l'enregistrement par recouvrement circulaire après déplacement du bouton
  • En d'autres mots : La couleur du bouton "+" remplit l'espace disponible pour ouvrir la fonction d'enregistrement
  • 1état
  • Aucun contrôle

Image cliquable pour voir l'exemple

template de login/registration gratuit avec transition mais sans controle

Références

Site web

[Créé / modifié] [08-01-2021 / [08-01-2021]

W3 Hubs

Caractéristiques

  • Avec fenêtre modale
  • CSS, JS, Popper.js
  • Boostrap 5
  • Contrôles de présence des champs et de cohérence de l'email
  • Réseaux sociaux prévus
  • très propre

Image cliquable pour voir l'exemple

login form

Références

Site web

[Créé / modifié] [27-12-2020 / 27-12-2020]

Yang Charlie

Caractéristiques

  • Passage de le connexion à l'enregistrement par glissement
  • CSS, JS, jQuery
  • Aucun contrôle
  • Pas responsive

Image cliquable pour voir l'exemple

template de connexion/enregistremant

Références

Site web

[Créé / modifié] [21-09-2020 / [21-09-2020]

 

Fenêtre de connexion simple

Azmind

Caractéristiques

  • 3 états : Desktop; Tablette; Mobile
  • CSS, Javascript, jQuery
  • Bootstrap 3.3
  • Contrôle présence champs
  • Contrôle de cohérence de l'email

login form simple sur base Bootstrap

Références

Site web

[Créé / modifié] [18-06-2020 / 18-06-2020]

Azmind

- Exercice de style "glassmorphism"

Caractéristiques

  • Pour mobile
  • CSS et très peu de Javascript
  • Aucun contrôle
  • Le 'voir mot de passe', seul, fonctionne
  • L'animation nous fait oublier le sujet de la page

login form simple sur base Bootstrap

Références

Site web

[Créé / modifié] [28-02-2021 / 28-02-2021]

Bootdey

Caractéristiques

  • Avec fenêtre modale
  • CSS, Javascript, jQuery
  • Bootstrap 3.3
  • Réseaux sociaux prévus
  • Aucun contrôle
  • Présentation nickel !
  • Il manque "jQuery_v1.11.1.js" dans le code proposé

login form sur base Bootstrap avec modal dialog window

Références

Site web

[Créé / modifié] [12-11-2020 / 12-11-2020]

Code Him

Site de ressources

Caractéristiques

  • Avec tuto
  • Menu de login intégré à la barre de navigation
  • 2 états Mobile; Bureau, tablette
  • Javascript, jQuery
  • Bootstrap 3.3
  • Contrôle présence champs et cohérence email

login form en barre de navigation pour votre site web

Références

Site web

[Créé / modifié] [03-08-2020 / 03-08-2020]

Colorlib

- 60 formulaires de connexion HTML5 et CSS3 gratuits pour site Web, forum ou WordPress

Caractéristiques

  • 2 états : Bureau, tablette; Mobile
  • CSS, Animate.css, Hamburgers.css, Javascript, jQuery
  • Bootstrap 4.0
  • Contrôle présence champs et cohérence email

template de login complet avec animate, hamburgers et Bootstrap

Références

Site web

[Créé / modifié] [23-12-2018 / 23-12-2018]

Colorlib 2

Caractéristiques

  • 2 états : Bureau, tablette; Mobile
  • CSS, animate.css, Animsition.css, Javascript, jQuery, Daterangepicker, Select2, Popper.js
  • Bootstrap 4.0
  • Contrôle présence champs et cohérence email
  • Réseaux sociaux prévus

template de connexion pour votre sibe web sur base Bootsrap 4

Références

Site web

[Créé / modifié] [23-12-2018 / 23-12-2018]

Colorlib 3

Caractéristiques

  • 2 états : Bureau, tablette; Mobile
  • CSS, animate.css, Animsition.css, Javascript, jQuery, Daterangepicker, Select2, Popper.js
  • Bootstrap 4.0
  • Contrôle présence champs et cohérence email
  • Show password

login form simple avec Bootstrap

Références

Site web

[Créé / modifié] [23-12-2018 / 23-12-2018]

Geeks For Geeks

- Fenêtre de login avec modale

Caractéristiques

  • 1 état multisupport
  • CSS, très très peu de JS
  • Contrôle présence champs
  • Ultra simple

login form simple avec modal window

Références

Site web

[Créé / modifié] [08-04-2021 / 08-04-2021]

Goktepe Atakan

Caractéristiques

  • Template d'enregistrement
  • Passage d'une fenêtre à l'autre par glissement
  • Trois étapes d'enregistrement. Il y a un accès direct à une étape
  • Javascript, jQuery
  • Aucun contrôle

registration form responsive

Références

Site web

[Créé / modifié] [15-12-2020 / 15-12-2020]

Jadhao Nikita

Caractéristiques

  • Template de login sur une seule ligne avec saisie progressive
  • CSS, Normalize.css, Javascript, jQuery
  • Par Nagpur, India
  • Contrôle de présence des champs
  • Contrôle de cohérence de l'adresse mail
  • Possibilité de retour, en accès direct, à chaque champ saisi
  • Bouton d'affichage en clair du mot de passe par maintien du clic
  • Pas responsive
  • Très beau concept, très abouti

formulaire de connexion sur une seule ligne  par saisie progressive

Références

Site web

[Créé / modifié] [07-12-2020 / 07-12-2020]

Kantner Jon

Caractéristiques

  • Template de login sur une seule ligne avec saisie progressive
  • Prisme rectangulaire rotatif
  • CSS, Javascript
  • Contrôle de présence des champs

cré un formulaire de login par prisme rectangulaire rotatif

Références

Site web

[Créé / modifié] [04-09-2020 / 04-09-2020]

Luiz Maycon

Caractéristiques

  • Gestion originale par ouverture d'une fenêtre "Need Help ?" qui propose 3 possibilités : Forgot password; Contact; Create account
  • Animate.min.css, Normalize.min.css, Javascript, jQuery, Modernizr.min.js
  • Aucun contrôle
  • jolie proposition

template de login tres design

Références

Site web

[Créé / modifié] [31-102020 / 31-10-2020]

Nedev Kamen

Caractéristiques

  • Avec fenêtre modale et forgot password
  • Tout en transparence
  • Javascript, jQuery, TwinMax
  • Aucun contrôle
  • Superbe !

formulaire de login tout en transparence avec modal window

Références

Site web

[Créé / modifié] [04-09-2020 / 04-09-2020]

Nxusani Che

Caractéristiques

  • Très belle animation. C'est comme si on tournait une page
  • CSS, Normalize.css, Javascript, jQuery
  • Aucun contrôle
  • Se referme après envoi
  • Pas responsive, quel dommage !

une des meilleure animation de login form

Références

Site web

[Créé / modifié] [07-09-2020 / 07-09-2020]

Ozturk Ibrahim

Caractéristiques

  • Très belle présentation sobre et élégante
  • Quand on se positionne dans une zone, le 'label' est déporté en haut et à gauche de la zone et un icône apparaît.
  • CSS, jQuery
  • Aucun contrôle
  • Se referme très joliment après envoi
  • Beau concept !

une des meilleure animation de login form avec de superbes transitions

Références

Site web

[Créé / modifié] [15-03-2021 / 04-11-2020]

Pasianotto Riccardo - Enregistrement

Caractéristiques

  • Template d'enregistrement
  • Avec enregistrement sur une seule ligne pour une saisie progressive
  • Javascript, Normalize.css, jQuery
  • Contrôle de cohérence de l'email
  • Pas responsive

login form

Références

Site web

[Créé / modifié] [28-02-2019 / 28-02-2019]

PhpJabbers Com

Caractéristiques

  • Template de login en PHP
  • jQuery et Bootstrap 3.0
  • Contrôle de cohérence de l'email et des champs obligatoires
  • Et aussi beaucoup d'autres scripts sur cet annuaire

login form

Références

Site web

[Créé / modifié] [01-02-2021 / 01-02-2021]

SmartEyeApps

Caractéristiques

  • Bootstrap 5
  • Belles transitions
  • Aucun contrôle
  • Réseaux sociaux prévus
  • Pas responsive
  • Belle transparence

template gratuit de login form avec une belle transparence

Références

Site web

[Créé / modifié] [02-08-2020 / 02-08-2020]

Tutorial Zine

Caractéristiques

  • Avec Forgot password
  • Passage de la connexion au forgot password par rotation
  • Aucun contrôle
  • Pas reponsive

login form style Apple

Références

Site web

[Créé / modifié] [07-04-2019 / 07-04-2019]

Vineeth.TR 2

Caractéristiques

  • Template de login sur une seule ligne pour une saisie progressive
  • On est obligé d'effectuer une saisie pour passer au champ suivant
  • Affichage d'un icône spécifique à chaque champ
  • Retour arrière champ par champ
  • CSS, Javascript, jQuery
  • Le curseur n'est pas positionné dans le champ

template de login/registration monoligne avec saisie obligatoire

Références

Site web

[Créé / modifié] [08-01-2021 / [15-03-2021]

W3 Layouts

Caractéristiques

  • Pub très pénible sur ce site
  • Contrôles de présence des champs

login form

Références

Site web

[Créé / modifié] [23-02-2019 / 23-02-2019]

W3 Schools - Tuto + fenêtre modale

Caractéristiques

  • Avec fenêtre modale et tuto
  • CSS pur. Le JS ne servant qu'à sortir de la modale en cliquant à côté
  • W3 Schools propose un éditeur qui vous permet de voir instantanément l'effet de vos modifications de code.
  • Contrôles de présence des champs
  • Résultat de l'envoi affiché

login form avec fenetre modale et tutoriel

Références

Site web

[Créé / modifié] [13-10-2020 / 13-10-2020]

Zone Web

Caractéristiques

  • Avec fenêtre modale et tuto
  • Ouverture de la fenêtre sympa !
  • CSS, JS, jQuery, Materialize
  • Aucun contrôle

template de connexion avec modal window

Références

Site web

[Créé / modifié] [15-12-2020 / [15-12-2020]