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 63 templates au 24 01 2022

Fenêtre de connexion, d'enregistrement et de mot de passe oublié
1. Adventures in MissionsTemplate (JS, jQuery)
2. Begovic MarinTemplate (JS, jQuery, Bootstrap)
3. Beznosko AndrewTemplate (CSS pur)
4. Bianchi FabrizioTemplate (CSS pur)
5. Bianchi Fabrizio 2Template (CSS pur)
6. Carlsson EmilTemplate avec modale (jQuery)
7. Eriksen JakobTemplate (CSS pur)
8. Html CodexTemplate (CSS pur)
9. Kerimov AgilTemplate (JS)
10. Mareddy Sreetha ReddyTemplate (jQuery, Bootstrap)
11. Mykhalchuk AndrewTemplate
12. Nedev Kamen 2Template (JS, jQuery)
13. Saud NourTemplate (CSS, JS)
14. Zsolt AnnarTemplate (JS, jQuery)

Fenêtre de connexion et d'enregistrement
1. Adhikari PuskarTemplate (JS)
2. Corti GabrieleTemplate (JS, React.js)
3. Eckhart AlexanderTemplate (JS, jQuery, Bootstrap)
4. Fernandez Grado PabloTemplate (CSS, JS)
5. Grozdic IvanTemplate (Css, Bootstrap)
6. Hasan MohamedTemplate (JS, jQuery, Bootstrap)
7. Helper ScriptTemplate (CSS, JS)
8. Hermanson EricTemplate (JS, jQuery)
9. Izi ModalModal Window (JS, jQuery)
10. Kvist DanielTemplate (JS)
11. Kang James ou Ms.ambariTemplate (JS, jQuery)
12. Kusuma Ardhana AldyTemplate (JS)
13. Nauval Azhar MuhamadTemplate (JS, jQuery, Bootstrap)
14. Nguyen HoangTemplate (JS)
15. Oliva Alonso RicardoTemplate (CSS, JS)
16. Rahman EftykharTemplate (CSS, JS)
17. Ro Hit BishtTemplate (JS)
18. Sami YousefTemplate (JS, jQuery, Bootstrap)
19. SmartEyeApps 2Template (JS, jQuery, Bootstrap)
20. Sorosky JoshTemplate (JS, jQuery)
21. Tabak KristinaTemplate (Bootstrap 4)
22. Tran Andy 2Template (JS)
23. Vineeth.TRTemplate
24. W3 HubsTemplate (Bootstrap 5)
25. Wells TraekTemplate (JS)

Fenêtre de connexion OU d'enregistrement simple
1. AzmindTemplate (JS, jQuery, Bootstrap)
2. Blow DivineTemplate (CSS pur)
3. Bold BrisTemplate (CSS pur)
4. BootdeyModal Window (JS, jQuery, Bootstrap)
5. Champion TomTemplate d'enregistrement (JS, jQuery)
6. ColorlibTemplate (JS, jQuery, Bootstrap)
7. Colorlib 2Template (JS, jQuery, Bootstrap)
8. Colorlib 3Template (JS, jQuery, Bootstrap)
9. Geeks For GeeksTemplate + modale (Css quasi pur)
10. Goktepe AtakanTemplate d'enregistrement (JS, jQuery)
11. Kantner JonTemplate (JS)
12. Martsoukos GeorgeTemplate d'enregistrement (CSS pur)
13. Nedev KamenTemplate + Forgot password(JS, jQuery, Twinmax)
14. Ozturk IbrahimAnimation (jQuery)
15. Pasianotto RiccardoTemplate d'enregistrement (JS, jQuery)
16. Perez Rivera NickTemplate d'enregistrement (CSS pur)
17. Php JabbersTemplate
18. Sarkar PranoyTemplate (CSS pur)
19. SmartEyeAppsTemplate (Bootstrap 5)
20. Template RajTemplate (CSS pur)
21. Ubah KingsleyTemplate (CSS pur)
22. Vineeth.TR 2Template
23. W3 LayoutsTemplate (Css pur)
24. Zone WebTemplate + modale (JS, jQuery)

