Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1975 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Présentation d'un formulaire grace aux CSS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Présentation d'un formulaire grace aux CSS

n°997459
Djebel1
Nul professionnel
Posté le 01-03-2005 à 20:06:04  profilanswer
 

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? :)
   

mood
Publicité
Posté le 01-03-2005 à 20:06:04  profilanswer
 

n°997484
cerel
Posté le 01-03-2005 à 20:24:40  profilanswer
 

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
n°997491
Djebel1
Nul professionnel
Posté le 01-03-2005 à 20:32:45  profilanswer
 

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 :)

n°997639
cerel
Posté le 01-03-2005 à 22:19:46  profilanswer
 

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.

n°997761
Djebel1
Nul professionnel
Posté le 02-03-2005 à 00:21:04  profilanswer
 

je vais regarder ca merci :)

n°997777
Djebel1
Nul professionnel
Posté le 02-03-2005 à 00:52:12  profilanswer
 

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
n°997921
rompi
Posté le 02-03-2005 à 10:20:03  profilanswer
 

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 ?

n°998574
cerel
Posté le 02-03-2005 à 18:41:55  profilanswer
 

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
n°998581
FlorentG
Posté le 02-03-2005 à 18:46:56  profilanswer
 

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 ;)

n°998947
Djebel1
Nul professionnel
Posté le 02-03-2005 à 23:29:09  profilanswer
 

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      

mood
Publicité
Posté le 02-03-2005 à 23:29:09  profilanswer
 

n°999146
cerel
Posté le 03-03-2005 à 07:14:22  profilanswer
 

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).

n°999279
Djebel1
Nul professionnel
Posté le 03-03-2005 à 10:42:02  profilanswer
 

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

n°999384
cerel
Posté le 03-03-2005 à 11:49:32  profilanswer
 

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
n°1000114
Djebel1
Nul professionnel
Posté le 03-03-2005 à 20:32:17  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Présentation d'un formulaire grace aux CSS

 

Sujets relatifs
CSS : définition des Liens... oui mais..Remplacer le JS par les CSS. Oui mais ....
probleme de verification de formulairedebutant formulaire access et SQL
Diaporama en HTML/CSS ?Imprimer avec une feuille CSS préconfigurée
[CSS] avis et aide sur qq incompatibilités IE//MOZ[CSS] Forcer l'impression d'un "background-image"
Ajouter des éléments de formulaire sans PHP[CSS] longueur / hauteur d'une bordure ?
Plus de sujets relatifs à : Présentation d'un formulaire grace aux CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR