Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Screenshot formulaire CSS3

Les propriétés CSS3 utilisées ici sont les suivantes :

  • border-radius pour les bords arrondis
  • box-shadow pour les ombres des blocs
  • content pour rajouter du contenu au HTML
  • gradient pour les dégradés des blocs
  • rgba pour avoir des fonds transparents
  • text-shadow pour les ombres du texte

J’utilise aussi les pseudo-classes CSS3 suivantes :

  • :after pour rajouter du texte HTML à la suite d’un élément
  • :last-child pour sélectionner le dernier enfant d’un élément
  • :target pour séléctionner un élément lorsqu’une #ancre est utilisée dans l’adresse

Dernière fonctionnalité utilisée : le sélecteur avancé [type=text] pour sélectionner un élément selon la valeur d’un de ses attributs HTML.

Bien sûr, toutes ces nouveautés CSS3 ne marchent pas partout, mais elles fonctionnent très bien sous Firefox et Safari/Chrome (Webkit).

De nouvelles intéractions intéressantes

Sans parler du graphisme (qui contient des dégradés, des ombres, des bords arrondis.. en CSS3) et que vous pouvez voir si vous avez un (bon) navigateur compatible, il y a quelques intéractions possibles grâce à CSS3.

Pseudo-classe :last-child

Lorsqu’on peut éviter de rajouter des classes dans le HTML, il est préférable de le faire. Par exemple, la pseudo-classe :last-child permet de sélectionner le dernier enfant d’un élément. En l’occurrence, je sélectionne avec form p:last-child le dernier paragraphe et je lui enlève son margin-bottom. Ca permet d’éviter d’utiliser une classe « last ».

Pseudo-classe :after et la propriété content

Si vous survolez un paragraphe, le label passe en bleu et une flèche » est rajoutée à la suite du label.

Pseudo-classe :target

