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





 

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]

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]

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

template de eonnexionet d'enregistrement en CSS pur

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

template de connexion accordeon

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

template de connexion accordeon

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

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]

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

template de connexion tres complet

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

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

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]

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

login/registration form avec Bootstrap

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

login/registration form construit avec jQuery et Bootstrap

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

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]

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

transparente forme

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

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]

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

login form avec effet d'escalier pour passer a l'enregistrement

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

login/registration template design

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

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]

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]

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]

 

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]

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

login form simple sur base Bootstrap

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

login form simple de connexion

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é

login form sur base Bootstrap avec modal dialog window

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

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

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]

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]

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]

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]

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]

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]