Si vous avez déjà travaillé avec des formulaires HTML, ce code vous semblera familier. Mais il y a aussi quelques particularités. Les champs comportent des espaces réservés et certains attributs nouveaux.

Espaces réservés

L'attribut placeholder vous permet d'inclure du texte par défaut dans un champ qui disparaîtra lorsque l'élément recevra le focus ou lorsque le champ sera rempli. Nous faisions cela en utilisant JavaScript, mais maintenant tout est devenu beaucoup plus simple grâce aux nouveaux attributs.

attribut "obligatoire"

L'attribut obligatoire empêche les champs de rester vides jusqu'à ce que le formulaire soit soumis. Si l'utilisateur ne remplit pas le champ, l'erreur suivante apparaît.

Un nouveau sélecteur est également inclus dans CSS3 (:obligatoire). Voici un exemple :

Entrée (bordure : 1px rouge uni ; )

Types de champs

Notre premier champ est de type email (les types de saisie sont une autre innovation HTML5). Si l'utilisateur ne remplit pas le champ de l'adresse e-mail, la notification suivante apparaîtra :

L'utilisation d'une telle saisie est également pratique car il sera plus pratique pour les utilisateurs d'appareils mobiles (iPhone ou Android) de remplir le champ avec le champ en surbrillance. «@» .

Les nouvelles fonctionnalités proposées pour les formulaires HTML5 sont puissantes et faciles à mettre en œuvre, mais elles ne sont pas supportées partout par exemple ;

attribut d'espace réservé seul support navigateurs modernes - Firefox 3.7+, Safari 4+, Chrome 4+ et Opera 11+. Si vous souhaitez résoudre ce problème, utilisez cette béquille en combinaison avec Modernizr.

Idem avec l'attribut obligatoire. La notification d'erreur ne peut pas être personnalisée, mais l'erreur restera : "Veuillez remplir les champs" à la place
"Veuillez entrer un nom", cet attribut n'est également pris en charge que dans les navigateurs normaux.

Étiquette ( affichage : bloc ; couleur : # 999 ; ) .cf :avant , .cf :après ( contenu : "" ; affichage : tableau; ) .cf :après ( clair : les deux ; ) .cf ( *zoom: 1 ; ) :focus ( contour : 0 ; )

Tous les champs, à l'exception du champ "Soumettre", auront les styles suivants :

Entrée de connexion : not ([ type=submit] ) ( padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 . 3 ) ; rayon de bordure : 3px ; box-shadow : encart 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 . 1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 . 5 ) ; }

Et voici les styles du bouton pour soumettre le formulaire.

