Alignement de champ dans un formulaire

Nono -  
 Alex -
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   Statut Membre Dernière intervention   21
 
Désolé pour l'oubli rajout float
label{
width: 120px;
float: left;
}
2
Alex
 
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   Statut Membre Dernière intervention   21
 
Salut,
dans tes css donne une dimension fixe à tes label
exemple
label{
width: 120px;
}
0
Nono
 
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   Statut Membre Dernière intervention   7
 
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   Statut Membre Dernière intervention   21
 
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
Nono
 
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   Statut Membre Dernière intervention   7
 
De rien, j'ai eu le même probleme il y a quelque temps, donc, ca m'as marqué ^^.
0