Se connecter / S'enregistrer
Votre question

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

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
31 Janvier 2007 21:41:31

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

31 Janvier 2007 21:54:40

Salut !

Tu peux mettre un argument "size=unNombre" dans tes balises input, cet argument défini la longueur du champs dans ta page.
31 Janvier 2007 23:00:21

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?
Contenus similaires
1 Février 2007 13:08:27

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. :-)
1 Février 2007 17:48:42

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 :)  .
2 Février 2007 12:54:46

En effet... Une erreur bête, mais qui arrive ! :-)
2 Février 2007 17:47:15

dsl j'ai du mal comprendre ta question :sleep:  . Sinon jusqu'à maintenant j'utilisais les tableaux pour organiser mes pages web, bon maintenant je compte me mettre à la norme w3c donc je crois qu'il faut que j'arrête :( 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS