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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS et formulaire

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS et formulaire

n°1006062
$man
Posté le 08-03-2005 à 21:46:43  profilanswer
 

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
mood
Publicité
Posté le 08-03-2005 à 21:46:43  profilanswer
 

n°1006069
FlorentG
Posté le 08-03-2005 à 21:57:59  profilanswer
 

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
n°1006073
$man
Posté le 08-03-2005 à 22:01:25  profilanswer
 

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
n°1006099
boulax
Inserer phrase hype en anglais
Posté le 08-03-2005 à 22:17:18  profilanswer
 

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


---------------
Posté depuis des chiottes, sales. Me gusta.
n°1006101
FlorentG
Posté le 08-03-2005 à 22:18:11  profilanswer
 

boulax a écrit :

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


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

n°1006103
boulax
Inserer phrase hype en anglais
Posté le 08-03-2005 à 22:19:01  profilanswer
 

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.
n°1006107
FlorentG
Posté le 08-03-2005 à 22:21:35  profilanswer
 

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

n°1006109
boulax
Inserer phrase hype en anglais
Posté le 08-03-2005 à 22:23:08  profilanswer
 

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.
n°1006111
FlorentG
Posté le 08-03-2005 à 22:26:26  profilanswer
 

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

n°1006127
$man
Posté le 08-03-2005 à 22:36:24  profilanswer
 

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
mood
Publicité
Posté le 08-03-2005 à 22:36:24  profilanswer
 

n°1006129
FlorentG
Posté le 08-03-2005 à 22:38:36  profilanswer
 

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

n°1006144
$man
Posté le 08-03-2005 à 22:58:11  profilanswer
 

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
n°1006147
FlorentG
Posté le 08-03-2005 à 23:01:21  profilanswer
 

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

n°1006154
$man
Posté le 08-03-2005 à 23:09:20  profilanswer
 

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
n°1006235
Djebel1
Nul professionnel
Posté le 09-03-2005 à 00:17:14  profilanswer
 

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

n°1006706
cerel
Posté le 09-03-2005 à 13:16:53  profilanswer
 

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

n°1007241
$man
Posté le 09-03-2005 à 20:03:57  profilanswer
 

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

n°1007399
FlorentG
Posté le 09-03-2005 à 21:53:17  profilanswer
 

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


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

  CSS et formulaire

 

Sujets relatifs
Problème CSS et formulairePrésentation d'un formulaire grace aux CSS
CSS formulaire[css]Un formulaire dans une liste
formulaire et image cssenvoi automatique d'un formulaire / menu JS vs CSS
Formulaire de sondage XHTML/CSS ! Help !css et formulaire : style pour les champs de type "input type=file"
CSS et formulaire...Des idées de CSS pour égayer un formulaire ?
Plus de sujets relatifs à : CSS et formulaire


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