L’utilisation de la pseudo-classe :target se fait en utilisation les ancres HTML.
Par exemple, en cliquant sur le lien « #options », ça fait apparaître le bloc id= »options ».
Et si je soumets le formulaire, je navigue vers « #finish » et un bloc vert apparaît tout en bas.
(NB : j’ai remplacé l’input « submit » par un simple lien, histoire de pouvoir afficher le bloc #finish. Le code normal est commenté dans le HTML si vous le voulez).
Enfin, si je clique sur « annuler », je navigue vers « #start » et ça repart au début.

N’hésitez pas à utiliser mes codes HTML et CSS.

|

42 commentaires

  1. Alban

    24 mars 2010

    Je ne connaissais pas du tout la propriété « content ».

    Merci 🙂

  2. ¢lems

    24 mars 2010

    Et ça marche sous iE 6 ?
    …pardon… (c’était la blague du mercredi)
    Sinon c’est sympa ce que l’on peut faire mais attention à ne pas finir, comme à une certaine époque (pas si lointaine), avec des reflets web12.46 et des ombres portées dans tous les sens.

  3. Jeremy

    24 mars 2010

    Sous IE6, c’est pas crade. Y a juste pas d’ombres, d’arrondis et de dégradés. Mais ces propriétés CSS3 c’est surtout pour embellir ton design facilement, tout en le gardant fonctionnel pour les vieux navigateurs.

  4. Vincent Valentin

    24 mars 2010

    Hello,

    C’est volontaire de ne pas avoir relié les labels aux champs ? Ou juste un petit oubli ?

  5. mzwygart

    24 mars 2010

    Tu devrais attacher tes labels aux champs, car si on clique dessus, il ne se passe rien.

  6. ¢lems

    24 mars 2010

    Surtout au niveau poids de page ça doit être facile du simple au double. En terme de chargement de page les navigateurs ne peineront plus à charger des images en guise de contour ou d’ombres portées, c’est vrai que ça c’est un énorme plus.

  7. Jeremy

    24 mars 2010

    @Vincent Valentin et @mzwygart : en fait, j’avais lié les labels aux champs au début (avec for= »xxx », id= »xxx » et name= »xxx ») mais en validant le formulaire, ça renvoyait vers une 404.
    Mais étant donné que j’ai supprimé l’input submit et mis un simple lien à la place, il est possible que l’erreur ne se reproduise plus. Je checke ça.

  8. css3start.com, une homepage moderne | Hi, I'm Victor and this is my blog

    12 avril 2010

    […] décidé de relever  un petit défi  après avoir lu l’article « Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript » de l’excellent blog de Jeremy Thomas. J’ai trouvé sympathique l’idée de créer le […]

  9. Liens et actus

    13 avril 2010

    […] formulaire 100% CSS 3 et sans images ni […]

  10. Tr3nT

    12 juillet 2010

    petite question j’arrive pas à le placer correctement les élément ce divise et du coups je n’est plus mon formulaire en entier passe voir mon site tu verras à moins que d’ici quelques heures je trouve la solution.

  11. Tr3nT

    12 juillet 2010

    pas la peine j’ai compris =)))

  12. TOTO

    11 août 2010

    Très joli mais dommage qu’il ne fonctionne pas du tout sous IE8 (standard dans ma boite :'()

  13. Tr3nT

    14 août 2010

    maintenant ce qui va pas c’est le fait qu’il ne s’associe pas avec le code php … pour récup les info en bdd

  14. nico

    25 août 2010

    magnifique ! merci beaucoup et j’adore « les deux » formulaires de cette page !

  15. Jireck

    10 septembre 2010

    Bravo, …

  16. Pascal

    23 octobre 2010

    Magnifique ! Merci…

  17. Medyo

    2 novembre 2010

    Si seulement le CSS3 était compatible avec tous les navigateurs .

  18. hornetbzz

    11 novembre 2010

    Excellent

  19. adelmonis

    14 novembre 2010

    Quoi dire, SYMPA ! … et BRAVO ! … 😀

  20. BLOG SofiGraFiK - Toute l'actu SofiGraFiK

    14 décembre 2010

    […] amis web designer voici un petit tuto pour apprendre à faire un formulaire design sans utiliser d’images et sans utiliser de […]

  21. romeo

    18 mars 2011

    Salut a tous, je suiis un lycées de 1ere et moi et deux potes on a décidé de faire un site je me demandais si je pouvais reprendre le scrip d’incription pour notre site ? 🙂 merci

  22. Jeremy

    20 mars 2011

    Bien sûr. C’est fait pour ça.

  23. Top 10 CSS 3 forms tutorials /  Weblog – Hans van Goor

    18 avril 2011

    […] This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it.» View tutorial […]

  24. Top 10 CSS 3 forms tutorials | redbey

    24 avril 2011

    […] This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it.» View tutorial […]

  25. [CSS3]10 CSS 3 forms tutorials | WPsharing

    26 avril 2011

    […] This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it. » View tutorial […]

  26. Top 10 tutoriales formularios CSS3 | colorate

    27 avril 2011

    […] Formulario CSS3 sin imagenes ni javascript […]

  27. Otto

    15 mai 2011

    Very nice tutorial, but where are the sources ?

  28. Top 10 CSS 3 forms tutorials | BoonJack Media || We make Multimedia easy.

    18 mai 2011

    […] This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it. » View tutorial […]

  29. streesh

    30 mai 2011

    Très cool mais peux tu nous donner les sources ?
    thanks

  30. Jeremy

    1 juin 2011

    @streesh : Ctrl + U

  31. Top 10 CSS 3 forms tutorials | CatsWhoCode.com

    3 juin 2011

    […] For those who can’t understand French, just get the source code and have fun with it. » View tutorialStylish Contact Form with HTML5 & CSS3 I really love what British web developer Chris Spooner […]

  32. entre graphisme et développement » Un petit formulaire en CSS3

    21 juin 2011

    […] français peuvent interpréter la CSS3, autant ne pas se gêner. Ainsi, vous pourrez trouver à cette adresse un petit explicatif sur les attributs CSS3 applicables aux formulaires. De cette manière, vous […]

  33. Nanang Gunawan

    1 juillet 2011

    well done, anyway! is there any download link?

  34. gab140

    15 juillet 2011

    @streesh, le css se trouve dans le code source de l’exemple fourni

    Très beau formulaire, merci pour le code 🙂

  35. Great New Hot jQuery HTML5 With CSS3 Form Tutorials

    24 juillet 2011

    […] 5. CSS3 form without images and JavaScript […]

  36. Topdam

    1 août 2011

    Je ne comprends pas le morceau de css suivant :

    form p:last-child {
    margin-bottom:0;
    }

    et je n’arrive pas l’adapter à mon css … il ne sélectionne pas le dernier input.

  37. 110 Best CSS3 Tutorials and Examples | PriteshGupta.com

    1 septembre 2011

    […] CSS3 Form […]

  38. Jeune gay

    9 septembre 2011

    excellent c’est vraiment très joli, je suis vraiment impressionné je vous le pique merci 😉

  39. 10 jQuery CSS3 Form Tutorials | jQuery4u

    20 octobre 2011

    […] This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it. Source […]

  40. Lisa Zinninger

    7 novembre 2011

    using to move between fields does not change the focus. the previously selected label stays blue, and the label for the field I tabbed to does not turn blue. I am sorry that I do not know how to tell you this in French.

  41. Lisa Zinninger

    7 novembre 2011

    I mean to say « using the tab key »

  42. simo

    11 novembre 2011

    slt tt le monde !
    où pourrai-je récupérer le code ?
    Merci