Mise en page formulaire en 2 colonnes

27 déc. 2005, 18:42

Bonjour à tous,
je me bats avec la mise en page d'un formulaire sur 2 colonnes!
Pour dire à quel point je suis arrivé, je suis même tenté par le retour au tableau!
Bref...
alors je dispose d'une div contenant tout le formulaire, les 2 parties de mon formulaire sont placées dans des fieldset.
Dans chaque fieldset j'ai donc une paragraphe pour chaque ligne contenant un label et un input(ou select).
Exemple:

Code : Tout sélectionner

<div id="form">
<fielset>
<p><label>Nom</label><input name="nom" type="text" /></p>
<p><label>Code postal</label><input name="cp" type="text" /></p>
</fieldset>
<fielset>
<p><label>Prenom</label><input name="prenom" type="text" /></p>
<p><label>Age</label><input name="age" type="text" /></p>
</fieldset>
</div>

Je souhaite que les 2 fieldset soient en colonne (à priori display:inline), les label alignés sur le droite et les inputs(ou select) sur la gauche...
Ne me demandez pas le CSS, il est devenu un vrai foutoir et j'en peux plus.
Quelqu'un peut m'aider à réaliser ce que je veux? C'est vraiment important...
Merci d'avance
PS: je manque terriblement de temps

27 déc. 2005, 19:00

au pire tu fait dans ton css

fieldset{
float:left;
}
hr{
clear:left;
visibility:hidden;}

et tu ajoute un hr apres tes fieldsets apres tu peut jouer avec des marge

sinon
tu met un display:inline ca fonctionne normalement il faudrai voir le css

27 déc. 2005, 19:15

Bah le problème n'est pas tellement de mettre les fieldset en colonnes mais plutot le positionnement des labels et des inputs à l'intérieur.

En gros je veux faire le même effet que cette mise en page en tableau:

<table border="0" cellpadding="1" cellspacing="1">
<tr><td align="right"><label>Nom :</label></td><td align="left"><input type="text" name="nom"/></td><td align="right"><label>Prenom :</label></td><td align="left"><input type="text" name="prenom"/></td></tr>
<tr><td align="right"><label>Age :</label></td><td align="left"><input type="text" name="age"/></td><td align="right"><label>Ville :</label></td><td align="left"><input type="text" name="ville"/></td></tr>
</table>

27 déc. 2005, 19:20

pour contourner ce probleme je fais comme ceci

<ul><li><label>sve</lable><input ..../></li>
<li><label>reger</lable><input ..../></li>
<li><label>rthr</lable><input ..../></li>
</ul>

je considere que cette une liste ou alors j'utilise dd et dl

28 déc. 2005, 11:00

Bon sur alsacréation, on m'a suggéré d'abandonner et de passer en tableau

28 déc. 2005, 14:12

Tu peux très bien te passer d'un tableau pour mettre en page un formulaire sur deux colonnes : exemple:

<div id="formulaire">
  <div id="gauche">
    <label>Nom :<input type="text" name="nom"/></label><br>
    <label>Age :<input type="text" name="age"/></label>
  </div>
  <div id="droite">
    <label>Prenom :<input type="text" name="prenom"/></label><br>
    <label>Ville :<input type="text" name="ville"/></label>
  </div>
</div>

À ce code, tu peux ensuite adjoindre une feuille de style CSS comme ceci:

Code : Tout sélectionner

#formulaire {
    width: 450px;
}
#formulaire div {
    text-align: right;
}
#gauche {
    float: left;
    width: 50%;
}

Tu obtiendras le même affichage qu'avec le tableau que tu as montré plus haut.

28 déc. 2005, 15:59

En effet

et moi qui était déjà reparti sur mes tableaux...
Je pensais vraiment que ct'était impossible vu que sur Alsa (censé être les spécialistes) on m'avait dit de laisser tomber...

surement un malentendu.
Bref je te remercie beaucoup Cyrano!
Edit: arf en fait non ça marche moyen...dès que les libellés sont importants toute la mise en page saute

28 déc. 2005, 16:05

Je vais quand même ajouter un petit truc : ajoute dans tes champs de formulaire un attribut tabindex, ça facilitera la navigation au clavier dans un ordre déterminé. Ce qui donnerait au final:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Formulaire sans tableaux</title>
<style type="text/css">
/* <![CDATA[ */
#formulaire {
    width: 450px;
}
#formulaire div {
    text-align: right;
}
#gauche {
    float: left;
    width: 50%;
}

/* ]]> */
</style>
</head>
<body>
<div id="formulaire">
  <form action="" method="post">
  <div id="gauche">
    <label>Nom :<input type="text" name="nom" tabindex="1"/></label><br />
    <label>Age :<input type="text" name="age" tabindex="3"/></label>
  </div>
  <div id="droite">
    <label>Prenom :<input type="text" name="prenom" tabindex="2"/></label><br />
    <label>Ville :<input type="text" name="ville" tabindex="4"/></label>
  </div>
  </form>
</div>
</body>
</html>

Si tu observes bien, il ne sont pas dans l'ordre où ils sont inscrit dans le code, mais affiche la page et utilise la touche [Tab] pour naviguer dans le formulaire et tu constateras un ordre logique.

Mise en page formulaire en 2 colonnes

Qui est en ligne