Présentation d'un formulaire grace aux CSS

Présentation d'un formulaire grace aux CSS - HTML/CSS - Programmation

Marsh Posté le 01-03-2005 à 20:06:04    

Bonjour à tous :)
Alors voilà, je suis un peu légèrement bcp un gros nb en CSS. Je m'y mets, et comme faut bien commencer, je tente de gérer la présentation d'un form.
 
j'ai utilisé un fieldset comme conteneur aux champs du form, comme par exemple

Code :
  1. <form name='donnee' method='post' action='lesuperscript.php'>
  2.   <fieldset>
  3.   .......
  4.   </fieldset>
  5. </form>


 
et dans le fichier CSS, pour que les champs soient présentés de manière verticale, un champ par ligne :

Code :
  1. fieldset * {display : block;}


 
oui mais voilà : j'ai notamment dans ce formulaire 3 champs pour rentrer la date : un input type text pour le jour, un pour le mois, un pour l'annee (je bosse pour des utilisateurs neuneus, pas question de leur mettre un champ unique pour la date).
J'aimerai donc que ces 3 champs de date soient sur la même ligne, contrairement aux autres champs. donc j'ai fait ca dans le fichier html  

Code :
  1. <div class='date'>
  2.   <input type='text' name='jourdate' />
  3.   <input type='text' name='moisdate' />
  4.   <input type='text' name='datedate' />
  5. </div>

(j'ai simplifié le code pour aller à l'essentiel)
 
et dans le CSS je mets

Code :
  1. .date {display:inline;}


j'ai essayé avec pas mal de trucs pour la classe date, comme des float left et j'en passe et des meilleurs mais rien n'y fait, les 3 champs de la date ne sont pas sur la meme ligne.
 
Quelqu'un aurait une suggestion? :)
   

Reply

Marsh Posté le 01-03-2005 à 20:06:04   

Reply

Marsh Posté le 01-03-2005 à 20:24:40    

J'ai l'impression que tu n'as pas bien compris a quoi s'applique la propriete display.
Cette propriete ne s'applique pas aux balises contenues de celle que tu veux changer, mais a elle meme.
 
Par exemple :

Code :
  1. <div>
  2.   <input type='text' class='date' name='jourdate' />
  3.   <input type='text' class='date' name='moisdate' />
  4.   <input type='text' class='date' name='datedate' />
  5. </div>

Si tu veux que tes input ce placent les uns a cote des autres, alors tu faits comme ca :

Code :
  1. .date {
  2. float:left;
  3. }


(Si les input sont par defaut de type inline, alors ils seront automatiquement les uns a cote des autres).
Comme tu le vois, "float:left" (ou "display:block" ) s'applique a l'element qui a cette classe, non pas aux balises contenues par...
 
 
Petite remarque supplementaire, on pourrait facilement "recuperer" ton code.

Code :
  1. <div class='date'>
  2.   <input type='text' name='jourdate' />
  3.   <input type='text' name='moisdate' />
  4.   <input type='text' name='datedate' />
  5. </div>

Et la css

Code :
  1. .date input {
  2. float:left;
  3. }


Bien que correct, ce code est peut-etre "pedagogiquement" moins bon, car la difference entre les deux codes est minime, donc on peut passer a cote de la difference.
 
 
Pour information, ton fieldset est egalement faux (d'apres ce que tu as explique).
N'oublie pas les labels aussi dans ton formulaire :D.


Message édité par cerel le 01-03-2005 à 20:25:24
Reply

Marsh Posté le 01-03-2005 à 20:32:45    

huhu Cerel mon sauveur comme d'hab :)  
navré de poser des questions aussi élémentaires, je m'y suis mis hier soir.
 
Du coup je sais pas pourquoi mon fieldset est faux :D
 
et pour les labels ... bah je sais pas ce que c'est donc je me renseignerai :p
 
En tout cas merci, et sinon je trouve la 2eme solution plus élégante, peut-être moins pédagogique mais au moins on définit une seule classe date. Je vais opter pour celle la :)

Reply

Marsh Posté le 01-03-2005 à 22:19:46    

Tiens, voila un lien vers le site de fastclemmy :
FORMidablement beau
Il a regroupe quelques liens vers des forms. Parcour ces liens, tu trouveras des infos interessantes sur les fieldsets, les legends ainsi que sur les labels.

Reply

Marsh Posté le 02-03-2005 à 00:21:04    

je vais regarder ca merci :)

Reply

Marsh Posté le 02-03-2005 à 00:52:12    

edit pour cause de racontage de n'importe quoi et d'aperçoition (oui oui ca existe ce mot  :pt1cable:) d'erreur
 
et pour les labels (en fait je connaissais juste pas le nom les désignant  :D ), bon suis un peu à la masse, mais je les ai pas oublié.
 
Sinon je conseille vivement le lien indiqué si certains veulent remettre en forme leurs forms  :)


