<input name="txtId" type="text" size="20" />ou
<input name="txtId" type="text" style="width: 150px;" />Quel est le code optimal pour le cross-browser ?
Bien sûr, cela dépend des besoins, mais je suis curieux de savoir comment les gens décident et sur quelle base.
Vous pouvez utiliser les deux. Le style css substituera l’attribut de taille dans les navigateurs qui prennent en charge CSS et rendre le champ la bonne largeur, et pour ceux qui ne sont pas, elle vous renverra au nombre spécifié de caractères.
Je recommanderais aussi coiffer les champs dans une feuille de style plutôt qu’inline.
Edit : Désolé, j’aurais dû mentionner que l’attribut size n’est pas une méthode précise de dimensionnement - il se réfère au nombre de caractères que du champ sera capable d’afficher à la fois.
La plupart des polices ne sont pas monolarges. En ce qui concerne "le nombre de caractères que le champ pourra afficher à la fois" .... De quel caractère s'agit-il ?
C'est un point intéressant, mais dans mes tests, width:20em fait que l'entrée est beaucoup plus grande que 20 caractères.
"em" est une mesure de la hauteur du caractère "M", c'est pourquoi la boîte devient trop grande.
En CSS, em est relatif à la taille de police de son parent direct ou le plus proche. Exemple : si la taille de police héritée d'un élément est de 16px et que vous fixez la taille de police à 2em, la taille résultante sera de 32px (16px*2em). L'unité "em" n'est pas une quantité de caractères. Plus d'informations : w3.org/TR/css3-values/#font-relative-lengths y kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs y j.eremy.net/confused-about-rem-and-em
size n'est pas cohérente entre les différents navigateurs et leurs paramètres de police possibles.
Les width Le style défini en px sera au moins cohérent, modulo problèmes de taille des boîtes . Vous pouvez également définir le style en 'em' si vous souhaitez le dimensionner par rapport à la police (bien que, là encore, cela sera incohérent à moins que vous ne définissiez le paramètre font et la taille explicitement), ou "%" si vous créez un formulaire à structure liquide. Quoi qu'il en soit, une feuille de style est probablement préférable à l'outil en ligne style attribut.
Vous avez encore besoin size para <select multiple> pour que la hauteur s'aligne correctement sur les options. Mais je ne l'utiliserais pas sur un <input> .
Je voudrais dire que cela va à l'encontre de la "sagesse conventionnelle", mais je préfère généralement utiliser la taille. La raison en est précisément la suivante : la largeur du champ varie d'un navigateur à l'autre, en fonction de la taille de la police. Plus précisément, elle sera toujours suffisamment grande pour afficher le nombre de caractères spécifié, quels que soient les paramètres du navigateur.
Par exemple, si j'ai un champ date, je souhaite généralement qu'il soit suffisamment large pour afficher 8 ou 10 caractères (deux chiffres pour le mois et le jour et deux ou quatre chiffres pour l'année, avec des séparateurs). En définissant l'attribut size, je m'assure que toute la date sera visible, avec un minimum d'espace perdu. Il en va de même pour la plupart des nombres : je connais la fourchette des valeurs attendues et je règle donc l'attribut size sur le nombre de chiffres approprié, plus la virgule décimale le cas échéant.
Pour autant que je sache, aucun attribut CSS ne fait cela. La définition d'une largeur en em, par exemple, est basée sur la hauteur, et non sur la largeur, et n'est donc pas très précise si vous souhaitez afficher un nombre connu de caractères.
Bien sûr, cette logique ne s'applique pas toujours - un champ d'entrée de nom, par exemple, peut contenir n'importe quel nombre de caractères. Dans ce cas, je me rabattrai sur les propriétés de largeur CSS, généralement en px. Cependant, je dirais que la majorité des champs que je crée ont un contenu connu, et en spécifiant l'attribut size, je peux m'assurer que le plus du contenu, en le plus est affichée sans coupure.
Vous pouvez également utiliser la fonction ex L'utilisation de la taille simplifie la plupart des cas en évitant d'avoir des douzaines d'ids/classes dans votre css pour la largeur.
@Forty En fait, vous ne pouvez pas. ex est le hauteur d'un caractère (en particulier, le "X"), et non la largeur - tout comme em . Comme il n'y a pas de relation fixe entre la hauteur et la largeur d'un caractère (x ou autre), il n'y a aucune raison de croire que l'utilisation de la hauteur d'un caractère pour définir la largeur d'un champ donnera à ce dernier la largeur appropriée pour afficher un nombre donné de caractères. Il pourrait être plus large ou plus étroit, en fonction de la police de caractères. Maintenant, le ch semble prometteuse, mais elle n'est pas compatible avec les versions d'IE inférieures à 9, ce qui aurait été un problème au moment où j'ai écrit ces lignes.
Oui, mais la hauteur de x n'est généralement jamais inférieure à la largeur, la plupart du temps elle est même un peu plus élevée ou presque identique, de sorte qu'elle est assez proche. ch aurait pu être mieux malheureusement, certains zéros sont minces et il se peut que l'espace de caractères ne soit pas entièrement mesuré...
La taille peut être inhérente à la signification de l'élément ; par exemple, l'initiale du milieu ne comporte qu'un seul caractère. Un prénom, par contre, n'a pas de limite de taille inhérente - à moins que vous n'en ayez une dans votre base de données.
@derobert : Je peux me tromper mais normalement on exprime cela en utilisant l'attribut maxlength-attribute pour input[type=text|password] et non pas avec l'attribut size-attribute.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
22 votes
Il est généralement déconseillé d'utiliser "px" sur le web. Vous devriez plutôt utiliser des unités relatives ("em", "%", etc.).
58 votes
@kangax Ce n'est qu'une opinion, il n'y a pas de consensus sur l'utilisation de px.
9 votes
@Kos Il s'agissait en quelque sorte d'un consensus
15 votes
@