Attribut de taille pour un champ de saisie non respecté
Pris directement depuis W3Schools :
Définition et utilisation L'attribut size spécifie la largeur d'un champ de saisie.
Pour
<input type="text">et<input type="password">, l'attribut size définit le nombre de caractères qui doivent être visibles. Pour tous les autres types d'entrée, la taille définit la largeur du champ de saisie en pixels.
Alors..
Si c'est vrai, pourquoi mon domaine est-il <input type="text" size="2"/> suffisamment large pour afficher 5 MMMMM CAPTIAUX?
Les mêmes informations "erronées" sont spécifiées dans la spécification HTML4, la spécification HTML5, Sitepoint, Mozilla Developer Network et la bibliothèque MSDN de Microsoft. Ce n'est donc pas seulement la faute de W3Schools.
Quoi qu'il en soit, alors que les spécifications indiquent que l'attribut de taille doit être le nombre de caractères visibles, la plupart des navigateurs Web ont choisi d'utiliser le nombre d'unités em, ce qui signifie la largeur du caractère du M. majuscule.
Pour spécifier la largeur avec précision en pixels ou dans toute unité de votre choix, utilisez la propriété CSS width.
Pour répondre à votre question mise à jour: il s'agit de la largeur du M majuscule dans la taille de police par défaut appliquée par le style CSS à la zone de texte, mais la taille de police du texte à l'intérieur de la zone de texte est généralement plus petite.
Vous voulez faire entrer un nombre défini de caractères dans la boîte? Vous devrez passer à une police à largeur fixe.
Le problème est que l'attribut size = x N'est pas en pixels ... il indique plutôt la taille très approximative que l'élément <input /> Doit avoir pour contenir x caractères. Ainsi, par exemple, <input size=2 /> Devrait afficher une zone de saisie pouvant contenir 2 caractères.
Malheureusement, cela varie d'une police à l'autre (en particulier les polices à largeur variable), et vous remarquerez donc probablement que la définition de l'attribut size à 2 rendra en fait une zone de saisie de la taille 5 ou quelque chose comme ça. Si vous utilisez une police à espacement fixe, size=2 Devrait afficher un champ de texte pouvant contenir exactement 2 caractères ... ou au moins se rapprocher.
Cependant, pour définir la largeur d'un élément <input> En pixels, ems, etc., essayez plutôt d'utiliser la propriété CSS width:
<input type="text" style="width:20px" />
L'exemple ci-dessus fera la largeur d'entrée exactement 20 pixels de large, à l'exclusion des bordures et/ou du remplissage.
Vous ne pouvez pas prendre cela littéralement, car ce n'est pas possible.
La largeur de l'élément est basée sur l'attribut size et la taille de police utilisée, mais elle ne correspond pas exactement à ce nombre de caractères, car ce n'est pas possible.
Tous les caractères n'ont pas la même largeur, donc les caractères llll s'adapteront facilement à une entrée avec size="4", mais pas les caractères mmmm.
De plus, il y a de l'espace supplémentaire ajouté, donc une entrée avec size="2" ne sera pas deux fois plus large qu'une entrée avec size="1".
Ce qui est utilisé comme largeur de caractère moyenne peut dépendre du navigateur. J'ai testé dans Firefox, et je n'ai trouvé aucun caractère qui correspond exactement, mais le caractère * correspond assez bien à cette largeur moyenne.
La réponse est que, à moins d'utiliser une police à largeur fixe, le navigateur ne peut pas déterminer avec précision la largeur de deux caractères. Je pense que votre champ à deux caractères correspondrait probablement à deux "m" côte à côte.
En ce qui concerne l'exactitude de w3schools, ce qui suit est du W3C:
size = cdata [CN] Cet attribut indique à l'agent utilisateur la largeur initiale du contrôle. La largeur est donnée en pixels sauf lorsque l'attribut type a la valeur "texte" ou "mot de passe". Dans ce cas, sa valeur fait référence au nombre (entier) de caractères.