Se connecter avec
S'enregistrer | Connectez-vous

[Resolu]champs de formulaire alignés verticalement(HTML/CSS)

Dernière réponse : dans Programmation

Bonjour à tous,
J'ai commencé la construction d'un site internet qui contient notament un formulaire qui ressemble à ca:
  1. <form action="blabla.php" method="post" id="formulaire">
    

  2. <fieldset id="section1">
    

  3. <legend>Titre1</legend>
    

  4. <label for="input1">Champ 1</label>
    

  5. <input type="text" name="input1" id="input1" />
    

  6. <label for="input2">Champ 2</label>
    

  7. <input type="text" name="input2" id="input2" />
    

  8. <label for="input3">Champ 3</label>
    

  9. <input type="text" name="input3" id="input3" />
    

  10. </fieldset>
    

  11. </form>


Le formulaire est bien sur un peu plus consequent, et possede un bouton ,de validation, mais il est structuré comme ca.
Mon probleme, c'est que les noms Champ1, champ2,... ont des longueurs differentes, et du coup, les cases du formulaire ne sont pas alignées verticalement.
J'ai cherché sur internet, et j'ai trouvé comme solution de fixer une largeur fixe pour les balises label a l'aide d'une CSS:
  1. label
    

  2. { width : 30px ; }

Je comprends bien l'idée, mais ca n'a pas l'air de fonctionner.
Etant un gros débutant en HTML/CSS, je patauge la dedans depuis quelques jours, sans avancer. C'est pourquoi je sollicite votre aide :) .

Quelqu'un pourrait-il m'expliquer comment aligner ces satanés champs (sans utiliser des tableaux, parce que j'ai cru lire que c'était mal :)  ), ou alors me filer un lien qui me fournirait une explication ?

Merci de votre aide.

Autres pages sur : resolu champs formulaire alignes verticalement html css

Lassé par la pub ? Créez un compte

Bonsoir,
Citation :
Tu peux mettre un argument "size=unNombre" dans tes balises input, cet argument défini la longueur du champs dans ta page.

Soit je n'ai pas compris, soit tu ne réponds pas à ma question :) .
Changer la taille des champs ne va pas les faire s'aligner je crois, ou alors j'ai loupé un truc...

Une autre idée?

Pour les formulaires, la façon la plus simple est l'utilisation d'un tableau. Et, non, ce n'est pas mal ! Pas pour présenter des données sous formes tabulaires. C'est mal si tu fais ton design avec par exemple. Mais il y a des fois où tu peux quand même les utiliser, comme dans ce cas. :-)

Merci pour cette réponse Sethpolma:) 
...Mais en fait j'ai trouvé :) .

C'est de ma faute (il fallait s'en douter ;)  ). En fait, comme j'ai essayé plein de trucs (je suis débutant pour ma défense...), je me suis retrouvé avec un truc comme ca:
  1. 1. <form action="blabla.php" method="post" id="formulaire">
    

  2.    2. <fieldset id="section1">
    

  3.    3. <legend>Titre1</legend>
    

  4.    4. <label for="input1"></label>
    

  5.    5. Champ 1<input type="text" name="input1" id="input1" />
    

  6.    6. <label for="input2"></label>
    

  7.    7. Champ 2<input type="text" name="input2" id="input2" />
    

  8.    8. <label for="input3"></label>
    

  9.    9. Champ 3<input type="text" name="input3" id="input3" />
    

  10.   10. </fieldset>
    

  11.   11. </form>

(notez le joli vide entre les balises label...)
Du coup, je suppose que changer la taille des label ne changeait pas grand chose.

Le probleme est donc résolu.
Merci à ceux qui m'ont proposé des solutions.
A bienot :)  .
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde