Faire un formulaire CSS, HTML, PHP (2 sur 3)

I. Introduction au formulaire CSS

Ce tutorial fait suite à Faire un formulaire HTML, CSS, PHP (1 sur 3), donc commencez par cette partie 1 si vous souhaitez le suivre en entier.
Après avoir créé un formulaire en HTML, nous allons maintenant appliquer des styles CSS sur celui-ci afin de le mettre en forme, histoire qu'il soit un peu plus sexy ;-) mais aussi et surtout que vous appreniez le CSS.

Nous allons partir de cela...

formulaire CSS image 1

... pour arriver à cela :

formulaire CSS image 2

II. Explications

1. Création du fichier CSS

Vous commencerez par créer une page html de base (avec votre éditeur html ou manuellement), ce qui donner ceci :

formulaire CSS image 3

Ensuite, vous allez créer un fichier que vous nommerez "formulaire.css" dans le même répertoire que le fichier html et vous l'attacherez à cette page html, ce qui donnera :

formulaire CSS image 4

Entre les balises <body> et </body>, vous placerez le code de notre formulaire créé dans la page 1 du tutoriel. Nous allons maintenant voir le contenu du fichier CSS.

2. Les titres des blocs : coordonnées et message

Commençons par les éléments <p class="titre">. Nous allons leur mettre ceci :

- background : couleur de fond du titre
- color : couleur du texte
- padding : un petit espace pour ne pas écrire juste au bord du cadre du titre
- font-size : pour définir la taille du texte
- border : une bordure de 2 pixels avec un effet sortant (ombre) avec une couleur définie
- position : nous plaçon le titre en position relative à son conteneur
- margin-bottom : nous mettons une marge de bas négative, ce qui fait que le titre viendra s'encastrer dans l'elément en-dessous
- width : la largeur du cadre du titre
- margin-left : marge à gauche du titre
- margin-top : marge au-dessus du titre

p.titre {
  background:#DED983;
  color:#345071;
  padding:.2em .3em;
  font-size:1.2em;
  border:2px outset #DED983;
  position:relative;
  margin-bottom:-1em;
  width:10em;
  margin-left:1em;
  margin-top:1em;
}

Ensuite nous allons configurer un peu les jeux de champs en appliquant un style sur tous les "fieldset" :

- border : on spécifie de ne pas mettre de bordures (on la mettra sur chaque jeu de champ au cas par cas)
- margin-bottom : marge du dessous
- width : la largeur des cadres de champs
- padding-top : espace en haut, pour laisser la place aux cadres de titres.

fieldset {
  border:none;
  margin-bottom:1em;
  width:24em;
  padding-top:1.5em;
}

Puis un petit style général à toutes les listes déroulantes :

- margin-left : on spécifie une marge à gauche (pour laisser la place aux "labels" : légende des champs)
- margin-bottom : à 0, pas de marge en dessous.

select {
  margin-left:9em;
  margin-bottom:0;
}

3. Les champs et labels du bloc coordonnées

A présent voyons le bloc (jeu de champs) "coordonnées" :

- background : nous allons lui spécifier une couleur de fond
- border : nous allons lui mettre une bordure "outset", donc qui va sortir derrière pour faire comme un effet d'ombre.

/* fieldset coordonnees */
fieldset#coordonnees {
  background:#A4D8EE;
  border:outset #A4D8EE;
}

Puis définissons un stylepour tous les labels du bloc coordonnées. Remarquez comment il est possible d'atteindre un sous-élément en CSS en spécifiant tout d'abord l'élement principal (ici dont l'id est "coordonnees"), puis un élément qui se trouve dans ce dernier (les label). Cela évite de devoir mettre des id ou class à tous les labels pour rien, d'autant qu'ils auront tous le même style :

- position : position absolue (relative à aucun autre élément)
- font-size : on spécifie une taille de police, ici 90% de la taille par défaut
- padding-top : un espace au-dessus du texte du label
- left : spécifie la position horizontale du coin haut gauche de l'élément (20 pixels)

#coordonnees label {
  position:absolute;
  font-size:90%;
  padding-top:.2em;
  left:20px;
}

De la même façon, nous allons atteindre et mettre en forme tous les éléments de type input du bloc coordonnees :

- margin-left : une marge à gauche pour permettre de laisser de la place aux labels (légende des champs)
- line-height : on allonge l'interligne
- margin-bottom : on met une marge en-dessous pour ne pasque les champs se touchent.

#coordonnees input {
  margin-left:9em;
  line-height:1.4em;
  margin-bottom:.2em;
}

4. Le bloc message

Maintenant dans le fieldset "message", cela sera plus vite fait puisque nous n'avons qu'une zone de texte. Nous allons juste :