Services supprimés ou non Pris en Compte (PeC)
1. Ad Says (supprimé le 10-11-2020, site inaccessible)
2. Batura Anna (supprimé le 22-10-2021, s'affichage mal sur mobile)
3. Code Him (supprimé le 22-10-2021, trop de pub)
4. Hazelton Ian (supprimé le 22-10-2021, s'affichage mal sur mobile)
5. Jadhao Nikita (supprimé le 22-10-2021, s'affichage mal sur mobile)
6. Luiz Maycon (supprimé le 22-10-2021, s'affichage mal sur mobile)
7. Nxusani Che (supprimé le 22-10-2021, s'affichage mal sur mobile)
8. Santos Dany (supprimé le 22-10-2021, s'affichage mal sur mobile)
9. Talanov Nikolay (supprimé le 22-10-2021, s'affichage mal sur mobile)
10. Tran Andy (supprimé le 22-10-2021, s'affichage mal sur mobile)
11. Tutorial Zine (supprimé le 22-10-2021, Trop petit sur mobile)
12. Tympanus + tuto (supprimé le 22-10-2021, s'affichage mal sur mobile)
13. W3 Schools + tuto (supprimé le 22-10-2021, obligé d'accepter les cookies)
14. Yang Charlie (supprimé le 22-10-2021, s'affichage mal sur mobile)

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]

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]

Beznosko Andrew

- Proposition très complète
- Avec fenêtre modale

Caractéristiques

En CSS pur
Contrôle de présence des champs et de cohérence de l'adresse mail
Design un peu "brut" mais parfaitement responsive

Image cliquable pour voir l'exemple

Références

Site web

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

Bianchi Fabrizio - Rome, Italie

Caractéristiques

Présentation originale et efficace
Aucun contrôle
Le formulaire se déplie ou se replie en fonction des besoins
Le curseur suit

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

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

Bianchi Fabrizio 2 - Rome, Italie

Caractéristiques

Présentation en accordéon
Aucun contrôle
Le formulaire se déplie ou se replie en fonction des besoins

Image cliquable pour voir l'exemple

Références

Site web

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

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]

Eriksen Jakob

Caractéristiques

CSS pur
Une seule dépendance; Normalize.css
Aucun contrôle
Copenhague, Danemark

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [09-11-2021 / 09-11-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]

Html Codex

Caractéristiques

Formulaire ultra complet
Il existe même la fonction "voir le mot de passe"
Contrôles de présence et de cohérence de tous les champs
Au positionnement le nom de la zone se déplace en exposant

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [09-10-2021 / 09-10-2021]

Mareddy Sreetha Reddy

Caractéristiques

CSS, Javascript, jQuery et Bootstrap 3.3.7
Sign up descend sour sign in en mode mobile, dommage !
Aucun contrôle
Hyderabad, Inde

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-11-2021 / 03-112021]

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]

Saud Nour

Caractéristiques

CSS, JS, rien d'autres
Aucun contrôle
Chacune des fonctions Login, Register, Forgot, Subscribe, Contact occupe une face du prisme
L'action 'Envoyer' est utilisée et amène sur une des faces du prisme : 'Merci'
Très très original
Menlo Park, Californie, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [24-01-2022 / 24-01-2022]

Zsolt Annar

Caractéristiques

CSS, JS, jQuery
Arrivée glissante de la fenêtre
Aucun contrôle, aucune action
Jolie présentation

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Fenêtre de connexion et d'enregistrement

Adhikari Puskar

- Du desktop au mobile

Caractéristiques

CSS, Javascript
Un popup pour la connexion, un autre pour l'enregistrement
Aucun contrôle, aucune action
Kathmandou, Népal

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-01-2022 / 06-01-2022]

Corti Gabriele

- Du desktop au mobile

Caractéristiques

CSS, Javascript
Glissement pour passer di 'login' au 'register' et vice-versa
Aucun contrôle
Dans
"@media (max-width: 650px) {
.App {
flex-direction: column;
border-radius: 0;
width: 100vw;
..."
Ne pas laisser "width: 100vw", cela génère un ascenseur bas en mode mobile
Citoyen Européen

Image cliquable pour voir l'exemple

Références

Site web

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

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]

Fernandez Grado Pablo

Caractéristiques

CSS, JS, rien d'autre
Passage de le connexion à l'enregistrement par superposition
Contrôle de cohérence de l'email
Option 'mot de passe en clair'

Image cliquable pour voir l'exemple

Références

Site web

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

Grozdic Ivan

Caractéristiques

Passage de le connexion à l'enregistrement par rotation verticale
Un seul état
CSS sans Javascript
Bootstrap 4.5
Aucun contrôle

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [31-07-2021 / 31-07-2021]

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]

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]

Kang James alias Ms.ambari - Indonésie

Caractéristiques

Forme transparente
CSS, JS, jQuery
Aucun contrôle de présence et de cohérence des champs

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-10-2020 / 11-10-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]

Kusuma Ardhana Aldy

- Du desktop au mobile

Caractéristiques

CSS, Javascript
Très joli mouvement adaptatif
Contrôle cohérence de l'email
Jakarta, Indonésie

Image cliquable pour voir l'exemple

Références

Site web

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

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-10-2020 / 31-10-2020]

Nguyen Hoang - Ho Chi Minh, Vietnam

Caractéristiques

CSS, JS
Aucun contrôle
Animation originale lors du passage &u mode enregistrement

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-10-2021 / 24-10-2021]

Oliva Alonso Ricardo

- Pas responsive

Caractéristiques

CSS, JS, rien d'autre
Pas de dépendance
Effet de neumorphisme
Passage de la connexion à l'enregistrement par glissement
Aucun contrôle, aucune action

Références

Site web

[Créé / modifié] [17-01-2022 / 17-01-2022]

Rahman Eftykhar

Caractéristiques

CSS, JS, rien d'autre
Contrôle de cohérence de l'adresse mail
On passe du login à l'enregistrement par un double glissement, horizontal en mode desktop, vertical en mode mobile
Rollover sur tous les boutons
Très réussi
Dhaka, Bangladesh

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [24-01-2022 / 24-01-2022]

Ro Hit Bisht

Caractéristiques

Passage de le connexion à l'enregistrement par glissement doux
CSS, Javascript, rien d'autre
Aucun contrôle ni envoi de la demande
Template design parfaitement responsive

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-11-2021 / 17-11-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]

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]

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]

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]

Wells Traek

- Du desktop au mobile

Caractéristiques

CSS, Normalize.css, Javascript
Classiquement la partie gauche passe en haut en mode mobile
Aucun contrôle, aucune action
Saint Paul, Minnesota, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-01-2022 / 06-01-2022]

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]

Blow Divine

- Exercice de style "glassmorphism"
- TROP PETIT SUR MOBILE

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]

Bold Bris

Caractéristiques

Template minimum de login
CSS pur
Contrôle de présence des champs
Animations intéressante au positionnement du curseur dans la zone de saisie

Références

Site web

[Créé / modifié] [24-10-2021 / 24-10-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]

Champion Tom - Enregistrement

Caractéristiques

Avec fenêtre modale en plein écran
CSS, JS, jQuery
Contrôle de présence des champs obligatoires
Proposition très propre

Références

Site web

[Créé / modifié] [29-12-2021 / 29-12-2021]

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