[Résolu] Mise en forme d'un formulaire

Salut,

Je suis en train de comprendre comment je pourrais mettre en forme un formulaire relativement complexe avec du CSS, en l'occurence j'ai parfois 2 champs sur la même ligne et j'avou que ce qui se gérait facilement avec des tableaux devient vite un casse tête à convertir en CSS.

Après un petit surf sur le web pour voir ce que proposaient les sites sur le CSS pour régler cette problématique je n'ai finalement rien trouvé qui répondent réellement à mon besoin, donc je me suis lancé dans ma propre méthode, la voici :

j'aurais une feuille de style définissant la mise en page dont la structure devrait ressembler à celle ci :

.label_u => définit les propriété des labels tenant sur une ligne
.label_g => définit les propriété des labels gauche
.label_d => définit les propriété des labels droit

.chps_u => définit les propriété des chps tenant sur une ligne
.chps_g => définit les propriété des chps gauche
.chps_d => définit les propriété des chps droit

Voilà pour ma feuille css, ensuite je souhaites que l'écriture de mon formulaire soit aussi simple que ça :

// définition d'un chps sur une ligne

<label class='label_u'>CHPS UNIQUE</label><input class='chps_u'></input>

// définition d'un chps à gauche

<label class='label_g'>CHPS GAUCHE</label><input class='chps_g'></input>

// définition d'un chps à droite

<label class='label_d'>CHPS DROITE</label><input class='chps_d'></input>

Comme vous le remarquez, je m'interdis de mettre des <br/> je souhaites que CSS s'occupe de TOUTE la mise en page, c'est son boulot après tout.
Et c'est précisément le soucis.. comment lui dire de sauter une ligne avec comme contrainte suivante :
"sauter une ligne à la fin d'un chps_u" et "sauter une ligne à la fin d'un chps_d", mais surtout pas sauter de ligne à la fin d'un chps_g

En gros, que remplir dans mes diverses classes CSS pour régler ma problèmatique ?

Merci à tous ceux qui se pencheront sur mon soucis
Modifié par NoT (04 Apr 2006 - 15:08)

mieux vaut en xhtml mettre tes labels dans des <p> ce qui facilitera ta mise en page les retours a la ligne sans <br> et generalement <label for> est recommandé

Salut,

Si j'utilise <p> pour mes labels j'ai 2 problèmes :

- il revient à la ligne automatiquement ( or je ne le souhaites pas dans tous les cas.. )
- il saute une ligne, ça j'en veut pas.. je veux juste un retour.
- si c'est le label que j'encadre de <p>, il me saute la ligne avant d'avoir afficher le chps correspondant à mon label, forcément.

Enfin pour le for, je suis au courant de l'instruction de ce qu'il fait mais dans le cas présent ça me sert à rien, je cherches à régler mon problème de positionnement donc c'est volontairement que je n'en ai pas parlé, car c'est externe à mon problème, apriori.
Modifié par NoT (04 Apr 2006 - 10:48)

Bonjour et bienvenue NoT,

merci d'encadrer tout code des balises [ code] ... [ /code] (sans les espaces) afin de le rendre plus lisible pour tout le monde, comme c'est indiqué dans l'Aide de ce Forum.

Felipe

il faut mettre tes labels et l'input correspondant dans le meme <P>

<p class="g">
<label for tatitata>tatitata<inputid="tatitata"type="text"size=""/></label>
</p>

css

.g {margin:0; } 

tu auras juste le retour a la ligne sans saut de ligne
maintenant quand tu veux mettre tes 2 input et labels sur la meme ligne tu les mets dans le meme <p>
Modifié par jp94 (04 Apr 2006 - 11:07)

Re,

J'ai éditer mon post pour rajouter les balsies code comme me l'a indiqué Felipe, j'avais omis de le faire pensant que c'était pas nécessaire pour une ligne de code à chaque fois, je m'en excuse.

Pour ta solution jp94 c'est précisément ce que je veux éviter, je souhaites que CSS se charge de ma mise en forme, pas XHTML

J'ai une piste sérieuse qui m'est venu à l'idée en voyant les gabarit des menu disponibles sur ce site : passer par des <lu> et des <li> !

Ca à l'air de fonctionner à merveille et c'est une technique que je n'ai pu voir nulle part ailleurs mais qui semble la plus adaptée à mon soucis.

