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 19 04 2021

Fenêtre de connexion, d'enregistrement et de mot de passe oublié
1. Adventures in MissionsTemplate (JS, jQuery)
2. Avan C.Template (CSS pur)
3. Begovic MarinTemplate (JS, jQuery, Bootstrap)
4. Carlsson EmilTemplate avec modale (jQuery)
5. Html CodexTemplate (CSS pur)
6. Mykhalchuk AndrewTemplate
7. Nedev Kamen 2Template (JS, jQuery)

Fenêtre de connexion et d'enregistrement
1. Batura AnnaTemplate (JS, jQuery)
2. Eckhart AlexanderTemplate (JS, jQuery, Bootstrap)
3. Hasan MohamedTemplate (JS, jQuery, Bootstrap)
4. Hazelton IanTemplate
5. Helper ScriptTemplate (CSS, JS)
6. Hermanson EricTemplate (JS, jQuery)
7. Izi ModalModal Window (JS, jQuery)
8. Kvist DanielTemplate (JS)
9. Nauval Azhar MuhamadTemplate (JS, jQuery, Bootstrap)
10. Oliva Alonso RicardoTemplate (Css, JS)
11. Sami YousefTemplate (JS, jQuery, Bootstrap)
12. Santos DanyTemplate (JS, jQuery)
13. SmartEyeApps 2Template (JS, jQuery, Bootstrap)
14. Sorosky JoshTemplate (JS, jQuery)
15. Tabak KristinaTemplate (Bootstrap 4)
16. Talanov NikolayTemplate (JS)
17. Tran AndyTemplate (JS)
18. Tran Andy 2Template (JS)
19. TympanusTemplate (CSS3, HTML5)
20. Vineeth.TRTemplate
21. W3 HubsTemplate (Bootstrap 5)
22. Yang CharlieTemplate (JS, jQuery)

Fenêtre de connexion ou d'enregistrement simple
1. AzmindTemplate (JS, jQuery, Bootstrap)
2. Blow DivineTemplate (CSS pur)
3. BootdeyModal Window (JS, jQuery, Bootstrap)
4. Code HimTemplate (JS, jQuery, Bootstrap)
5. ColorlibTemplate (JS, jQuery, Bootstrap)
6. Colorlib 2Template (JS, jQuery, Bootstrap)
7. Colorlib 3Template (JS, jQuery, Bootstrap)
8. Geeks For GeeksTemplate + modale (Css quasi pur)
9. Goktepe AtakanTemplate d'enregitrement (JS, jQuery)
10. Jadhao NikitaTemplate (JS, jQuery)
11. Kantner JonTemplate (JS)
12. Luiz MayconTemplate (JS, jQuery)
13. Nedev KamenTemplate + Forgot password(JS, jQuery, Twinmax)
14. Nxusani CheAnimation (JS, jQuery)
15. Ozturk IbrahimAnimation (jQuery)
16. Pasianotto RiccardoTemplate d'enregistrement (JS, jQuery)
17. Php JabbersTemplate
18. SmartEyeAppsTemplate (Bootstrap 5)
19. Tutorial ZineTemplate (JS, jQuery)
20. Vineeth.TR 2Template
21. W3 LayoutsTemplate (Css pur)
22. W3 SchoolsTemplate avec Tuto + modale (Css pur)
23. Zone WebTemplate + modale (JS, jQuery)

Services supprimés ou non Pris en Compte (PeC)
1. Ad Says (le 10-11-2020, site inaccessible)

A droite, au milieu de l'écran,
l'accès par catégorie ->

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é

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

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

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

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

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

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

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

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

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

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 !

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 !

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 !

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

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

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

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

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

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

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é

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

Références

Site web

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