Formulaire - taille des champs de saisie

Bonjour,

Après quelque recherches sur internet, je reste sans réponse et je viens donc vous demander conseil. En effet, sur le site que je suis en train de faire, j'ai des formulaire. Mais j'ai un problème au niveau de la taille. Je vous laisse voir par vous-même en image :
Voici donc ce que j'obtiens sous Firefox. C'est très semblables sur Google Chrome, Opéra et Safari (quand je dis "très semblables", c'est juste que certaines couleurs changent ou l'espacement des lignes, etc... rien d'important donc, les deux champs de saisis sont parfaitement alignés)
Et voici le résultat sous IE. C'est donc la différence de taille qui me gène ici.

Je voulais donc savoir s'il est possible de remédier à ce problème ou non. Il faut savoir que le champs et plus petit uniquement sur les "password". Pour définir la taille, j'avais trouvé deux solutions :

<input type="password" name="mdp" id="mdp" width="30" />

Ou

<input type="password" name="mdp" id="mdp" size="30" />

Mais cela ne change rien au problème.

D'ailleurs, je me demandais aussi quelle était la différence entre size et width du coup ? Lequel vaut-il mieux utiliser ? Car au final, il semble tous deux faire la même chose.

Voilà, j'espère que quelqu'un pourra répondre à mes interrogations =)

Je vous souhaite à tous une excellente journée ! ^^
Tatsu
Modifié par tatsu (25 Mar 2009 - 15:44)

width demande une unité (px généralement)

Ok, merci pour cette réponse.

Pour vérifier que ce n'était le problème, j'ai rajouté l'unité dans mon code, mais ça n'a rien changé. (je m'en doutais à vrai dire, mais bon, l'espoir fait vivre )

Laurie-Anne a écrit :
width demande une unité (px généralement)

C'est vrai en CSS, mais pas en HTML. En HTML l'unité n'est renseignée que s'il s'agit de pourcentages.

@tatsu : Pour fixer la largeur d'un élément je te conseille de passer par du CSS. D'ailleurs si on regarde la DTD du HTML 4.01, on peut voir qu'il n'y a jamais eu d'attribut width pour un input. L'attribut size n'étant utilisé que pour donner une largeur à ton champ par rapport à un certain nombre de caractères (size="30" => largeur de 30 caractères).

Je viens d'essayer en passant par le css. Peut-être que je m'y prends mal, ça ne change toujours rien.
Voici ce que j'ai mis, au cas où :

input[type="text"], input[type="password"] {
	width: 30px;
}

C'est bien ainsi qu'il faut faire normalement, non ?

Normalement, oui, mais cette technique n'est pas reconnue par IE6 et inférieurs.

Ah, c'est justement sous IE6 que j'ai ce problème de taille (je ne peux vérifier sur IE7 que lorsque je serai chez moi, l'ordinateur du boulot refusant la mise à jour)

Y a-t-il moyen alors de l'écrire autrement pour IE ?

Tu es obligé de mettre une classe à tes champs.

Bonjour,

Tu déclares un div pour contenir le formulaire puis tu appliques tes classes, une pour les champs et une autre pour la box message pour parametre longueur/largeur.
Par exemple, pour les champs:

.champs {
height: xxpx; /* Hauteur des champs */
width: xxxpx; /* Longueur des champs */
border: xxx; /* Epaisseur de la bordure s'il y a lieu */
border-color: xxx; /* Couleur de la bordure s'il y a lieu */
background: xxx; /* Couleur du fond du champ */
font-family: xxx; /* Police utilisé pour les champs remplis par l'utilisateur */
font-size: xxxpx; /* Taille de la police */
color:#xxxxxx; /* Couleur de la police */
}

Tu insères ensuite ta classe dans les inputs, eux même contenu dans un container de préférence. Ca donne ceci:

<input type="text" class="champs" name="xxx" />

Ensuite je te conseille d'installer IE tester, c'est un freeware qui te permet de visualiser les pages sous IE de la version 5.5 a 8 sans rien installer d'autre que le programme. Cela est bien utile.

Puis, de faire des feuilles de styles différentes pour chaque version notamment la 6 pour la hauteur des champs qui est plus petite ainsi que de paramétrer la hauteur des espaces entre chaque champs pour la version 7 via des paragraphes personnalisés. A plus fortes raisons tout les paragraphes pour la version 7.

Tu insères des commentaires conditionnels dans le head de ta page html pour déclarer chaque feuille de style en fonction du navigateur ciblé.

Bonne continuation.
Modifié par artistik (04 Apr 2009 - 00:18)