Je vous tient au courant de mes recherches, merci à vous.

NoT a écrit :
Pour ta solution jp94 c'est précisément ce que je veux éviter, je souhaites que CSS se charge de ma mise en forme, pas XHTML

Tu veux dire que quand tu as un label et un champ sur une même ligne, c'est en réalité totalement arbitraire, uniquement pour des questions esthétiques, et que ça ne traduit pas une information ?
Tu veux dire que quand tu as un label et un champ sur la même ligne, ceux-ci ne sont en fait pas liés d'un point de vue logique ?

Si c'est le cas, effectivement il ne vaut mieux pas les lier par la syntaxe XHTML.

Par contre, je trouve que la syntaxe suivante est tout à fait logique et censée, et permet de donner aussi bien "sémantiquement" que visuellement une information :

<p><label for="champ">Mon champ</label><input type="text" id="champ" /></p>

Je trouve également que pour un formulaire "classique" avec une colonne de labels et une colonne de champs, un tableau est tout à fait approprié et permet de donner une information "tabulaire" (mais peut-être redondante avec les informations sémantiques de l'attribut for...).

Enfin, je terminerai en rappelant que si les navigateurs ont une mise en forme par défaut des éléments, c'est bien parce que leur mise en forme, pensée en fonction des conventions de lecture (occidentales) et pour ainsi dire sans esthétisation, permet de faciliter la compréhension du statut de chaque élément.

le css n'existe que par le html peu importe que tu utilises p ou ul.
Ce sont des balises html l'une et l'autre, mais si tu as une dent contre p alors utilise ul

En fait effectivement l'information qui me permet de savoir si je dois ou non écrire sur la même ligne est connu par avance, ce n'est pas une contrainte de mise en forme mais une contrainte de logique, néanmoins dans mon cas c'est assez particulier puisque c'est une classe php qui me génère mon formulaire ligne par ligne, et que je souhaites que la mise en page soit entièrement définit en CSS, de façon à ne pas modifier ma classe de génération de formulaire.

J'y arrive pas trop mal il me reste à résoudre néanmoins ce point de difficulté que je ne comprend pas :

<style>
label
{
	float:left;
	width: 100px;
}
</style>

<html>
<body>
<ul>
<li><label>Mon premier élément de ma liste</label><input></input></li>
<li><label>Mon 2e élément de ma liste</label><input></input></li>
</ul>
</body>
</html>

Je n'arrive pas à comprendre pkoi les 2 éléments de ma liste ne sont pas alignés à gauche sur la meme ligne verticale, mon float:left est nécessaire sur mes labels pour qu'ils aient tous la meme largeur et que les input soient aligné les uns en dessous des autres, mais je ne souhaite pas que cela transforme la mise en page des li, ce qui ne devrait apriori pas arriver vu que les li "englobent" les label

Réel bug de CSS ou faute d'interprétation de ma part ?

Je peux résoudre mon soucis en collant un <br/> mais bon d'une part j'aimerais une solution 100% CSS pour les raisons citées plus haut, et d'autre part j'aimerais comprendre

Si qqn a une idée

tu es en train de reinventer le code html tu fermes les labels sans avoie placer l'input l'input tu tu le codes comme un <p> ou <h> avec 2 balises alors que c'est une balise unique tu t'etonnes qu'il y ait des affichages bizares

jp94 a écrit :
tu es en train de reinventer le code html tu fermes les labels sans avoie placer l'input l'input tu tu le codes comme un <p> ou <h> avec 2 balises alors que c'est une balise unique tu t'etonnes qu'il y ait des affichages bizares

???

Bien sûr qu'on peut fermer les labels sans avoir placé l'input à l'intérieur. On peut même placer le label n'importe où dans la page, ce qui compte c'est de pointer vers le bon champ grâce à l'attribut for, non ?

Les groupes label + champ dans des éléments de liste, pourquoi pas.

@ NoT :
Par contre il me semble que label est un élément de type en-ligne, et donc pour lui donner une largeur fixe il vaut mieux le passer en display:block;
Qu'est-ce que tu voudrais obtenir exactement comme rendu pour le code que tu donnes ?

Au sujet des labels : http://www.w3schools.com/tags/tag_label.asp , l'input n'est pas inclut dans le label ( ce qui me semble en plus logique vu que label signifie "étiquette" )

Pour le input ok à la limite, j'ai prit l'habitude de mettre un </input> depuis que certaines anciennes versions de firefox m'affichait pas la zone de saisi s'il n'y avait pas de </input>

En fait ce que je cherches à faire c'est avoir mes 2 éléments l'un en dessous de l'autre là ( pour les mettre l'un à coté j'ai deja résolu le soucis, mais j'avais encore ce ptit désagrément lorsqu'ils étaient l'un en dessous de l'autre )

Finalement j'ai réglé mon problème avec un clear:left sur mes li , pour le forcer à abandonner le float à gauche si j'ai bien comprit .

ce qui donne le code suivant :

<style type="text/css">
label
{
	float:left;
	width: 100px;
}

li
{
	clear: left;
}

</style>
<html>
<body>
<ul>
<li><label>Mon premier élément de ma liste<input></input></label></li>
<li><label>Mon 2e élément de ma liste<input></input></label></li>
</ul>
</body>
</html>

Merci à vous
Modifié par NoT (04 Apr 2006 - 15:08)

Un petit Résolu, alors !

si tu ne mets pas l'input dans le label ou est l'interet du float:left etant 2 balises inline nul besoin de mettre un float et d'ailleurs meme si tu mets l'input dans label en y reflechissant mais l float m'avait desorienté

Et en déclarant les deux éléments comme étant des éléments de type bloc, est-ce qu'on n'obtenais pas la même chose à moindre frais ?

Je regardes ca
Modifié par NoT (04 Apr 2006 - 16:03)

Au final non, je n'obtenais pas les mêmes résultats en les déclarant en display:block, bon je comprend pas exactement pourquoi, et je dois avacer sur mon projet donc ma phase re-découverte du CSS doit se terminer là. ( à charge de revanche )

Concernant ta remarque jp94 mon float me semble obligatoire pour pouvoir définir mon width, sinon il est pas pris en compte.

J'obtiens un résultat très proche de celui que j'attendais mais finalement je restes quand même relativement déçu de mes expérimentations, même si au niveau du code c'est plus propre que des tableaux HTML, au niveau du rendu les tableaux me semblaient plus correct, là des fois quand je redimensionne ma page je me retrouve avec des label au dessous des chps de saisi ce qui n'arrive jamais en passant par les tableaux..

Merci de m'avoir accompagné dans cette aventure
Modifié par NoT (05 Apr 2006 - 10:32)

NoT a écrit :
Au final non, je n'obtenais pas les mêmes résultats en les déclarant en display:block
[...]
Concernant ta remarque jp94 mon float me semble obligatoire pour pouvoir définir mon width, sinon il est pas pris en compte.

Il s'agit d'éléments de type en-ligne (input et label).
Les éléments de type en-ligne (inline) n'acceptent pas de dimmensions fixes, sauf apparemment s'ils sont flottants, ou peut-être aussi s'ils sont positionnés en absolu (je ne sais plus exactement).
Il est toujours possible de passer le mode de rendu de ces éléments en type bloc, avec un display: block;

Les éléments de type bloc sont comparables à des paragraphes. Ils passent à la ligne automatiquement.
Par contre, si on veut qu'ils passent à la ligne, il ne faut pas les combiner à un positionnement flottant.

Donc on vire le float, et on déclare les input et les lable en display: inline, et ça devrait marcher.

mpop a écrit :
Il s'agit d'éléments de type en-ligne (input et label).
Les éléments de type en-ligne (inline) n'acceptent pas de dimmensions fixes, sauf apparemment s'ils sont flottants, ou peut-être aussi s'ils sont positionnés en absolu (je ne sais plus exactement).

Bonsoir,
ou s'il s'agit d'éléments en-ligne "remplacés", justement comme <input> ou <img> par exemple, à qui on peut appliquer des dimensions ou marges.
Cf : La structure des balises : bloc et en-ligne
Modifié par Alan (05 Apr 2006 - 23:59)

Alan a écrit :


Bonsoir,
ou s'il s'agit d'éléments en-ligne "remplacés", justement comme <input> ou <img> par exemple, à qui on peut appliquer des dimensions ou marges.
Cf : La structure des balises : bloc et en-ligne

Merci pour l'info !

On peut donc donner des dimmensions fixes aux input sans forcément les passer en display: block. Par contre, les label étant des éléments en-ligne "non remplacés", le display:block est nécessaire.