{"id":614,"date":"2012-03-27T19:52:23","date_gmt":"2012-03-27T17:52:23","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=614"},"modified":"2023-08-04T11:14:27","modified_gmt":"2023-08-04T09:14:27","slug":"formulaire-login-sign-up-html5-css3","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/","title":{"rendered":"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3"},"content":{"rendered":"
La pseudo classe CSS3 :target permet d’utiliser des propri\u00e9t\u00e9s CSS en fonction de l’ancre cibl\u00e9e avec un < a href = \u00ab\u00a0#monancre\u00a0\u00bb > . J’ai donc utilis\u00e9 cette propri\u00e9t\u00e9, accompagn\u00e9e de quelques transitions CSS3 et animations pour cr\u00e9er une d\u00e9monstration de double formulaire de login \/ souscription en pure CSS3 et HTML5. Le principe est assez simple : deux formulaires, on propose en premier le formulaire de login \u00e0 l’utilisateur, avec un lien \u00ab\u00a0inscrivez vous si vous n’\u00eates pas encore membre\u00a0\u00bb. Quand l’utilisateur clique ce lien, on cache le premier formulaire de login, pour faire apparaitre le formulaire de souscription.<\/p>\n
<\/a><\/p>\n C’est habituellement du JavaScript qui est utilis\u00e9 pour faire disparaitre et apparaitre le second formulaire, mais avec la pseudo classe CSS3 :target il est possible de r\u00e9aliser ce genre de comportement en pure HTML.<\/p>\n Le formulaire utilise \u00e9galement quelques attributs pour les balises de formulaire HTML5 et des ic\u00f4nes dans une police d’\u00e9criture.<\/p>\n Vous pouvez voir une d\u00e9monstration<\/a>, aller jouer avec le code sur github<\/a>. Comme il s’agit de CSS3, la d\u00e9monstration ne fonctionnera correctement que sur les navigateurs r\u00e9cents ayant impl\u00e9ment\u00e9 ces fonctionnalit\u00e9s<\/strong><\/em>.<\/p>\n J’ai r\u00e9dig\u00e9 pour ce formulaire un tutoriel d\u00e9taill\u00e9 en anglais sur codrops :<\/p>\n