{"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":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

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

\"Formulaire<\/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

\u00ab\u00a0Login and Registration Form with HTML5 and CSS3\u00a0\u00bb<\/a>\u00a0<\/strong><\/p>\n

Edit : je pr\u00e9cise ENCORE une fois (parce qu’on va encore me le re-demander) : il s\u2019agit d\u2019une d\u00e9monstration<\/strong> de ce qu\u2019on pourrait faire avec du CSS3, cela ne fonctionne PAS sous tous les navigateurs n\u2019ayant pas impl\u00e9ment\u00e9 target (IE8 et moins entre autres), ce n\u2019est PAS \u00e0 utiliser sur un site live sans proposer des fallbacks ad\u00e9quats, mais bien uniquement \u00e0 des fins de d\u00e9monstration<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu’il ne soit plus \u00e0 jour.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 …<\/p>\n","protected":false},"author":3,"featured_media":615,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[31],"tags":[],"yoast_head":"\nSur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-27T17:52:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T09:14:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/03\/loginHTML5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/\",\"name\":\"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg\",\"datePublished\":\"2012-03-27T17:52:23+00:00\",\"dateModified\":\"2023-08-04T09:14:27+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg\",\"width\":700,\"height\":200},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/twitter.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/","og_locale":"fr_FR","og_type":"article","og_title":"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-03-27T17:52:23+00:00","article_modified_time":"2023-08-04T09:14:27+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/03\/loginHTML5.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/","name":"Sur Codrops : formulaire de login et sign up en HTML5 et CSS3 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg","datePublished":"2012-03-27T17:52:23+00:00","dateModified":"2023-08-04T09:14:27+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Un double formulaire de login \/ souscription en pure CSS3 et HTML5 qui utilise la pseudo classe CSS3 :target pour les transitions","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-login-sign-up-html5-css3\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/03\/loginHTML5.jpg","width":700,"height":200},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/twitter.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/614"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":2,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":8455,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/614\/revisions\/8455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/615"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}