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 46 templates au 24 10 2021

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. Html CodexTemplate (CSS pur)
8. Kerimov AgilTemplate (JS)
9. Mykhalchuk AndrewTemplate
10. Nedev Kamen 2Template (JS, jQuery)

Fenêtre de connexion et d'enregistrement
1. Eckhart AlexanderTemplate (JS, jQuery, Bootstrap)
2. Grozdic IvanTemplate (Css, Bootstrap)
3. Hasan MohamedTemplate (JS, jQuery, Bootstrap)
4. Helper ScriptTemplate (CSS, JS)
5. Hermanson EricTemplate (JS, jQuery)
6. Izi ModalModal Window (JS, jQuery)
7. Kvist DanielTemplate (JS)
8. Kang James ou Ms.ambariTemplate (JS, jQuery)
9. Nauval Azhar MuhamadTemplate (JS, jQuery, Bootstrap)
10. Nguyen HoangTemplate (JS)
11. Sami YousefTemplate (JS, jQuery, Bootstrap)
12. SmartEyeApps 2Template (JS, jQuery, Bootstrap)
13. Sorosky JoshTemplate (JS, jQuery)
14. Tabak KristinaTemplate (Bootstrap 4)
15. Tran Andy 2Template (JS)
16. Vineeth.TRTemplate
17. W3 HubsTemplate (Bootstrap 5)

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. 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. Kantner JonTemplate (JS)
11. Nedev KamenTemplate + Forgot password(JS, jQuery, Twinmax)
12. Ozturk IbrahimAnimation (jQuery)
13. Pasianotto RiccardoTemplate d'enregistrement (JS, jQuery)
14. Php JabbersTemplate
15. SmartEyeAppsTemplate (Bootstrap 5)
16. Tutorial ZineTemplate (JS, jQuery)
17. Vineeth.TR 2Template
18. W3 LayoutsTemplate (Css pur)
19. 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]

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]

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

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]

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]

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]

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]

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]

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]

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
- TROP PETIT SUR MOBILE

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]

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]

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]

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 !