Formulaires et style CSS

Des jolis formulaires et des styles

Les styles de cette page seront prochainement mis à jour afin de pouvoir consulter les résultats des codes proposés directement depuis ce tutoriel.

Bien que l'on ait déjà appris l'essentiel pour tout ce qui est formulaire, il ne faut surtout pas s'arrêter là. Autant continuer à approfondir le sujet, en essayant d'améliorer notre formulaire, afin de lui donner un peu plus de design.

Formulaire organisé et facilement accessible

Parfois vous êtes confrontés à une longue liste de saisie sur un seul formulaire (un questionnaire par exemple). Si vous n'essayez pas de mettre un peu d'ordre dans le formulaire en question, le visiteur va se sentir un peu perdu. Il vous faut alors connaître la balise XHTML qui permet de grouper les champs qui ont les mêmes thèmes.

Il s'agit de la balise <fieldset></fieldset>. Le principe n'est pas aussi compliqué que ça : à l'intérieur de cette balise vous groupez tous les champs du même thème. Ensuite vous donnez un titre à ce groupe de champ. Pour cela, il y a la balise <legend></legend> qui a pour rôle de spécifier le nom du groupe.

Code XHTML :

<form method="post" action="questionnaire.php">
<fieldset>
  <legend>Coordonnées</legend>
   <label for="titre">Titre : </label>
   <select name="titre">
    <option value="Mme" selected="selected">Madame</option>
    <option value="Mlle">Mademoiselle</option>
    <option value="Mr">Monsieur</option>
   </select>
   <br />
   <label for="nom">Nom:</label>
    <input type="text" name="nom" id="nom" />
   <br />
   <label for="prenom">Prénom:</label>
    <input type="text" name="prenom" id="prenom" />
   <br />
   <label for="email">Email:</label>
    <input type="text" name="email" id="email" />
   <br />
   <label for="tel">Téléphone:</label>
    <input type="text" name="tel" id="tel" /><br />
   <label for="adresse">Adresse:</label>
    <input type="adresse" name="adresse" id="adresse" />
   <br />
</fieldset>
<fieldset>
  <legend>Situation familiale:</legend>
  <p>
   Quel est votre statut?<br />
   <input type="radio" name="celibat" value="celibat" id="celibat" /> <label for="celibat">Célibataire</label><br />
   <input type="radio" name="marie" value="marie" id="marie" /> <label for="marie">Marié</label><br />
   <input type="radio" name="divorce" value="divorce" id="divorce" /> <label for="divorce">Divorcé</label><br />
  </p>
  <p>
   Si vous avez des enfants, combien en avez vous? <br />
   <input type="radio" name="deux" value="deux" id="deux" /> <label for="deux">1-2 enfants</label><br />
   <input type="radio" name="quatre" value="quatre" id="quatre" /> <label for="quatre">3-4 enfants</label><br />
   <input type="radio" name="cinq" value="cinq" id="cind" /> <label for="cinq">5 enfants ou plus</label><br />
</p>
  </fieldset>
   <fieldset>
  <legend>Centres d'intérêt:</legend>
  <p>
   Quels sont vos centres d'intérêt?<br />
   <input type="checkbox" name="musique" id="musique" /> <label for="musique">musique</label><br />
   <input type="checkbox" name="politique" id="politique" /> <label for="politique">politique</label><br />
   <input type="checkbox" name="informatique" id="informatique" /> <label for="informatique">informatique</label><br />
   <input type="checkbox" name="cuisine" id="cuisine" /> <label for="cuisine">cuisine</label><br />
  </p>
</fieldset>


</form>

Vous pouvez voir à partir de cet exemple que même si le formulaire paraît long, il y a quand même un certain ordre et une certaine clarté au niveau de la présentation des informations. On a mis trois groupes de champ : Coordonnées, situation familiale et centre d'intérêt.

Décorer le formulaire avec des styles CSS

Le formulaire de tout à l'heure paraissait déjà bien organisé mais on peut faire plus. Avec un petit coup de mise en forme CSS, on pourra avoir un résultat plus remarquable.

Code CSS :

/* Police du texte tapé l'intérieur des champs et mettre une marge à gauche */
input, textarea, select
{


font-family: "Times New Roman", Times, serif;
font-size:12px;
margin-left: 30px
}



label{


color: #663399; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
font-weight: bold ;


}



/* Mettre les titres du groupe en caractères plus grands, en gras et spécifier une couleur*/


legend
{



color: #663399;
font-weight: bold;
font-size:24px;


}



/* Mettre une séparation entre les fieldset et colorer l'arrière plan */


fieldset
{


margin-bottom: 20px;
background-color: #FEDAD3;


}

Bien sûr, ce n'est qu'un exemple mais vous pouvez faire beaucoup mieux en exploitant toutes les propriétés CSS que l'on a vues jusqu'ici.

Jusque là, on avait appris à faire des champs de saisie, à décorer, etc. Mais un autre problème se pose : comment récupérer et traiter les valeurs saisies ? Rendez- vous dans le cours de PHP pour ceux qui veulent en savoir plus.