Entrée de connexion[ type=submit] ( border : 1px solid rgba(0 , 0 , 0 , 0 . 3 ) ; arrière-plan : #64c8ef ; /* Anciens navigateurs */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linéaire, haut gauche, bas gauche, color-stop( 0 % ,#64c8ef ) , arrêt de couleur( 100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ arrière-plan : -webkit-linear-gradient(haut , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ arrière-plan : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ arrière-plan : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : gradient linéaire (vers le bas, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filtre : progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" , GradientType=0 ) ; /* IE6-9 */ couleur : #fff ; remplissage : 5px 15px ; marge droite : 0 ; marge supérieure : 15 px ; rayon de bordure : 3px ; texte-ombre : 1px 1px 0px rgba(0 , 0 , 0 , 0 . 3 ) ; }

C'est tout! Nous espérons que vous avez trouvé ce tutoriel utile.

Le champ de saisie du mot de passe est un champ de texte normal, dans lequel le texte saisi, selon le navigateur, est affiché sous forme d'astérisques ou de points. Cette fonctionnalité est conçue pour empêcher quiconque de fouiner sur le mot de passe saisi. Bien que le texte saisi ne s'affiche pas à l'écran, les informations saisies sont transmises au serveur en texte clair sans cryptage. Par conséquent, l’utilisation de ce champ ne garantit pas la sécurité des données et celles-ci peuvent être interceptées.

La syntaxe de création est la suivante.

Les attributs sont les mêmes que ceux du champ texte et sont répertoriés dans le tableau. 1.

Le champ du mot de passe est largement utilisé sur les sites Web pour autoriser les utilisateurs et restreindre l'accès aux sections du site Web dans lesquelles vous devez confirmer vos informations d'identification. L'exemple 1 montre comment créer de tels champs.

Exemple 1. Champ de mot de passe

En conséquence, nous obtenons ce qui suit (Fig. 1).

Riz. 1. Champ Type de mot de passe

Les propriétés de style qui spécifient les paramètres de couleur, d'arrière-plan, de cadre, etc. sont appliquées au champ de mot de passe. L'exemple 2 montre l'ajout d'images d'arrière-plan aux champs de formulaire. Prenons comme base le style des champs de texte.

Exemple 2 : ajout d'une image à une zone de texte

Le résultat de cet exemple est présenté sur la Fig. 2. Les images sont ajoutées en arrière-plan, le texte doit donc être déplacé vers la droite via padding-left , sinon il sera affiché au-dessus de l'image.

HTML

Parlons maintenant de deux points délicats. Vous avez probablement remarqué deux liens au début du formulaire. Cette astuce permettra à notre formulaire de se comporter correctement lorsque vous travaillerez avec des ancres.

Le deuxième point est lié à l’utilisation d’une police avec des icônes. Nous utiliserons l'attribut data pour afficher les icônes. Paramètre de réglage data-icon = "icon_character" Avec les caractères appropriés dans le HTML, il suffit d'attribuer une seule règle en CSS pour styliser toutes les icônes. Vous pouvez en savoir plus sur cette technique sur le site Web : 24 façons : afficher des icônes avec des polices et des attributs de données.

CSS

Styliser les formulaires à l'aide de CSS3

#subscribe, #login( position : absolue ; haut : 0px ; largeur : 88 % ; remplissage : 18px 6% 60px 6% ; marge : 0 0 35px 0 ; arrière-plan : rgb(247, 247, 247) ; bordure : 1px solide rgba(147, 184, 189,0.8); ombre de la boîte : 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) encart ; rayon de bordure : 5px ; ) #login( z-index: 22; )

Ici, nous attribuerons des propriétés à l'en-tête :

/**** texte ****/ #wrapper h1( taille de police : 48px ; couleur : rgb(6, 106, 117) ; remplissage : 2px 0 10px 0 ; famille de polices : "FranchiseRegular", "Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Actuellement, seul le kit Web prend en charge background-clip:text; **/ #wrapper h1( arrière-plan : -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color : transparent; -webkit-background-clip : texte; ) #wrapper h1:after( contenu : " ; affichage : bloc ; largeur : 100 % ; hauteur : 2px ; marge supérieure : 10px ; arrière-plan : dégradé linéaire (gauche, rgba (147 184 189,0) 0 %, rgba (147 184 189,0.8) 20 %, rgba ( 147 184 189,1) 53%, rgba(147 184 189,0,8) 79%, rgba(147 184 189,0) 100%); )

Notez qu'aujourd'hui, seuls les navigateurs prenant en charge le webkit clip d'arrière-plan : texte, nous allons donc créer un arrière-plan rayé réservé au webkit et le lier à l'en-tête H1. Puisque le paramètre clip d'arrière-plan : texte ne fonctionne que dans les navigateurs Webkit, j'ai décidé de travailler uniquement avec les propriétés du webkit. C'est pourquoi j'ai divisé le CSS en deux parties et utilisé uniquement le dégradé du webkit. Cependant, vous ne devez pas uniquement utiliser webkit sur vos sites Web ! Ainsi, par exemple, le paramètre -webkit-text-fill-color : transparent nous permet d'avoir un fond transparent, mais uniquement pour les navigateurs webkit, tous les autres navigateurs ignoreront cette propriété.

Nous avons également créé une fine ligne sous le titre en utilisant l'élément de pseudo-classe :after. Nous avons utilisé un dégradé d'une hauteur de 2 pixels et avons réduit l'opacité des bords à zéro.

Occupons-nous maintenant des champs de saisie et rendons-les jolis.

/**** style d'entrée avancé ****/ /* espace réservé */ ::-webkit-input-placeholder ( couleur : rgb(190, 188, 188); style de police : italique ; ) input:-moz- espace réservé, textarea:-moz-placeholder( couleur : rgb(190, 188, 188); style de police : italique ; ) entrée ( contour : aucun ; )

Tout d’abord, nous allons styliser les marges et supprimer le trait. Mais attention : le plan aide l'utilisateur à comprendre sur quel champ il se trouve. Si vous le supprimez, vous devez appliquer les propriétés : active et : focus.

/* tous les champs excluent la soumission et la case à cocher */ #wrapper input:not())( width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing : contenu-box ; border-radius : 3px ; box-shadow : 0px 1px 4px 0px rgba(168, 168, 168, 0.6) encart ; transition : tous les 0,2 s linéaires ; ) #wrapper input:not() : actif , #wrapper input:not():focus( border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba( 168 , 168, 168, 0.9) encart ; )

Ici, nous avons utilisé la pseudo classe : not pour styliser tous les champs sauf les cases à cocher. De plus, j'ai décidé de supprimer le trait et d'ajouter les propriétés : focus et : active.

Il est maintenant temps de s'amuser : une police avec des icônes. Comme nous ne pouvons pas utiliser les pseudo-classes :before et :after, nous allons ajouter l'icône au paramètre label puis la placer dans le champ. J'utiliserai la bibliothèque fontomas. Vous pouvez faire correspondre vous-même les icônes à la lettre correspondante. Mémoriser l'attribut icône de données? C'est ici que vous devez insérer la lettre. j'ai utilisé icône de données = 'u' pour la connexion, « e » pour l'e-mail, « p » pour le mot de passe. Une fois les lettres sélectionnées, j'ai téléchargé la police et utilisé le générateur de polices fontsquirrel pour la convertir dans un format adapté à @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** tour de magie ! **/ :after ( contenu : attr(data-icon); font-family : "FontomasCustomRegular" ; couleur : rgb(106, 159, 171) ; position : absolue ; gauche : 10px ; haut : 35px ; largeur : 30px ; )

C'est tout. Vous n'avez pas besoin d'avoir une classe distincte pour chaque icône. Nous avons utilisé le paramètre contenu : attr (icône de données) pour obtenir la lettre de l'attribut data-icon. Ainsi, il suffit d'attribuer une police, de sélectionner une couleur et de placer une icône.

Attribuons maintenant des règles pour le bouton d'envoi du formulaire.

/*style les deux boutons*/ #wrapper p.button input (largeur : 30 % ; curseur : pointeur ; arrière-plan : rgb(61, 157, 179); remplissage : 8px 5px ; famille de polices : "BebasNeueRegular", "Arial Narrow ",Arial,sans-serif ; couleur : #fff ; taille de police : 24 px ; bordure : 1px solid rgb(28, 108, 122); marge inférieure : 10px ; ombre du texte : 0 1px 1px rgba(0, 0 , 0, 0,5); rayon de bordure : 3 px ; ombre de la boîte : 0px 1px 6px 4px rgba(0, 0, 0, 0.07) encart, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); transition : toutes les 0,2 s linéaires ; ) #wrapper p.button input:hover( background : rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. entrée du bouton : focus (arrière-plan : rvb (40, 137, 154 ); position : relative ; haut : 1 px ; bordure : 1 px solide rgb (12, 76, 87 ); ombre de la boîte : 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) encart ; ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

L'astuce consiste à utiliser box-shadow pour créer plusieurs images. Bien entendu, vous ne pouvez utiliser qu’un seul cadre, mais vous pouvez également en utiliser plusieurs. Nous utiliserons le paramètre length pour créer une « fausse » deuxième bordure blanche, de 3 pixels de large, sans flou.

Stylisons maintenant la case à cocher, nous ne ferons rien d’inhabituel ici :

/* styler la case à cocher « se souvenir de moi »*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( width: 80%; )

Stylisez le pied de page du formulaire en utilisant plusieurs dégradés linéaires pour créer un dégradé à rayures.

P.change_link( position : absolue ; couleur : rgb(127, 124, 124) ; gauche : 0px ; hauteur : 20px ; largeur : 440px ; remplissage : 17px 30px 20px 30px ; taille de police : 16px ; alignement du texte : droite ; bordure supérieure : 1 px RVB solide (219, 229, 232 ); rayon de bordure : 0 0 5px 5px ; arrière-plan : RVB (225, 234, 235); arrière-plan : dégradé linéaire répétitif (-45deg, RVB (247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); ) #wrapper p .change_link a ( affichage : bloc en ligne ; poids de la police : gras ; arrière-plan : rgb(247, 248, 241) ; remplissage : 2px 6px ; couleur : rgb(29, 162, 193) ; marge gauche : 10px ; texte -décoration : aucune ; rayon de bordure : 4 px ; bordure : 1 px solide rgb(203, 213, 214) ; transition : tous les 0,4 s linéaires ; ) #wrapper p.change_link a:hover ( couleur : rgb(57, 191, 215 ); arrière-plan : rgb(247, 247, 247); bordure : 1px solid rgb(74, 179, 198); ) #wrapper p.change_link a:active( position: relative; top: 1px; )

Vous pouvez maintenant voir que nous avons deux jolies formes, mais nous voulons qu’une seule d’entre elles soit affichée. C'est l'heure de l'animation !

Création d'animations

#register( z-index : 21 ; opacité : 0 ; )

N'oubliez pas que le formulaire de connexion a un z-index : 22 ? Pour le deuxième formulaire nous attribuerons ce paramètre à 21 pour le mettre « sous » le formulaire de connexion.

Maintenant la partie amusante : nous échangeons les formulaires en utilisant la pseudo classe : cible. Vous devez comprendre une chose à propos de :target : nous utiliserons des ancres pour le déplacer. Le comportement normal d'une ancre est de passer à un élément de page spécifique. Mais nous ne voulons pas cela, nous voulons juste échanger les formes. C’est là que notre astuce consistant à utiliser deux liens en haut de la page vient à la rescousse. Au lieu de nous diriger directement vers le deuxième formulaire et de risquer l'effet de saut, nous allons donner un paramètre aux liens affichage : aucun. Cela aidera à éviter de sauter. J'ai découvert cette astuce sur le site : CSS3 create (français).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index : 22 ; nom d'animation : fadeInLeft ; délai d'animation : .1s ; )

Voici ce qui se passe : lorsque l'on clique sur le bouton Rejoindre, on se dirige vers #s'inscrire. Ensuite, l'animation se produit et alors seulement nous passons à l'élément #register. Nous utilisons une animation appelée fondu à gauche. Puisque nous « masquons » la forme en utilisant une transparence nulle, nous appliquerons une animation qui apparaîtra progressivement. Nous avons également modifié l'index z afin qu'il apparaisse au-dessus de l'autre forme. La même chose se produit pour l'autre forme.
Voici le code de l'animation. Nous avons utilisé le framework d'animation CSS3 de Dan Eden et adapté ce framework pour notre tutoriel.

Animer ( durée d'animation : 0,5 s ; fonction de synchronisation d'animation : facilité ; mode de remplissage d'animation : les deux ; ) @keyframes fadeInLeft ( 0 % (opacité : 0 ; transformation : traduireX(-20px); ) 100 % (opacité : 1; transformation : traduireX(0); ) )

La forme qui "disparaît" aura une animation de fondu vers la gauche :

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animation-name: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacité : 1; transform: translateX(0); ) 100% ( opacité : 0; transformation : traduireX(-20px); ) )

Vous pouvez désormais utiliser les autres animations de Dan Eden en utilisant le fichier animate.css : changez simplement les noms de la classe .animate et des animations. Vous trouverez également plusieurs autres animations à la fin du fichier animate-custom.css.

C'est tout, mes amis. J'espère que vous avez apprécié ce tutoriel!

Notez que dans certains navigateurs, l'option clip d'arrière-plan : texte non supporté. Les animations ne fonctionnent pas dans Internet Explorer 9. Dans Internet Explorer 8 et versions antérieures, la pseudo-classe pseudo-class:target n'est pas prise en charge, donc cet effet ne fonctionnera pas du tout.

P.S. J'accepterai volontiers tout commentaire concernant la traduction dans un message personnel. Merci!

Balises : Ajouter des balises

Les formulaires de connexion sont partout sur le Web. Utilisez-vous les réseaux sociaux ? Vous devez passer par un formulaire de connexion quelconque. Est-ce que tu as un email? Avez-vous rejoint des forums ? Avez-vous essayé de laisser un commentaire sur un site WordPress ? Pour accéder à quoi que ce soit sur Internet, vous devrez probablement passer par une sorte de processus de connexion. Vous devrez probablement d’abord vous inscrire, vous inscrire ou laisser quelques informations derrière vous. Vous devrez utiliser une sorte de formulaire de connexion pour faire quoi que ce soit sur Internet.

Alors, qu'est-ce que les formulaires de connexion ont à voir avec HTML et CSS ? Ce sont tous deux les parties essentielles des formulaires de connexion.

HTML (HyperText Markup Language) est un langage de balisage standard utilisé pour créer des pages Web. Les éléments HTML sont des éléments constitutifs de tous les sites Web.

CSS (Cascading Style Sheet) est un langage utilisé pour décrire l'apparence et le formatage d'un document écrit dans un langage de balisage. Comme HTML !

Nous utilisons HTML pour créer un site Web et CSS pour le rendre joli. C’est ce que rencontrent la plupart des utilisateurs lorsqu’ils naviguent sur le Web.

Nous avons dressé une liste de 50 formulaires de connexion gratuits que vous pouvez utiliser sur votre site WordPress, votre blog, votre forum ou ailleurs. Il s'agit d'une liste triée sur le volet par Colorlib pour garantir la plus haute qualité des formulaires. Chaque formulaire a été minutieusement testé pour garantir qu'aucun composant ne manque et que le code source est disponible à chaque téléchargement. Bien entendu, vous êtes libre d’utiliser ces formulaires à des fins personnelles et commerciales, sans qu’il soit nécessaire de les attribuer.

Explorez 2,5 millions d'actifs numériques, y compris les meilleurs modèles WordPress de 2019

Plus de 2 millions d'articles provenant du plus grand marché au monde pour les modèles, thèmes et éléments de conception HTML5. Que ce soit ce dont vous avez besoin ou que vous recherchiez juste quelques photos d'archives, tout cela peut être trouvé ici sur Envato Market.

TÉLÉCHARGER MAINTENANT

Personnalisateur de connexion WordPress

Le reste de la liste et les formulaires de connexion HTML/CSS, mais ici vous pouvez voir le meilleur plugin de personnalisation de connexion pour WordPress. Il est livré avec plusieurs modèles définis que vous pouvez modifier davantage pour correspondre au design de votre site Web. C’est grâce à ce plugin que vous pouvez enfin vous débarrasser de l’ennuyeuse page WordPress wp-admin et créer une expérience vraiment unique pour vous et vos utilisateurs.

Formulaire de connexion créative

Formulaire de connexion simple mais créatif créé en HTML5 et CSS3. Ce formulaire peut également être utilisé comme formulaire d'inscription. C'est notre modèle préféré sur cette liste grâce à sa flexibilité et sa similitude qui vous permet de créer

Nous avons recherché sur Internet des formulaires de connexion sympas, mais il était très difficile d'en trouver de beaux, c'est pourquoi nous avons décidé de les adopter à notre avis. Nous aimerions présenter 20 formulaires de connexion conçus et développés par l'équipe Colorlib.

Formulaire de connexion 1 par Colorlib

Formulaire de connexion simple, créatif et dynamique avec un fond dégradé. Vous pouvez utiliser celui-ci pour toutes sortes d’intentions, comme des applications Web, mobiles ou de bureau. Mais faites preuve de créativité si vous le souhaitez.

Formulaire de connexion 2 par Colorlib

Formulaire de connexion minimal et sophistiqué par Colorlib avec un bouton dégradé avec animation et logo. Utilisez-le, modifiez-le et faites-en un ajout intéressant à votre espace Web déjà astucieux.

Formulaire de connexion 3 par Colorlib

Une magnifique page de connexion avec une image d'arrière-plan avec une ombre et une zone de formulaire dégradé avec effet de survol du bouton de connexion. La seule limite que vous avez est votre imagination, alors élargissez votre vision et utilisez le formulaire de connexion 3 à son plein potentiel.

Formulaire de connexion 4 par Colorlib

La créativité ne connaît pas de limites et le formulaire de connexion 4 non plus. Le voici, à votre disposition, prêt et configuré pour que vous puissiez le télécharger et l'utiliser à bon escient. Ne vous inquiétez pas non plus de la réactivité.

Formulaire de connexion 5 par Colorlib

Forme magnifique, épurée et moderne avec une option de connexion avec Facebook ou Google. Tous les boutons ont un bel effet de hove qui pimente l’expérience.

Formulaire de connexion 6 par Colorlib

Si votre page est déjà très soignée et bien rangée, un formulaire de connexion ne devrait pas être différent. En voici une qui répondra facilement à vos attentes si le minimalisme est votre tasse de thé.

Formulaire de connexion 7 par Colorlib

Un formulaire avec une option à trois voies pour se connecter au compte. Que ce soit Facebook, Twitter ou la connexion par e-mail qu'ils préfèrent, c'est le type d'outil que vous devez présenter sur votre page. Et s’ils n’ont pas encore de compte, vous pouvez également le lier à votre page d’inscription.

Formulaire de connexion 8 par Colorlib

Un autre formulaire de connexion contemporain, tendance et attrayant avec tout arrondi. Celui-ci est particulièrement applicable aux utilisateurs mobiles en raison de son style de coins arrondis actuellement très populaire.

Formulaire de connexion 9 par Colorlib

Si vous souhaitez éviter le fond blanc ou monochrome, c'est la page du formulaire de connexion que vous devriez considérer. Non seulement il prend en charge un arrière-plan d'image complet, mais il est également livré avec une superposition de dégradé et une option pour vous connecter avec Facebook ou Google.

Formulaire de connexion 10 par Colorlib

Le formulaire de connexion 10 est quelque peu à l’opposé du précédent. Il ne pourrait presque pas être plus minimaliste tout en conservant cette sensation d’actualité.

Formulaire de connexion 11 par Colorlib

Avec notre collection des meilleurs formulaires de connexion HTML5 et CSS3, vous économisez du temps et des efforts (de l'argent aussi). Au lieu d’en créer un à partir de zéro, voici un autre modèle génial prêt à l’emploi que vous pouvez utiliser.

Formulaire de connexion 12 par Colorlib

Fond d'image avec une superposition d'ombre bleue, un nom, une image et le formulaire indispensable, c'est ce qui se passe avec le formulaire de connexion 12. Il y a également un effet de survol sympa sur le bouton de connexion et vous donne la possibilité de le lier à votre formulaire d'inscription pour tous les nouveaux utilisateurs.

Formulaire de connexion 13 par Colorlib

Un formulaire d'inscription en écran partagé, dont une moitié est dédiée à une image et l'autre moitié au formulaire. C'est un outil gratuit que vous pouvez commencer à utiliser dès maintenant. Téléchargez simplement la mise en page et utilisez-la à fond.

Formulaire de connexion 14 par Colorlib

Dans cette collection, nous avons un mélange de formulaires de connexion simplistes et de formulaires de connexion un peu plus complexes et avancés. Bref, il y en a pour tous les goûts et le Login Form 14 est plutôt minimaliste. Mais pourquoi même compliquer avec un formulaire de connexion, non ? À chacun le sien.

Formulaire de connexion 15 par Colorlib

Tout en gardant les choses au strict minimum, un ajout intéressant au formulaire de connexion 15 est la bannière d'image juste au-dessus du formulaire. Avec cette petite fonctionnalité, vous pouvez rendre l'expérience légèrement plus attrayante.

Formulaire de connexion 16 par Colorlib

Il s'agit d'un formulaire de connexion avec une image plein écran au-dessus de laquelle est placé un formulaire avec des champs de nom d'utilisateur et de mot de passe et un bouton dégradé avec effet de survol. Simple et direct.

Formulaire de connexion 17 par Colorlib

Pour le rendre plus personnel, ce modèle de formulaire de connexion encadré est celui qui vous convient le mieux. Il a un côté image et un côté forme mais garde les choses au minimum tout en garantissant le professionnalisme.

Formulaire de connexion 18 par Colorlib

Si vous aimez vous différencier et garder les choses originales, pensez à utiliser le formulaire de connexion 18. Alors que certains apprécient les pages de connexion très basiques, les autres souhaitent avoir des fonctionnalités supplémentaires pour faire vibrer la mise en page. Et si vous souhaitez ajouter une image, celle-ci est faite pour vous.

Formulaire de connexion 19 par Colorlib

Vibrant, énergique et accrocheur, voilà en quoi consiste ce prochain formulaire de connexion basé sur HTML5 et CSS3. Il est également entièrement réactif et prêt pour les appareils mobiles, ainsi que compatible avec tous les principaux navigateurs Web.

Formulaire de connexion 20 par Colorlib

Arrière-plan dégradé, bouton de connexion noir avec effet de survol, champs de nom d'utilisateur et de mot de passe ainsi que texte personnalisé et « Mot de passe oublié ? » section, oui, tout cela fait partie du formulaire de connexion 20. Cela semble écrasant mais en réalité, loin de là.

Le formulaire est masqué sauf si vous cliquez sur l'option «Connexion». Une fonctionnalité vraiment intéressante pour les sites Web modernes qui souhaitent éviter d'avoir une page séparée pour le formulaire de connexion. Vous pouvez afficher le formulaire n'importe où sur votre site Web avec cet outil puissant.

Une conception pour un formulaire d'inscription utilisant des onglets et des étiquettes de formulaire flottantes.

Ce qui a été initialement conçu pour empêcher les gens d’accéder au site WordPress d’une seule personne, est devenu une forme très populaire en raison de sa simplicité et de son design soigné.

Connexion plate – Formulaire d'inscription

Une fois que vous avez cliqué sur le bouton « Cliquez sur moi » dans le coin supérieur droit, vous obtiendrez une animation fluide qui transforme ce formulaire de connexion en formulaire d'inscription.

Connectez-vous avec le formulaire SCSS autonome

Il s'agit d'un formulaire avec SCSS autonome. Une extension de CSS qui ajoute puissance et élégance au langage de base. Il permet d'utiliser des variables, des règles imbriquées, des mixins, des importations en ligne, etc.

Il s'agit en fait d'un formulaire de connexion animé, avec en haut « Hé vous, connectez-vous déjà » se transformant en formulaire en bas. Effets d'animation fluides.

Ceci est un exemple sur la façon de créer un formulaire de connexion simple en utilisant HTML5 et CSS3. Ce formulaire utilise des pseudo-éléments (:after et:before) pour créer l'effet multi-pages. Ces éléments sont pivotés à l'aide de la propriété de transformation CSS3. Ce formulaire utilise HTML5 pour faciliter la validation et la soumission.

Une fois que vous avez entré un mauvais mot de passe dans ce formulaire, un joli effet de secousse vous avertira que vous n'avez pas entré le bon mot de passe. Une solution simple et efficace qui mettra en évidence le problème des mots de passe incorrects.

Un formulaire de connexion boxy avec une petite surprise. Essayez « admin » comme nom d'utilisateur et « 1234 » comme mot de passe pour une expérience complète.

Petit formulaire de connexion sympa. Une fois que vous cliquez sur « CONNEXION » sur le côté gauche, l’effet d’animation crée un petit formulaire de connexion soigné sur la droite. Une approche définitivement unique !

Formulaire de conception matérielle

Formulaire de connexion assez simple et facile à utiliser que vous pouvez ajouter à votre blog ou à tout autre site Web et pimenter l'expérience. Pas besoin de trop compliquer avec une chose aussi simple que le formulaire de connexion. Même si vous ne faites que collecter des abonnés, vous pouvez également jouer avec cette mise en page et faire bouger les choses.

Formulaire d'extrait de code Bootstrap

De toute évidence, ce prochain formulaire de connexion HTML5 gratuit est basé sur le très apprécié Bootstrap Framework. Cela vous indique que vous pouvez vous attendre à une certaine flexibilité que tout site Web et élément moderne doit mettre en pratique. Adresse e-mail, mot de passe et case à cocher si un utilisateur souhaite que la plateforme mémorise ses informations. Facile et précis.

Quelle que soit la conception principale de votre site Web, avec des éléments tels que les formulaires de connexion, vous ne voulez pas trop la compliquer. Au lieu de cela, vous voudriez garder les choses simples et laisser faire le travail, permettant aux utilisateurs d'accéder à leurs comptes de manière transparente. Vous atteindrez incontestablement cet objectif avec ce formulaire de connexion avec une interface utilisateur plate.

Formulaire de kits d'interface utilisateur tendance

Des formulaires de connexion très simples à ceux avec un peu plus d'action en cours. Celui-ci est assez similaire au dernier, sauf que vous remarquerez un cadre tout autour du formulaire. Demandez-leur de saisir leurs noms ou noms d’utilisateur et mots de passe et ils pourront entrer dans votre monde étonnant.

Formulaire CSS3 HTML5 du tableau de bord

Tous les formulaires de connexion HTML5 et CSS3 que vous trouvez sur cette liste sont simples à utiliser et faciles à attacher à votre plateforme Web. Celui-ci a même un « Mot de passe oublié ? » tout en bas pour tous ceux qui ne peuvent tout simplement pas se souvenir de leurs mots de passe. Le modèle est parfait pour saisir votre tableau de bord, mais vous pouvez également l'appliquer à d'autres besoins.

Connectez-vous avec le formulaire de récupération

Le titre dit à peu près tout ; il s'agit d'un formulaire de connexion soigné, propre et minimal avec récupération. Ce que vous remarquez également, c'est qu'il n'y a pas de « case » traditionnelle que vous avez l'habitude de voir utiliser les formulaires de connexion. Si vous souhaitez faire la différence, vous savez désormais quelle disposition choisir.

Un formulaire de connexion plat gratuit avec une mise en page sombre époustouflante et élégante associée à un bouton d'appel à l'action vert. Bien sûr, vous pouvez modifier l'outil à votre guise, mais vous pouvez également l'utiliser exactement tel quel et le mettre en ligne sur votre site Web en un clin d'œil. Jouez avec ses fonctionnalités et configurez tout comme vous le souhaitez.

Connexion transparente

Même un formulaire de connexion peut être de nature extrêmement créative et accrocheuse. Alors que beaucoup s’en tiennent au look simple et basique, d’autres l’aiment spécial et exclusif. Ce formulaire de connexion transparent fera sûrement l'affaire pour vous. Avec un arrière-plan d'image et un formulaire dessus, cette mise en page peut suivre votre image de marque jusqu'au T.

Pas besoin d'aller trop en profondeur avec cette prochaine connexion car elle est assez explicite. Il est compatible avec l'extension Google Chrome, ainsi que des boutons de fonctionnalités pour ceux qui ne sont pas encore inscrits ou qui ont perdu leur mot de passe. Si c’est celui que vous recherchiez, alors faire défiler jusqu’ici en valait largement la peine.

Forme plate élégante

Un formulaire plat et élégant que vous pouvez ajouter à votre espace Web sous forme de pop-up ou d'annonce sous forme de widget sur une page. Quoi qu’il en soit, cela gardera votre approche professionnelle intacte. Il est simple et agréable à regarder et propose également un CTA pour tous ceux qui ont manqué de s’inscrire à votre espace membre. Utilisez-le tel quel ou améliorez-le selon vos goûts.

Certainement une approche d'un formulaire de connexion gratuit à ne pas manquer. Cela ressemble à un coupon, mais ce n'est pas le cas, si cela a du sens. Quoi qu'il en soit, dans la section texte, vous pouvez également lier ce formulaire au formulaire d'inscription pour ceux qui souhaitent créer un compte. En dehors de cela, cela attirera sûrement leur attention.

De plus en plus de propriétaires de sites Web mettent en œuvre des connexions sociales et vous pouvez également rejoindre la tendance. Ce formulaire de connexion gratuit avec intégration sociale est la bonne option pour franchir le pas. Cependant, outre les boutons Twitter, Facebook et Google+, la mise en page présente également la manière traditionnelle de s'inscrire par e-mail.

Si votre mot de passe est très complexe, vous souhaitez parfois simplement le saisir en mode « afficher ». Offrez cette même fonctionnalité à tous vos utilisateurs avec le formulaire de connexion Afficher et masquer le mot de passe. Il présente une superbe mise en page sombre avec des détails verts, parfaits pour ceux qui aiment ce type de designs. Bien entendu, n’hésitez pas à y apporter des modifications et à l’affiner en fonction de vos besoins.

Formulaire animé Log 'N Load

Si vous pratiquez déjà les animations et les effets spéciaux sur votre page, restez également dans la tendance avec le formulaire de connexion. Au lieu de créer le vôtre, vous pouvez simplement utiliser ce superbe formulaire animé Log 'N Load qui fera l'affaire. Une fois que vous survolez le bouton de connexion, le formulaire s'affiche juste devant vous. Il dispose même d’un chargement circulaire qui améliore l’expérience.

Ce formulaire de connexion plat, moderne et facile à utiliser fonctionne parfaitement sur tous les appareils, mobiles, tablettes et ordinateurs de bureau. Vous pouvez également jouer avec différents ajustements et modifier précisément les paramètres par défaut en fonction du style de votre site Web. L'outil propose également des effets de survol sympas qui ajoutent une touche de sophistication à l'expérience globale.

Les formulaires de connexion peuvent être trouvés sur des sites Web avec des forums, des boutiques, WordPress et presque tout sur Internet nécessite un formulaire de connexion quelque part pour accéder à quelque chose. L'ensemble du Web est incomplet sans les formulaires de connexion et les formulaires d'inscription et d'inscription.

Les formulaires HTML seront les premiers que la plupart d'entre nous rencontreront et avec un CSS approprié qui donnera du style à la structure HTML. Dans les dernières versions HTML, je suppose que HTML semble avoir opté pour CSS3 comme option de style de structure par défaut. Quoi qu'il en soit, ce que vous trouvez ici, ce sont des formulaires HTML et CSS pré-conçus, construits par des développeurs front-end et partagés gratuitement avec le public.

Essayez d'utiliser tous ces modèles de formulaires de connexion gratuits, car la plupart d'entre eux disposent également de fonctionnalités de validation HTML prédéfinies ainsi que de certaines validations jQuery ou HTML (comme le formulaire de connexion/inscription avec compteur de réussite ci-dessous).

Cette liste n'est pas encore terminée, je suis intéressé à trouver de nouveaux modèles de formulaires de connexion, je continuerai donc à mettre à jour cette liste avec de nouveaux modèles de formulaires de connexion lorsqu'ils apparaîtront en 2017. Restez à l'écoute.

Formulaire de connexion rouge

Un formulaire de connexion simple et efficace pour votre site Web qui nécessite des champs de saisie de base et aucune programmation supplémentaire.

Une conception de formulaire de connexion plate conçue pour votre site Web qui est déjà plat. Téléchargez et utilisez ce modèle à n’importe quelle fin.

Besoin d'une connexion rapide pour vos clients ? Pas de soucis, ce joli formulaire de connexion vous permettra de démarrer sans problème. Téléchargez le code source et vérifiez la démo car vous pouvez mettre un exemple de nom d'utilisateur et de mot de passe dans les champs et essayer de vous connecter. Vous serez redirigé vers une page de profil sur la même qui a l’air magnifique avec un bouton de déconnexion qui montre l’animation de déconnexion.

Avec la conception matérielle de Google devenant populaire par rapport à la conception plate, nous pouvons voir un formulaire de connexion profond et soigneusement ombré et un formulaire d'inscription dans ce modèle CSS3.

Ici, vous obtenez un autre formulaire de connexion génial pour votre site Web busienss avec une option pour masquer/afficher les champs de connexion. Une conception CSS/html/js bien codée vous offrira un meilleur chargement sans altérer la vitesse actuelle de votre site.

Formulaire de connexion minimal avec animation fluide

Une animation fluide du formulaire de connexion qui ouvre la section de connexion en cliquant sur une image ou un bouton selon vos besoins.

Formulaire de connexion minimaliste avec CSS

Vous trouverez ici une interface utilisateur de formulaire de connexion sans fantaisie qui est placée sur un arrière-plan plein écran. Le fichier de téléchargement vous fournira du CSS et du HTML pour une mise en œuvre facile de cette connexion à votre site Web.

Formulaire de connexion animé

Les animations de clic affichées sur les champs de texte sont brillantes et affichent une petite animation coulissante des icônes d'utilisateur et de mot de passe. Vous pouvez ensuite vous connecter au formulaire pour regarder un pré-chargeur d'authentification ainsi qu'un bloc de bienvenue. Ce téléchargement contient tous les fichiers sources pour implémenter un formulaire de connexion pour votre propre site Web.

Connexion élégante

Il s'agit d'une version simple du formulaire de connexion que vous pouvez afficher sur votre site Web, car elle a également moins d'impact sur la vitesse du site grâce à son code minimal.

Écran de connexion calme

Un formulaire de connexion épuré avec un arrière-plan animé donnant une sensation relaxante à toute la page. Téléchargez l'intégralité du modèle au format zip depuis codepen.

Formulaire de connexion et d'inscription

Intégrez facilement ce formulaire de connexion et d'inscription fluide à votre site Web. Le fichier zip avec ce téléchargement vous fournira des modèles CSS, HTML et JS. L'inscription aux réseaux sociaux est également disponible avec des options d'affichage/masquage du mot de passe pour une saisie facile du mot de passe à l'écran.

Formulaire de connexion avec créer un compte

Un formulaire de connexion qui s'affiche avec un effet de fondu est tout simplement amusant à regarder. Cet effet n'est visible que dans quelques formulaires de connexion modernes. Utilisez le clic-moi pour modifier le formulaire pour vous inscrire ou créer un formulaire.

Démo | Télécharger

Un modèle épuré avec du HTML et du CSS gratuits utilisant un minimum de code et une conception pour une page de connexion à un site Web.

Un simple formulaire transparent pour les pages de connexion qui est purement CSS et HTML.

Style unique pour la connexion

Un formulaire de connexion totalement unique avec un caractère intéressant.

Formulaire de connexion HTML classique

Un exemple de formulaire de connexion à l'ancienne avec des styles modernes avec CSS3 uniquement.

Formulaire de connexion

Un formulaire avec une bordure sympa et un minimum de code CSS et cela vaut la peine d'être essayé.

Nouveau formulaire de connexion CSS3

Un formulaire de connexion simple avec uniquement du CSS3 pur car aucun jquery n'est utilisé. Pour la validation, JavaScript léger est utilisé dans le modèle de formulaire HTML.

Un formulaire de connexion de style minimal avec un design plat peut être téléchargé à partir du lien ci-dessous. La validation HTML est disponible et définie dans ce modèle de connexion.

Modèle de formulaire minimal pour la connexion

Une validation pour l'e-mail est en place et ce modèle est purement CSS, HTML sans modules jquery sophistiqués.

Formulaire d'inscription/connexion

Un formulaire unique pour se connecter au site Web ainsi qu'une option d'inscription et d'enregistrement qui peut être retournée en un clic. Même s'il manque certains champs importants dans la zone d'inscription, il s'agit néanmoins d'un meilleur formulaire avec toutes les fonctionnalités puissantes.

Ce formulaire de connexion est masqué sauf si vous cliquez sur le lien de connexion. Il s'agit d'une fonctionnalité très utile pour les sites Web modernes qui peut éviter une page supplémentaire pour la connexion. Affichez la connexion sur n'importe quelle page de votre choix avec ce puissant formulaire de connexion.

Il est fourni à la fois sous forme de PSD et de version HTML/CSS entièrement codée, vous pouvez donc commencer à l'intégrer immédiatement.

Formulaire de connexion (codé)

Un formulaire de connexion professionnel. Le téléchargement inclut le fichier PSD, et j'avais également envie de le coder, j'ai donc également inclus les fichiers xHTML, Js et CSS.