L'attribut size de la balise <input>

L'attribut size fixe la largeur visible d'un champ <input> en nombre de caractères. Un champ avec size="20" affiche environ 20 caractères sans défilement horizontal — l'utilisateur peut quand même en saisir davantage.

À ne pas confondre : size contrôle l'apparence du champ, pas la quantité de texte autorisée. Pour limiter le nombre de caractères acceptés, utilisez maxlength.

Syntaxe

<input type="text" size="nombre">

La valeur par défaut est 20 si l'attribut est absent.

Exemple : champs de saisie avec largeurs différentes

Ici, le champ nom reçoit size="50" et le champ email size="35" — deux largeurs adaptées à ce qu'on attend de chacun.

Exemple :  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Exemple attribut size</title>
</head>
<body>
  <form action="page-cible.php">
    Nom : <input type="text" name="nom" size="50" placeholder="Votre nom complet">
    <br><br>
    Email : <input type="email" name="email" size="35" placeholder="votre@email.com">
    <br><br>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>
  

Exemple : formulaire avec label et placeholder

Ce deuxième exemple ajoute des <label> pour l'accessibilité et ajuste les largeurs selon le type de donnée attendue.

Exemple :  📋 Copier le code

<form action="/soumettre">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom" size="30" placeholder="Entrez votre nom complet">
  <br>
  <label for="telephone">Téléphone :</label>
  <input type="tel" id="telephone" name="telephone" size="10" placeholder="0600000000">
  <br>
  <input type="submit" value="Envoyer">
</form>
  

Conseils pratiques

size vs maxlength : size change l'apparence du champ, maxlength bloque la saisie au-delà d'un certain nombre de caractères. Les deux sont indépendants et se combinent souvent — par exemple size="4" maxlength="4" pour un code PIN.

size et responsive : Sur mobile, un champ avec size="50" peut déborder de son conteneur. On préfère gérer la largeur en CSS (width: 100% ou max-width). Si du CSS affecte la largeur de l'élément, il prend la priorité sur size.

Nouveauté 2025 : la propriété CSS field-sizing

Depuis 2024-2025, une alternative CSS existe pour les champs qui doivent s'adapter dynamiquement à leur contenu : field-sizing: content. Au lieu de fixer une largeur statique en caractères, le champ grandit et rétrécit automatiquement avec ce que l'utilisateur tape.

Exemple :  📋 Copier le code

/* Le champ s'ajuste à son contenu, entre 10 et 40 caractères */
input[type="text"] {
  field-sizing: content;
  min-width: 10ch;
  max-width: 40ch;
}
  

Important : Quand field-sizing: content est appliqué, l'attribut HTML size est ignoré par le navigateur. Les deux approches ne se cumulent pas.

Support navigateurs en 2025 : Chrome 123+ et Edge 123+ (depuis mars 2024), Safari 26.2 (décembre 2025). Firefox ne le supporte pas encore — son implémentation est en cours. En pratique, on peut l'utiliser comme amélioration progressive : les navigateurs sans support affichent simplement le champ à taille fixe, comme avant.

Compatibilité navigateurs

L'attribut size est supporté par tous les navigateurs courants. Son comportement est identique en HTML 4.01 et HTML5 — aucune différence entre les deux versions.

Valeurs acceptées