Lorsqu’un champ texte déborde d’un formulaire, d’une barre de recherche ou d’un bloc latéral, on pense souvent que l’attribut HTML size suffit à régler le problème.
En pratique, ce n’est pas le bon réflexe. Pour contrôler proprement la largeur d’un champ texte, il faut utiliser CSS : width, max-width, box-sizing, et parfois clamp() pour un comportement responsive.
L’attribut HTML size définit le nombre de caractères visibles dans certains champs input. Il ne remplace pas une largeur CSS fiable dans une interface moderne. MDN précise que, pour un élément input, size correspond au nombre de caractères visibles pendant l’édition de la valeur.
Le problème : un champ texte trop large
Imaginons un champ de recherche placé dans une zone étroite : une sidebar, un menu mobile, un header, un widget WordPress ou un petit formulaire d’inscription.
Le HTML ressemble souvent à ceci :
<label for="recherche">Recherche</label>
<input
id="recherche"
name="recherche"
type="search"
size="15"
>Code language: HTML, XML (xml)On pourrait croire que size="15" force le champ à mesurer exactement quinze caractères de large. Pourtant, selon la police, le navigateur, les styles hérités, le padding, la bordure et le contexte du layout, le résultat peut varier.
Et surtout, size ne règle pas le vrai problème : intégrer le champ dans une mise en page CSS.
