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.