cogimator.net

Une ligne à la fois...

Formulaires (x)html : comment faire ?

Si comme moi vous aimez les standards et l'accessibilité vous avez déjà du vous arracher des cheveux sur les formulaires web. En plus d'entretenir une future calvitie, ca me chagrinais (oui je suis comme ça...) de ne pas avoir de "modèle". En voilà donc un, qui permet de gérer le traditionnel formulaire sur deux colonnes, avec à gauche les libellés, et à droite les champs de saisie.

Rien de bien revolutionnaire dans tout cela, on pourra juste noter que ce modèle

  • se base sur des position:absolute au lieu de float:left pour aligner les label, suite à la lecture de cet article.
  • permet d'avoir une zone de "droite" plus haute que celle de gauche (cf l'exemple).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Test formulaires</title>
  <style type="text/css">
  .left {
    position: absolute;
    width: 250px;
    border: 1px solid black;
    padding: 5px;
    margin-top: 5px;
  }
  form {
   position: absolute;
   width: 500px;
   margin-left: 270px;
  }
  form label {
   position: absolute;
   width: 180px;
  }

  form label strong {
   color: red;
  }

  form .droite {
   padding-left: 190px;
   width: 350px;
   padding-bottom: 20px;
  }  

  form .droite .error {
   color: red;
   margin: 0;
  }

  form .droite .info {
   font-decoration: none;
   margin: 0;
  }

  form .boutons {
   margin-left: 190px;
  }
  </style>
 </head>
 <body>
  <div class="left">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <form action="#">
   <fieldset>
    <legend>test</legend>
    <label for="nom">Nom <strong>*</strong></label>
    <div class="droite">
     <input type="text" id="nom"/>
     <p class="error">Le nom est obligatoire</p>
    </div>
    
    <label for="prenom">Prenom <strong>*</strong></label>
    <div class="droite">
     <input type="text" id="prenom"/>
     <p class="error">Le prenom est obligatoire</p>
    </div>
   
    <label for="age">Age</label>
    <div class="droite">
     <input type="text" id="age"/>
     <p class="info">Purement indicatif</p>
    </div>
   
    <label for="couleur">Couleur préférée</label>
    <div class="droite">
     <select id="couleur">
      <option>rouge</option>
      <option>vert</option>
      <option>bleu</option>
     </select>
    </div>
   
    <label>Couleurs detestées</label>
    <div class="droite">
     <input type="checkbox" id="noir"/><label for="noir">Noir</label><br/>
     <input type="checkbox" id="gris"/><label for="gris">Gris</label>
    </div>
   
    <div class="boutons">
     <input type="submit" value="Valider"/>
     <input type="reset" value="Annuler"/>
    </div>
   </fieldset>
  </form>
 </body>
</html>

Vous pouvez voir le rendu ici formulaire_xhtml.html (2,47 kb)