CSS et formulaire

CSS et formulaire - HTML/CSS - Programmation

Marsh Posté le 08-03-2005 à 21:46:43    

Salut,
j'ai ce petit formulaire

Code :
  1. form
  2. {
  3. padding: 0px;
  4. margin: 0px;
  5. }
  6. input
  7. {
  8. border:1px solid black;
  9. text-align:center;
  10. font-size:10px;
  11. <form action="login.php" method="post">
  12.   login : <input type="text" name="login" />
  13.   password : <input type="password" name="password" />
  14.   <input type="submit" name="valider" value="OK" />
  15. </form>


 
L'affichage est impec sous firefox mais sur IE, les 3 input ont une hauteur différente !
Pourquoi et comment harmoniser ça ?
mici


Message édité par $man le 08-03-2005 à 21:47:14
Reply

Marsh Posté le 08-03-2005 à 21:46:43   

Reply

Marsh Posté le 08-03-2005 à 21:57:59    

Tu leur définit une height, genre  

Code :
  1. input {
  2. ...
  3. height: 24px;
  4. }


 
Et attention au code de ton formulaire, il faut faire comme ça :

Code :
  1. <form action="login.php" method="post">
  2.   <div>
  3.     <label for="login">Login : </label><input type="text" name="login" id="login" />
  4.     <label for="pass">Password : </label><input type="text" name="password" id="pass" />
  5.     <input type="submit" name="valider" value="OK" />
  6.   </div>
  7. </form>


Donc toujours un conteneur dans un <form> (div, p, etc...). Et toujours associer un label avec un contrôle. Pour l'association, note l'attribut id du input qui va être pareil que l'attribut for du label :)


Message édité par FlorentG le 08-03-2005 à 21:58:33
Reply

Marsh Posté le 08-03-2005 à 22:01:25    

merci de ta réponse !
c'est assez "ouf" une simple mise en page css :)
 
EDIT: y'a déja du mieux, les input text et password on la meme hauteur, par contre la submit est bien plus petit (firefox et IE) :pt1cable:, reste t'il quelque chose a faire du coté de l'input submit ?
mici


Message édité par $man le 08-03-2005 à 22:07:51
Reply

Marsh Posté le 08-03-2005 à 22:17:18    

:eek: j'avais jamais vu ça, "label" :)


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 08-03-2005 à 22:18:11    

boulax a écrit :

:eek: j'avais jamais vu ça, "label" :)


Oui, c'est pas très connu. Et pourtant, c'est bien utile :)

Reply

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

FlorentG a écrit :

Oui, c'est pas très connu. Et pourtant, c'est bien utile :)


Ca apporte quoi ?


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 08-03-2005 à 22:21:35    

boulax a écrit :

Ca apporte quoi ?


Associer explicitement un libellé avec son contrôle. Sinon t'as du texte jetté comme ça, on sait pas d'où ça sort, etc... Aussi, en général pour styler et positionner tout ça, les gens mettent le libellé dans un div ou un span :/ Donc sémantique = zéro. Autant avoir un élement justement sémantique, qui précise bien que ce bout de texte correspond au libellé de ce contrôle :)

Reply

Marsh Posté le 08-03-2005 à 22:23:08    

FlorentG a écrit :

Associer explicitement un libellé avec son contrôle. Sinon t'as du texte jetté comme ça, on sait pas d'où ça sort, etc... Aussi, en général pour styler et positionner tout ça, les gens mettent le libellé dans un div ou un span :/ Donc sémantique = zéro. Autant avoir un élement justement sémantique, qui précise bien que ce bout de texte correspond au libellé de ce contrôle :)


Ok donc c'est plus sémantique que visuel (ça doit être pour ca que c'est méconnu, un peu comme la balise acronym que j'aime bien :D)


---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 08-03-2005 à 22:26:26    

Voilà, c'est sémantique, miam :love:
 
Après ça permet par exemple en XHTML de générer automatiquement les libellés de champs, sans bricolages. Ou justement de récupérer le libellé d'un champ à partir de la source :)

Reply

Marsh Posté le 08-03-2005 à 22:36:24    

salut, voila ce qui semble poser pb :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


 
quand j'enleve ca plus de pb, bizarre non ?


Message édité par $man le 08-03-2005 à 22:36:46
Reply

Marsh Posté le 08-03-2005 à 22:36:24   

Reply

Marsh Posté le 08-03-2005 à 22:38:36    

Non, c'est normal. Ca fait basculer le navigateur en mode "standard" :) Laisse-le, c'est mieux. Donc comme dit, si les contrôles ont pas la même hauteur, modifie-la dans le CSS

Reply

Marsh Posté le 08-03-2005 à 22:58:11    

ok, c'est plus "pro" :D
le pb c'est que si je laisse le laisse ca merdouille
ex : http://ymerejsan.free.fr/test.html
code visible dans la source de la page :)
mici


Message édité par $man le 08-03-2005 à 22:59:58
Reply

Marsh Posté le 08-03-2005 à 23:01:21    

Met un vertical-align: middle; dans la définition pour les input, ça aide déjà pas mal :)

Reply

Marsh Posté le 08-03-2005 à 23:09:20    

c'est fait, c'est effectivement plus propre, mais le bouton est plus petit que les champs. Pq n'agit t'il pas comme c'est autres copaings input ?
merci de ton aide , ca fait un peu "cours perso pour un galérien" :jap:
 
http://ymerejsan.free.fr/test.html


Message édité par $man le 08-03-2005 à 23:10:29
Reply

Marsh Posté le 09-03-2005 à 00:17:14    

sinon l'intéret visuel des labels, c'est aussi que si tu clique sur le texte contenu entre le <label> et </label>, ca te met direct le focus sur le champ à remplir correspondant :)

Reply

Marsh Posté le 09-03-2005 à 13:16:53    

Comme conteneur il en existe un pour les forms. Il s'appelle "fieldset", il possede egalement un "legend" qui permet de metre un libelle sur le "fieldset".
 
Alors autant utiliser ce conteneur, car il est prevu pour ca, deplus il permet de faire un joli effet avec sa legende. Effet qui n'est pas realisable sans fieldset et legend (ou en tout cas j'ai jamais vu le faire sans, et je ne connais aucune propriete css pour le faire).

Reply

Marsh Posté le 09-03-2005 à 20:03:57    

c'est noté, mais j'ai tj mon pb de taille avec l'input submit :(
mici

Reply

Marsh Posté le 09-03-2005 à 21:53:17    

Si tu rajoutes un padding: 0px sur tes input, ça arrange un peu la chose, reste 2 pixels de différence :D Met un id à ton bouton, et met une hauteur spécifique

Reply

Sujets relatifs:

Leave a Replay

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