[Résolu] Formulaire : label en display:block

Bonsoir,
Je souhaite, dans un formulaire, avoir une même largeur pour tous les libellés de mes champs.
J'ai donc utilisé l'élément <label>.
Voilà mon code HTML de ce test :

<form id="test" method="post" action="">
  <label>Nom :
    <input name="nom" type="text" id="nom" />
  </label>
  <label>Prénom :
    <input type="text" name="prenom" id="prenom" />
  </label>
</form>

Et voilà mon style CSS :

<style type="text/css">
label {
	display: block;
	width: 100px;
	background-color:#FC0; /*juste pour bien visualiser*/
}
</style>

A mon étonnement, les champs <input> apparaissent en dessous du <label>.
Mon label est bien en display:block et input est bien un élément inline dans un élément block pourtant ?
Où se trouve mon erreur ?
Merci pour vos éclaircissement
Modifié par krysttof (09 Feb 2009 - 11:03)

krysttof a écrit :
Où se trouve mon erreur ?

L'utilisation d'un width: 100px?

Si chaque label est un bloc large de 100px (ce qui est très peu), et que tu dois y caser 1) un intitulé (texte) et 2) un champ INPUT, je doute que les deux tiennent côte-à-côte dans cet espace réduit!

Par ailleurs, l'utilisation que tu fais des labels (on parle de «labels implicites») est déconseillée. Pour en savoir plus, faire une recherche dans les astuces de la partie Apprendre.

Effectivement 100px c'était vraiment trop court !
J'ai bien vu et lu que l'utilisation de mon <label> n'était pas idéale.
Maintenant comment faire ?
Est-ce possible d'utiliser une largeur spécifiée pour que les <label> aient tous la même largeur et pour que les <input> soient sur la même ligne ?

krysttof a écrit :
Maintenant comment faire ?

Ça dépend un peu de ce que tu veux faire...

krysttof a écrit :
Est-ce possible d'utiliser une largeur spécifiée pour que les <label> aient tous la même largeur

Oui.

krysttof a écrit :
et pour que les <input> soient sur la même ligne ?

Eh bien si tu augmentes ta largeur de 100px à mettons 400px, ça devrait tenir sur la même ligne, non?

Si ça ne répond pas à ta question, je pense que tu as mal formulé ta demande. Quel rendu souhaites-tu exactement?

Je reformule ma demande pour être plus clair.
Je souhaite créer un formulaire en CSS et non pas en tableau. Avec un tableau je peux créer une première colonne pour y mettre les libellés des objets de mon formulaire. Ainsi ils pourront être de la mettre longueur visuelle et aligner à gauche ou à droite. Dans une deuxième colonne, je mets mes objets (champs de texte...). Ainsi eux aussi seront bien alignés.
Je souhaite pouvoir faire ce même type d'alignement, avoir ces mêmes largeur en CSS.
D'où l'idée, peut-être à revoir, de mettre les <label> en block pour pouvoir spécifier une largeur identique : ainsi j'aurai un alignement des <label>, mais aussi des <input> s'ils sont bien à droite des <label> de même largeur.
J'espère avoir été plus clair.
Merci de votre aide.

Bonjour,

Tu trouveras dans les astuces de l'univers apprendre un tour d'horizon de différentes techniques permettants de mettre en forme des formulaires sans tableaux en CSS.
Florent V. propose également quelques tutoriels et pistes de réflexions que tu peux consulter et notamment quelques exemples de formulaires sans tableaux

Bonnes lectures,
Cdt,
Sylvain

krysttof a écrit :
Je souhaite créer un formulaire en CSS et non pas en tableau.

Et si on reprécisait qu'il n'y a pas d'un côté Css et de l'autre les tableaux, mais d'un côté des balises Html et de l'autre des mises en forme par Css. Tu peux très bien avoir une page web en tableaux ET Css, et une autre sans tableaux ni Css.
La distinction tient à l'utilisation qui est faite des balises Html : soit elles sont utilisées conformément à l'usage prévu (on parle alors d'un usage "sémantique") soit elles sont détournées pour répondre à des besoins pour lesquels elles ne sont pas faites.
Des tableaux (<table>) sont faits pour mettre en relation des éléments classés en deux dimensions : colonnes et rangées. Si il existe une relation entre ce qui définit les rangées (par exemple des dates) et ce qui définit les colonnes (par exemple des objets) alors le contenu (par exemple des prix) doit être mis en tableau. S'il n'y a aucune relation et que les tableaux ne servent que de support à une mise en page on est en dehors des clous.
Dans ton cas il y a une relation évidente entre colonnes (labels/champs) et rangées (diverses questions)... pourquoi alors vouloir éviter le tableau ?
Qu'ensuite Css vienne présenter le tout de telle ou telle façon n'est qu'accessoire.

@ 6l20 : merci pour le lien vers le site de FLorent V. avec un exemple très comlet pour créer des formulaire en présentation CSS.

@ Arsene : tu as parfaitement raison dans le distingo entre HTML/CSS/tableau. Mais c'était pour moi juste une question d'exercice de style.

krysttof a écrit :
ainsi j'aurai un alignement des <label>, mais aussi des <input> s'ils sont bien à droite des <label>

Je vois mal comment les INPUT seraient à droite des LABELS alors qu'avec ta construction HTML ils sont dans les LABEL.

(Faute d'étourderie?)

Florent V. a écrit :
Faute d'étourderie?

Non faute de débutant !
Je pensais initialement qu'en indiquant une largeur fixe à mon <label> mon <input> allait se caler à sa droite !
Erreur de débutant que je suis ! Puisque la largeur de mon <label> inclu aussi, bien sur, tous les éléments inclus, dont le <input> !

krysttof a écrit :
Non faute de débutant !

C'est encore mieux, tu auras appris quelque chose.