Alignement de champ dans un formulaire

Fermé
Nono - 8 août 2008 à 18:09
 Alex - 21 juin 2011 à 10:33
Bonjour,

Voila mon problème, j'ai crée un formulaire, mais le champ ne sont pas alignés les uns par rapport aux autres, en fait ça dépend du label que j'ai attribué (nom, prénom, ...)

J'ai pourtant cherché, mais je ne rien trouvé qui pouvait résoudre mon problème : j'ai essay de le mettre dans un tableau par exemple, mais ca ne change rien ...

Voila le formulaire en question :

<form action="merci.php" method="post">


<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="age">Âge</label> <input type="text" name="age" id="age" />*<br />
<label for="poids">Poids :</label> <input type="text" name="poids" id="poids" />*<br />
<label for="taille">Taille :</label> <input type="text" name="taille" id="taille" />*<br />
<label for="ville">Ville/Pays</label> <input type="text" name="ville" id="ville" /><br />
<label for="cp">Code Postal :</label> <input type="text" name="cp" id="cp" /><br />
<label for="tel">Téléphone fixe :</label> <input type="text" name="tel" id="tel" />*<br />
<label for="portable">Téléphone mobile :</label> <input type="text" name="portable" id="portable" /><br />
<label for="mail">Email :</label> <input type="text" name="mail" id="mail" /><br />
<input type="submit" value="Envoyer" />

</form>

Merci,

Nono

6 réponses

medoc13 Messages postés 65 Date d'inscription jeudi 7 août 2008 Statut Membre Dernière intervention 12 août 2008 21
8 août 2008 à 19:17
Désolé pour l'oubli rajout float
label{
width: 120px;
float: left;
}
2
La meilleure pratique pour aligner ses champs de formulaire. Les tableaux sont à proscrire pour la mise en page.

On peut également "retirer" le float ne le laisser que pour ie6 avec
label{
display: inline-block !important;
display: block;
width: 120px;
float: none !important;
float: left;
}
0
medoc13 Messages postés 65 Date d'inscription jeudi 7 août 2008 Statut Membre Dernière intervention 12 août 2008 21
8 août 2008 à 18:13
Salut,
dans tes css donne une dimension fixe à tes label
exemple
label{
width: 120px;
}
0
Perdu, ca marche pas :(
En appliquant le code, rien ne change, et "pour voir" j'ai modifié la couleur du texte des labels, et la ca marche nickel ...
0
Pluck Messages postés 41 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 29 septembre 2009 7
8 août 2008 à 19:22
Bonjour,
Il faut faire un tableau en mettant le label et le input dans deux cases différentes (Ne pas oublier de supprimer les "<br />" :

<form action="merci.php" method="post">
<table>
<tr> <td> <label for="nom">Nom :</label></td> <td><input type="text" name="nom" id="nom" />*</td>
<tr> <td> <label for="prenom">Prénom :</label></td> <td><input type="text" name="prenom" id="prenom" />*</td>
<tr> <td> <label for="age">Âge</label></td> <td><input type="text" name="age" id="age" />*</td>
<tr> <td> <label for="poids">Poids :</label></td> <td><input type="text" name="poids" id="poids" />*</td>
[...]
</table>
</form>


0
medoc13 Messages postés 65 Date d'inscription jeudi 7 août 2008 Statut Membre Dernière intervention 12 août 2008 21
8 août 2008 à 19:25
il faut mieux eviter les tableaux, qui doivent etre utiliser pour des donnees tabulaire, en plus si tu dois modifier ton design c'est la galere
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Aah oui voila, c'est parfait ;)

Je te remercie, et puis baa je signale que le problème est résolu :P

Encore merci a toi,
Nono
0
Pluck Messages postés 41 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 29 septembre 2009 7
8 août 2008 à 19:29
De rien, j'ai eu le même probleme il y a quelque temps, donc, ca m'as marqué ^^.
0