PRATIQUE CLIENTS WEB 
CSS : un formulaire sans utiliser de tableau
 
"J'essaye de réaliser mon site en CSS avec le minimum de tables, mais je butte sur les formulaires : leur mise en forme nécessite des tables parfois compliquées, et je ne vois pas comment faire." (22/04/2004)


Un problème, une interrogation ? Adressez-vous à la rédaction de JDNet Développeurs

Nous arrivons enfin à une époque où la reconnaissance des standards devient requise au sein des navigateurs modernes, ce qui nous permet d'envisager des sites majoritairement mis en page avec CSS - sans pour autant abandonner les tables, nécessaire pour présenter des informations... tabulaires.

  Forum

Réagissez dans les forums de JDN Développeurs

Passer d'un design en "cellules" à un design en "blocs" n'est cependant pas des plus aisés, et la mise en page de formulaire fait partie de ces soucis du designer Web voulant réaliser son site en XHTML/CSS...

Nous vous présentons ici une manière d'aligner proprement les éléments d'un formulaire, en n'utilisant uniquement les feuilles de style... Nous utilisons pour cela la balise label et les propriétés CSS display:inline, float:left et width.

Inscription


Le code
<style>
form.css fieldset
  {
  padding: 1em;
  }
form.css label
  {
  display: inline;
  float: left;
  width: 70px;
  }
</style>

<form action="" class="css">
  <fieldset>
    <legend>Inscription</legend>
    <label for="nom">Username:</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="addresse">Adresse:</label>
    <input type="text" name="adresse" id="adresse" />
  </fieldset>
</form>



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page