Message édité par Djebel1 le 02-03-2005 à 01:44:34
Reply

Marsh Posté le 02-03-2005 à 10:20:03    

Il y a plus noobs que toi Djebel1, c'est un bon début,
En revanche, il me semble que tu peux appliquer un style sur ta balise form au lieu d'ajouter une balise qu'il ne te sert que pour ta présentation.
Non ?

Reply

Marsh Posté le 02-03-2005 à 18:41:55    

Si tu parles du fieldset, sache que cette balise a un sens (celui de grouper des elements qui ont des liens entre eux).
 
Concernant le div pour la date, il est vrai que l'on peut discuter. On pourrais utiliser un fieldset, mais ca me plait pas trop car dans ce cas la, bien que les elements soient lies les uns aux autres, le lien est trop "specifique".
Je trouve que le div dans son cas est plus correct car il permet de grouper des elements et d'y apporter la meme mise en page, alors que le form serait trop generique du point de vue des champs qui composent la date.
 
En theorie il faudrait "eviter" les divs le plus possible, et utiliser d'autres balises plus adaptees a la place. Mais il me semble que dans son exemple le div est bien utilise. Comme dit auparavent, dans son cas le fieldset me plait pas trop. Peut-etre me trompe-je :D ...


Message édité par cerel le 02-03-2005 à 18:43:45
Reply

Marsh Posté le 02-03-2005 à 18:46:56    

Enfin de toute manière il faut au moins un conteneur dans le <form> : div, fieldset, p, etc... On peut pas avec le form et direct les input dedans ;)

Reply

Marsh Posté le 02-03-2005 à 23:29:09    

merci de vos conseils :)
après avoir regarder le lien de Cerel, j'ai opté pour un conteneur div à la place du fieldset, à l'intérieur du form, un span autour des labels, un span autour des input du form, les labels et input qui correspondent regroupés dans un div (qui permet de recréer un effet de ligne).
Du style :

Code :
  1. <form ....>
  2.   <div ID='conteneur'>
  3.     <div class='row'>
  4.       <span class='label>
  5.         <label ......>
  6.       </span>
  7.       <span class='input'>
  8.         <input .....>
  9.       </span>
  10.     </div>
  11. ....
  12.   </div>
  13. </form>


En plus avec cette méthode, les 3 champs pour la date sont dans le meme conteneur div='row', ils sont donc bien mis en correspondance avec le label, etc      

Reply

Marsh Posté le 02-03-2005 à 23:29:09   

Reply

Marsh Posté le 03-03-2005 à 07:14:22    

Je savais que j'aurais du faire attention avec mon lien.
 
Il faut garder le fieldset car il a un sens semantiquement parlant.
 
Dans le lien que j'ai donne, il y a 2-3 formulaires qui sont bien faits, mais pas tous :/ (Promis la prochaine fois je donne le lien de ceux qui sont bien faits...).
 
Et pour les labels n'oublie pas la propriete "for" (donc faut donner un id aux elements du form).

Reply

Marsh Posté le 03-03-2005 à 10:42:02    

ok je vais remettre le fieldset à la place du conteneur.
 
Par contre, je laisse juste les 'input' et les labels tels quels sans les inclure dans un span? ou je laisse comme je l'ai mis plus haut?
 
Et si tu me dis de garder les spans autour des labels, je ne peux pas laisser <span class='labels'> ? il faut que ca soit un ID malgré le fait que le label est défini par la propriété 'for'?
 
encore merci

Reply

Marsh Posté le 03-03-2005 à 11:49:32    

Dans le code que tu as montre j'ai pas vraiment l'impression qu'ils soient indispensables, faut voir a quoi ils te servent... Parce que la j'ai surtout l'impression que tu veux "imiter" un tableau ...
(Regarde ce form )
 
Sinon la remarque que j'ai fait pour "id" et "for" concerne le fonctionnement des labels.
Un label est defini pour un element precis. Par exemple :

Code :
  1. <form ...>
  2. ...
  3. <label for="nom">Nom :</label>
  4. <input type="text" id="nom".../>


Apres si tu veux tu peux donner un id a ton label et une classe sans probleme.


Message édité par cerel le 03-03-2005 à 11:49:57
Reply

Marsh Posté le 03-03-2005 à 20:32:17    

donc les <div> autour de mes labels sont inutiles, pusqu'ils n'apportent rien de plus que les labels non?
 
sinon, histoire de savoir si j'ai suivi un des bons exemples de ton lien, ou un mauvais, j'ai suivi les conseils de cette page : http://pompage.net/pompe/csspratique/
je trouvais le display sympa ...
 
en plus le lien que tu viens de me filer, c'est le seul de la liste que j'ai pas lu justement, c'était le dernier et je commencais à saturer :D


Message édité par Djebel1 le 03-03-2005 à 20:33:11
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed