HTML : L'attribut size de la balise input - Définition et Utilisation

Définition de l'attribut size de la balise input

L'attribut size de la balise <input> en HTML permet de définir la largeur visible d'un champ de saisie dans un formulaire. Cet attribut spécifie la longueur en nombre de caractères que le champ d'entrée doit occuper. Il est utile pour adapter la taille des champs à la longueur du texte que l'on s'attend à y recevoir.

Syntaxe de l'attribut size

La syntaxe de l'attribut size dans la balise <input> est simple et se présente comme suit :

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

Ici nombre représente le nombre de caractères visibles que le champ doit afficher. Par exemple, size="20" affichera un champ assez large pour contenir environ 20 caractères.

Utilisation de l'attribut size

L'attribut size est principalement utilisé dans les formulaires HTML pour ajuster la largeur des champs d'entrée en fonction du contexte de saisie. Par exemple, si un champ est prévu pour des numéros de téléphone courts, vous pouvez limiter sa taille visible en définissant une petite valeur pour size. Cela contribue à améliorer l'expérience utilisateur en donnant des indices visuels sur le type d'information attendue.

Exemple d'utilisation de l'attribut size

Voici un exemple pratique montrant comment utiliser l'attribut size pour définir la largeur d'un champ d'entrée :

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="text" id="telephone" name="telephone" size="10" placeholder="Entrez votre numéro">
    <br>
    <input type="submit" value="Envoyer">
</form>

Dans cet exemple, le champ pour le nom est défini avec size="30", ce qui en fait un champ plus large, adapté à la saisie d'un nom complet. Le champ pour le numéro de téléphone utilise size="10" pour limiter la largeur visible, ce qui correspond à un format de numéro de téléphone plus court.

Astuces et conseils d'utilisation de l'attribut size

Adapter la taille en fonction du contenu attendu : Utilisez une valeur de size qui correspond au nombre approximatif de caractères que vous attendez pour ce champ. Cela aide l'utilisateur à comprendre combien de texte il peut y insérer.
Ne pas confondre avec l'attribut maxlength : L'attribut size détermine la largeur visible du champ, mais n'empêche pas l'utilisateur de saisir plus de caractères. Si vous voulez limiter le nombre total de caractères, utilisez maxlength.
Utilisation dans les formulaires responsives : L'attribut size peut affecter la mise en page sur les petits écrans. Privilégiez l'usage du CSS avec des width en pourcentage pour une meilleure adaptabilité, et combinez l'attribut size avec du CSS pour un contrôle optimal.
Vérifier la compatibilité des navigateurs : L'attribut size est bien pris en charge par les principaux navigateurs, mais il est toujours utile de vérifier la compatibilité pour s'assurer de l'uniformité de l'affichage.

Exemple Un formulaire HTML avec deux champs de saisie avec une largeur de 35 et 50 caractères :

Exemple : 📋 Copier le code

	  <!DOCTYPE html>
	  <html lang="fr">
	  <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <title>html5 demo</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="text" size="35" name="email" placeholder="e-mail"
	  ><br><br>
	    <input type="submit">
	  </form>
	   
	  </body>
	  </html>

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut size est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

AUCUNE.

Valeurs d'attribut

Valeur	Description
nombre	Spécifie la largeur d'un élément de <input>, en caractères. La valeur par défaut est 20

Conclusion

En somme, l'attribut size de la balise <input> est un outil simple mais efficace pour contrôler la largeur visible d'un champ de saisie dans les formulaires HTML. En l'utilisant correctement, vous pouvez améliorer l'expérience utilisateur en offrant des champs d'entrée adaptés à chaque contexte. En combinant cet attribut avec d'autres propriétés et des techniques CSS, vous pourrez créer des formulaires plus intuitifs et esthétiquement plaisants.

Retour à l'accueil du site

Par carabde 10 mars 2014