Différence entre les attributs "maxlength" et "size" en html?
Je suis un peu confus quant à la différence entre les attributs maxlength et size.
<input type="text" name="telephone" maxlength="30" size="34">
Je sais que maxlength est utilisé pour contrôler les données d'entrée. Alors, quelle est la raison d'utiliser les deux attributs à la fois?
L'attribut maxlength (not max-length) spécifie la longueur maximale de la chaîne d'entrée en caractères ou, plus exactement, en unités de code. Le navigateur devrait appliquer cela en refusant d’accepter plus de caractères. Cependant, ceci n'est pas censé agir comme une mesure de sécurité, car il peut être ignoré de manière triviale. Au contraire, il indique à l'utilisateur qu'aucun autre caractère ne sera accepté lors du traitement des données. Ceci est utile lorsque vous devez définir une limite supérieure, par exemple. votre base de données ne peut stocker qu'un nombre fixe de caractères pour certaines informations, ainsi que lorsqu'il existe une limite logique à la longueur (par exemple, si la donnée est un code à deux lettres pour un État américain, sa limite supérieure logique est de 2). ).
L'attribut maxlength est donc logique et il est prévu qu'il fonctionne même dans une interface utilisateur non visuelle. Cela n'a aucune incidence sur l'apparence visuelle du champ de saisie.
L'attribut size , en revanche, est destiné uniquement au rendu visuel. Il suggère une largeur visible pour le champ, en termes de caractères «moyens». Ce concept vague n’a pas été clarifié dans les spécifications et les navigateurs l’appliquent de manière incohérente. Cela fonctionne mieux quand une police monospace est utilisée. Cet attribut ne limite pas le nombre de caractères entrés, mais il affecte la facilité d'utilisation: il est difficile d'entrer, par exemple, une chaîne de 30 caractères dans un champ qui ne vous permet de voir que 10 caractères à la fois. La largeur d'un champ est également un signal pour l'utilisateur: elle indique la largeur maximale attendue de l'entrée.
Il est souvent approprié d'utiliser les deux attributs, souvent avec la même valeur. Par exemple, si le champ concerne un code postal à 5 chiffres, size=5 maxlength=5 convient, en particulier si vous définissez également font-family: monospace, de sorte que la largeur réelle soit plus ou moins exactement cinq chiffres.
Cependant, les valeurs peuvent différer. Par exemple, lorsque vous demandez une ligne dans une adresse postale, vous pouvez définir size=30, car cela suffit normalement pour une ligne, mais maxlength=80, si cela correspond aux limites définies par votre base de données ou votre traitement de données et que vous n'avez aucune raison particulière de ne pas le faire. Allo ces longues lignes.
L'attribut size peut en principe être remplacé par CSS, car il ne traite que du rendu visuel. Cependant, la largeur est généralement mieux définie en caractères et il n'y a pas d'unité universellement prise en charge pour la largeur moyenne d'un caractère en CSS; La nouvelle unité ch se rapproche, mais n’est pas tout à fait la même et n’est pas supportée par les anciens navigateurs.
max-length indique le nombre de caractères pouvant être entrés dans le champ de saisie, quelle que soit leur taille. L'attribut size détermine la largeur du champ à l'écran.
Par exemple, je l'utilise généralement pour des choses telles que la saisie d'une adresse électronique où elle peut être assez longue, mais pour des raisons esthétiques (bonne conception Web), vous souhaitez que le champ de saisie ait une certaine longueur.
<input type="text" name="email" maxlength="50" size="20">
Une fois qu'un utilisateur a entré plus de 20 caractères pour son adresse électronique, le champ commence à défiler au fur et à mesure de la frappe.
La longueur maximale fait référence à la longueur maximale possible de la chaîne d'entrée. La taille fait référence à la taille de l'entrée elle-même.