Feuilles de style CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Feuilles de style CSS (Cascading Style Sheets) Niveau recommandé pour le cours de Feuilles de style CSS (Cascading Style Sheets) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 11: Exercice - Styler un formulaire

Toutes les pages

Exercice

Il est temps de mettre en pratique ce que nous avons vu jusqu'ici. On va faire simple, question de vous initier un peu à la manière de coder le design d'une page entière en CSS.

L'objectif de cet exercice est de créer un formulaire d'inscription qui comporte les champs: nom, prénom, email, login, mot de passe (à deux reprises) et un bouton d'envoie. On fera en sorte d'entourer notre formulaire par un cadre (fieldset ou autre objet). Le plus important c'est de réussir un design sobre mais agréable. Je vous laisse donc la liberté de faire ce que vous voulez. Cependant, je veux vous montrer l'exemple que j'ai codé, si jamais vous voulez le suivre.
Inscription
Nom

Prénom

Email

Mot de passe

Confirmer



Voici quelques points qu'il faut respecter:
  1. Les textes et les champs de formulaires sont alignés verticalement.
  2. Le fond est un dégradé du gris.
  3. Les champs actifs (sélectionnés pour la saisie) changent de couleur d'arrière-plan.

Solution

Code HTML:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="monstyle.css" />
   </head>
   <body id="exercice1_body">
      <div id="exercice1_conteneur">
         <form name="inscription" method="post" action="#">
            <fieldset class="exercice1_fieldset">
               <legend class="exercice1_legend">Inscription</legend>
               <div class="exercice1_label">
                  Nom
               </div>
               <div class="exercice1_input">
                  <input type="text" name="nom" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Prénom
               </div>
               <div class="exercice1_input">
                  <input type="text" name="prenom" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Email
               </div>
               <div class="exercice1_input">
                  <input type="text" name="email" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Mot de passe
               </div>
               <div class="exercice1_input">
                  <input type="password" name="mdp" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  Confirmer
               </div>
               <div class="exercice1_input">
                  <input type="password" name="remdp" class="exercice1_champ" />
               </div><br />
               <div class="exercice1_label">
                  
               </div>
               <div class="exercice1_input">
                  <input type="submit" name="sinscrire" value="S'inscrire" class="exercice1_champ" />
               </div><br />
            </fieldset>
         </form>
      </div>
   </body>
</html>
Code CSS:
#exercice1_body{
   margin:0;
}
#exercice1_conteneur{
   margin:0;
   padding:10px;
   background:linear-gradient(to bottom,#DDDDDD,#FFFFFF);
}
.exercice1_fieldset{
   margin:10px;
   border:none;
   background-color:#FFFFFF;
   border-radius:10px;
   padding:20px;
}
.exercice1_legend{
   font-family:verdana, arial, sans-serif;
   font-size:14pt;
   font-weight:bold;
   color:#FFFFFF;
   margin:10px;
   padding:10px 20px 10px 20px;
   background-color:#AAAAAA;
   border-radius:4px;
}
.exercice1_label{
   display:inline-block;
   width:200px;
   font-family:verdana, arial, sans-serif;
   font-size:10pt;
   padding:10px;
}
.exercice1_input{
   display:inline-block;
   width:200px;
   padding:6px;
}
.exercice1_champ{
   outline:none;
   border:solid 1px #AAAAAA;
   padding:10px;
   border-radius:4px;
   font-family:verdana, arial, sans-serif;
}
input[type="text"].exercice1_champ:focus, input[type="password"].exercice1_champ:focus{
   background-color:#EEEEEE;
}
input[type="submit"].exercice1_champ{
   background-color:#EE6600;
   color:#FFFFFF;
   padding:6px 20px 6px 20px;
   border:none;
   cursor:pointer;
   padding:10px;
   width:160px;
}
Vous avez remarqué le sélecteur input[type="text"].exercice1_champ:focus? Il signifie la balise <input> qui a l'attribut type ayant comme valeur text et une classe nommée exercice1_champ quand elle est sélectionnée (pseudo-classe :focus). On peut combiner les sélecteurs comme bon nous semble. Simple non?
Sachez qu'il existe plus d'une façon pour réussir la même présentation. Le code que je propose n'est pas unique.