- background : définition d'une couleur de fond pour le bloc
- border : mise en place d'une bordure "outset" (effet ombre sortante) comme pour le bloc précédent.

/* fieldset message */
fieldset#message {
  background:#9DF2CE;
  border:outset #9DF2CE;
}

5. Les cases radio pour la civilité

Tout comme pour les labels, nous allons passer la taille de la police de caractères à 90% pour le texte des boutons radio :

#civilite {
  font-size:90%;
}

Et mettre une marge à gauche comme pour les autres éléments input du formulaire, pour laisser la place aux légendes :

#civilite input {
  margin-left:9em;
}

Le problème en faisant ce que nous venons de faire ci-dessus, c'est que la marge à gauche va être appliquée aux trois boutons radio...
Nous allons donc utiliser une technique que nous n'avons pas vu encore. Elle consiste à faire un : " #civilite input + input ", de façon à ce que le style soit appliqué uniquement si le champ input radio est précédé d'un autre. Futé non ? :-)
Si c'est le cas et que le champ input n'est pas le premier de la ligne, nous appliquons une marge beaucoup moins grande (1em).

#civilite input + input {
  margin-left:1em;
}

6. Les cases à cocher pour les centres d'intérêt

Pour les cases à cocher, comme d'habitude nous commencerons à mettre la police à 90%, puis nous utiliserons les mêmes techniques que précédemment pour mettre une marge conséquente au premier élément (case à cocher), et moins grande pour les suivants ( #interets input +input).
Ensuite vient quelque chose de nouveau mais que vous comprendrez assez facilement si vous avez compris le coup du "input +input ", c'est le "br+input". Le raisonnement est le même : s'il y a un élément
suivi d'un élément input, ce dernier aura une marge à gauche de 9em. Et oui car si l'on va à la ligne, il faut remettre la même marge que le premier input pour les aligner et laisser passer le label.

/* cases a cocher des centres d'interet */
#interets {
   font-size:90%;
}
#interets input {
   margin-left:9em;
}
#interets input +input {
   margin-left:1em;
}
#interets br+input {
  margin-left:9em;
}

formulaire CSS image 5

7. La zône de texte du message

Pour la zône de texte du message, voici le style que nous allons appliquer (il n'y a qu'un élément textearea donc nous ne spécifions pas d'id ni class) :

- font : la police de caractère ; sa taille sera 0.8em et elle sera de type "Trebuchet MS" (ou Verdana ou sans-serif si la ou les polices précédentes n'existent pas)
- width : la largeur de la zone de texte
- padding : nous allons espacer le texte de la zone de 0.2em de façon à ne pas écrire trop sur le bord.

/* zone de texte du message */
textarea {
  font:.8em "Trebuchet MS", Verdana, sans-serif;
  width:29em;
  padding:.2em;
}

8. Les boutons submit et reset

Pour finir, nous allons voir les boutons submit et reset. Vous l'aurez peut-être remarqué, ils n'ont pas de "class" dans le code html, alors comment allons nous les atteindre ? Et bien nous allons utiliser leur type en faisant input[type="submit"] pour le bouton submit et la meme chose avec le bouton reset.
Nous allons leur appliquer le même style, à savoir :

- background : une couleur de fond
- font : une police de 1.2em en taille et de type "Trebuchet MS" (ou Verdana ou sans-serif si la ou les polices précédentes n'existent pas)
- color : une couleur du texte

NB : notez que l'on peut appliquer le même style à plusieurs éléments en les séparant d'un virgule comme ci-dessous.

/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
  background:#DED983;
  font:1.2em "Trebuchet MS", Verdana, sans-serif;
  color:#345071;
}

Enfin nous allons centrer les deux boutons.

Attention : ils vont logiquement se mettre au centre de la page web et non au centre du formulaire, pour remédier à cela vous pouvez faire un div conteneur qui contient tous les éléments de notre page web, en lui spécifiant la largeur du formulaire. Si les boutons sont dedans ils s'aligneront alors sur le formulaire et non la page.

p#buttons {
  text-align:center;
}

III. Conclusion du tutorial

Voilà, après avoir vu comment créer un formulaire HTML avec les principaux champs utilisés (champ de texte, case à cocher, liste, etc.), nous avons vu comment on peut mettre ceux ci en forme avec du CSS. Vous remarquerez sur le résultat par l'alignement des éléments que l'on pourrait presque croire à l'utilisation d'un tableau HTML, mais il n'en est rien, tout est fait en CSS et ça rend tout de même le code un peu plus propre est facile à gérer.
Dans le tutorial suivant, nous allons voir comment traiter les données qui sont envoyées par le formulaire, en PHP.

J'espère que vous aurez appris des choses à l'issu des ces trois tutoriaux, et si vous avez des questions, je vous répondrai avec plaisir sur le forum.