28173 sujets

CSS et mise en forme, CSS3

Formulaire table-less : Alignement de champs : TEST IE 6

Bonjour !

J'ai un peu honte de cette question, mais j'aimerai trouver une solution élégante pour arriver à mes fins.

Mes formulaires sont constitués d'une suite classique de <label> et d'<input>

<fieldset>
  <legend>Une fiche</legend>
  <label>Nom</label>
  <input type="text" name="nom" value="">

  <label>Prénom</label>
  <input type="text" name="prenom" value="">

  <label>Localité</label>
  <input type="text" name="localite" value="">
</fieldset>

etc...

Ils sont mis en forme simplement :

label
{
  display:block;
}

input, select
{
  margin-bottom:10px;
}


Or, cela fini par me faire un formulaire assez kilométrique.

J'aimerai pouvoir mettre certains champs l'un à côté de l'autre, comme par exemple, le champ "Nom", et à sa droite, le champ "Prénom".

Une solution aurait été de faire un fieldset "cochon" dont je retire les bordures, et dans lequel je place le champ "Nom" (avec son label), et un second fieldset "cochon" dans lequel je place le champ "Prénom" (avec son label), et de mettre ces fieldsets "cochon" en float:left;

Au final, avec cette solution, au lieu de faire un formulaire avec un tableau, je me retrouve tout de même avec une kilotonne de fieldset qui ne servent que pour la mise en page.

Il y aurait-il une solution plus propre qui m'aurait échappé ?

D'avance merci pour vos pistes !
Modifié par Bouchon (23 Jul 2009 - 11:14)
Salut,
Tu peux tout simplement mettre une structure de ce genre :

<p>
<label>le label</label>
<input type="text" />
</p>


Puis mettre en CSS:

label {
float:left;
}
p{
clear:both;
}


Ca te mettras les champs les uns en dessous des autres avec les intitulés, à moins que ce ne soit pas ça que tu cherches à faire ^^. Si jamais tu avais une mise en ligne de ce que tu as ^^.

P.S: le html n'est pas valide mais c'est un exemple ^^
Bonjour !

Ce n'est pas tout à fait ce que je cherche, voici un mockup afin de donner une idée plus précise de mon souhait :

upload/11703-formulaire.png

Mon problème est donc de pouvoir placer le champ "Prénom" à droite du champ "Nom", tout en gardant le code le plus propre possible.
Igor a écrit :
Bonjour,

En passant dans une suite "classique" on trouverait un attribut for dans le label et id de même valeur dans l'input Smiley cligne

Comment utiliser l’élément label dans les formulaires?


Merci pour l'article, je me coucherai moins bête ce soir ! Smiley smile

Je vais déjà rectifier cela dans le formulaire, mais on est bien d'accord que cela ne résouds pas mon problème ? (pour être sur que je ne rate pas une subtilité).
Bouchon a écrit :
... mais on est bien d'accord que cela ne résouds pas mon problème ? (pour être sur que je ne rate pas une subtilité).


Et encore, la deuxième écriture pourrait être intéressante :

<label for="mon_id">
	Chercher:
	<input id="mon_id" type="text" />
</label>


Mais il faut que je voie si elle ne va pas me poser des problèmes avec le positionnement du <label> par rapport à l'<input> à l'affichage. (<label> au dessus de l'<input> VS <label> à gauche de l'<input>), puisque maintenant, l'<input> est un fils du <label> avec cette écriture.
Modifié par Bouchon (22 Jul 2009 - 15:11)
Bonjour ,

piste -> float.

englober les label et input dans un paragraphe dimensionné en flottement
Formater ou dimensionner label/input au valeur qui conviennent.
Enfin ,modifier le contexte de formatage du fieldset.

Cordialement

GC
Le coup d'utiliser un <p> pour encadrer le label et l'input de chaque champ du formulaire me semblait pas très propre, mais je vois que le sujet a déjà été débattu : http://forum.alsacreations.com/topic.php?fid=2&tid=42814.

Je vais faire quelques essais et reviendrais avec la solution qui aura été finalement retenue.

Merci en tout cas pour vos pistes, et de la vitesse de vos réponses ! Smiley smile
re-Bonjour !

Je pense avoir réussi à arriver à mes fins proprement : vous pouvez maintenant voir le résultat à cette adresse : http://forge.greencode.be/labo/css_formulaire.html

Je vous serais vraiment reconnaissant si vous pouviez me confirmer si le résultat s'affiche correctement sur vos navigateurs (IE 6 et 7 me tracassent tout particulièrement).

Pour rappel, le résultat attendu est celui-ci :
upload/11703-formulaire.png

D'avance un tout grand merci pour vos retours !
Modifié par Bouchon (22 Jul 2009 - 21:37)
Bonjour !

J'ai reçu des screenshots pour IE7, IE8 (!), Safari et Opéra, et cela fonctionne parfaitement.

Est-ce que quelqu'un aurait un IE6 sous la main pour vérifier si IE6 gère correctement cet affichage ?

D'avance un tout grand merci !
Sujet clos
Aller à